You want to funkify your site. You've put your heart into the visual presentation of your Vanilla community. You're comparing it to other communities and you're pretty sure your's is a 10. But then you notice, there are some other 10s out there. You want to go up to 11. You're thinking web fonts!
(OK, the real story is there is someone in your marketing department who is insisting that you adhere to the a strict organization-wide style guide which includes very specific font faces.)
Vanilla has a built-in mechanism for using Google Fonts, but often communities are mandated to use font faces that is not available on Google Fonts. Now you are discovering something that seems so simple, is acutally quite complicated. Let's try to untangle fonts.
Web applications are viewed, one way or another, in a web browser. A web application will tell a web browser how to render text visually by declaring CSS rules like font-size, font-weight, color. These are very easy for the browser to interpret, calculate, and execute. But font-family, the shape of each letter, requires that the browser has access to a "recipe" for how to draw characters on the screen. Those recipes are font files. Your device has several of these recipes, they are what is known as Web-safe fonts. Fonts like Arial, Verdana, Times New Roman. Every operating system has those fonts on hand. This is why in any web application's CSS you can declare:
body {
font-family: "Times New Roman", "Century Gothic", serif;
}
And there's a good chance that your page will render in Times New Roman.
Custom fonts, non web-safe fonts, require that you tell the browser to import the "recipe" from somewhere in order to render it the way you want. But, if I declare:
body {
font-family: "Funky See Funky Do", sans-serif;
}
A visitor my page will not see the font "Funky See Funky Do" because most people's operationg systems will not have the "recipe" to render that font on hand. Instead the browser will render text with the default "sans-serif" font from the visitor's operating system. The visitor won't see an error, the page will simply render less funkily.
To call in that font I would have to add a line to the CSS like this:
@font-face {
font-family: "Funky See Funky Do";
src: url("https://cdn.myfonts.com/funkyfonts/funky-see-funky-do.otf") format("opentype"),
url("https://cdn.myfonts.com/funkyfonts/funky-see-funky-do.woff") format("woff");
}
body {
font-family: "Funky See Funky Do", sans-serif;
}
You have, no doubt, seen this section of the Style Guide in your Vanilla Dashboard; the Font > Custom Font. The Font URL field is supposed to point to a CSS file that has the correct @font-face declaration in it. For example:
https://myparentsite.com/styles/fonts.css
may be on your parent site's server, it is a CSS file, and it has only @font-face declarations. It can have several @font-face declarations, making several fonts available. Do not point the Font URL in this form directly to a font, only to a CSS file.
@font-face {
font-family: "Funky See Funky Do";
src: url("https://cdn.myfonts.com/funkyfonts/funky-see-funky-do.otf") format("opentype"),
url("https://cdn.myfonts.com/funkyfonts/funky-see-funky-do.woff") format("woff");
}
@font-face {
font-family: "Tequila Mockingbird";
src: url("https://cdn.myfonts.com/funkyfonts/tequila-mockingbird.otf") format("opentype"),
url("https://cdn.myfonts.com/funkyfonts/tequila-mockingbird.woff") format("woff");
}
@font-face {
font-family: "Kovenant";
src: url("https://cdn.myfonts.com/funkyfonts/kovenant.otf") format("opentype"),
url("https://cdn.myfonts.com/funkyfonts/kovenant.woff") format("woff");
}
(Don't forget, whenever you call in a file from another domain that you have to put that domain in the security section so that Vanilla can tell the browser "It's OK, we trust files from this domain." (see).)
Now you can go into your Style Guide > Advanced Settings and call on assign these fonts to various variables.
{
…
"global.fonts.customFont.url": "https://myparentsite.com/styles/fonts.css",
"global.fonts.customFont.name": "Funky See Funky Do",
"banner.title.font.family": "Tequila Mockingbird",
"titleBarNavigation.navLinks.font.family": "Kovenant"
}
What if I don't have a CSS file to access
What if you don't have a CSS file somewhere with @font-face declarations but you know where your fonts reside? What then? There's a JavaScript solution. You can by-pass the form and go to the JavaScript tab of the Style Guide. In there, you can write JavaScript that will inject a Style tag in the page with the same @font-face declartions.
First of all, add this function to your JavaScript:
/**
* Create a Style tag and inject it into the head of the page.
*
* @params String Valid CSS styles.
*/
const injectCSS = (styles) => {
const head = document.querySelector('head');
const styleTag = document.createElement('style');
styleTag.innerHTML = (styles) ? styles : '';
head.appendChild(styleTag);
}
Then create a big variable containing all your @font-face declarations:
const FONT_FACE_DELCARATIONS = `
@font-face {
font-family: "Funky See Funky Do";
src: url("https://cdn.myfonts.com/funkyfonts/funky-see-funky-do.otf") format("opentype"),
url("https://cdn.myfonts.com/funkyfonts/funky-see-funky-do.woff") format("woff");
}
@font-face {
font-family: "Tequila Mockingbird";
src: url("https://cdn.myfonts.com/funkyfonts/tequila-mockingbird.otf") format("opentype"),
url("https://cdn.myfonts.com/funkyfonts/tequila-mockingbird.woff") format("woff");
}
@font-face {
font-family: "Kovenant";
src: url("https://cdn.myfonts.com/funkyfonts/kovenant.otf") format("opentype"),
url("https://cdn.myfonts.com/funkyfonts/kovenant.woff") format("woff");
}
`;
Notice that I put this ( ` ) mark instead of a real quotation mark ( ' or " ) around that variable. It's because it is multi-lined. That's important.
And now I inject it in:
/**
* Create a Style tag and inject it into the head of the page.
*
* @params String Valid CSS styles.
*/
const injectCSS = (styles) => {
const head = document.querySelector('head');
const styleTag = document.createElement('style');
styleTag.innerHTML = (styles) ? styles : '';
head.appendChild(styleTag);
}
const FONT_FACE_DELCARATIONS = `
@font-face {
font-family: "Funky See Funky Do";
src: url("https://cdn.myfonts.com/funkyfonts/funky-see-funky-do.otf") format("opentype"),
url("https://cdn.myfonts.com/funkyfonts/funky-see-funky-do.woff") format("woff");
}
@font-face {
font-family: "Tequila Mockingbird";
src: url("https://cdn.myfonts.com/funkyfonts/tequila-mockingbird.otf") format("opentype"),
url("https://cdn.myfonts.com/funkyfonts/tequila-mockingbird.woff") format("woff");
}
@font-face {
font-family: "Kovenant";
src: url("https://cdn.myfonts.com/funkyfonts/kovenant.otf") format("opentype"),
url("https://cdn.myfonts.com/funkyfonts/kovenant.woff") format("woff");
}
`;
injectCSS(FONT_FACE_DELCARATIONS);
Voilà! The fonts are now available on the page. I can use them in my Theme Variables as above.
