Using Google Fonts in Backlight
The European Union has officially canceled Google Fonts. At least, when using Google's CDN to serve them.
Fortunately, you can download fonts, then host them on your own. This is now the best and safest way to use Google Fonts with Backlight, so let's get into the details.
Deprecating the old way ...
In the Okapi Page and Pangolin Page design modules, under the Typography group, you will find an option, "Google Fonts Statement (optional)".
This should no longer be used.
We cannot remove it, because many websites are already using it. Removing it would be a breaking change to existing sites. However, the option will be flagged as deprecated in an upcoming release of Backlight, and will not appear in Kookaburra Page.
The New How-to: Using Google Fonts in Backlight
TL; DR Download the fonts you want, upload them to Backlight's custom folder, then use a custom stylesheet to declare them. You can then use them by name in Backlight's designer.
1. Find a font
First thing, visit Google Fonts and find a typeface you'd like to use. Raleway has got a nice letter W, so I've chosen it to appear in the examples below. I like a good W.
Now, let's establish some terminology; this is important.
The words "typeface" and "font" are typically thought to be synonymous, but they actually refer to different things. While a typeface describes a particular style of lettering, a font refers to variations of a typeface, like its size, style, and weight.
Therefore, we understand that Raleway is a typeface.
Meanwhile, a 16-pixel semibold, italic Raleway is a font.
For most (all?) typefaces on Google Fonts, you have options. For example, for the Raleway typeface, I can download individual fonts in either "normal" or "italic" style, at all of these weights: Thin 100, ExtraLight 200, Light 300, Regular 400, Medium 500, SemiBold 600, Bold 700, ExtraBold 800, and Black 900.
That's 18 different fonts for the Raleway typeface!
Why?! am I telling you this?!, you'd probably like to know. Because, we need to make decisions now, and we should make them with clear intent.
You can select specific fonts, or you can click the Download Family button to download everything to your desktop. If we download and unzip the family, we find that we have a lot of files. Ignoring the .txt files, we have ...
2 Variable Fonts
- Raleway-Italic-VariableFont_wght.ttf - 304 KB
- Raleway-VariableFont_wght.ttf - 310 KB
18 Static Fonts
- Raleway-Black.ttf - 163 KB
- Raleway-BlackItalic.ttf - 161 KB
- Raleway-Bold.ttf - 163 KB
- Raleway-BoldItalic.ttf - 161 KB
- Raleway-ExtraBold.ttf - 163 KB
- Raleway-ExtraBoldItalic.ttf - 162 KB
- Raleway-ExtraLight.ttf - 164 KB
- Raleway-ExtraLightItalic.ttf - 162 KB
- Raleway-Italic.ttf - 161 KB
- Raleway-Light.ttf - 163 KB
- Raleway-LightItalic.ttf - 162 KB
- Raleway-Medium.ttf - 163 KB
- Raleway-MediumItalic.ttf - 161 KB
- Raleway-Regular.ttf - 163 KB
- Raleway-SemiBold.ttf - 163 KB
- Raleway-SemiBoldItalic.ttf - 162 KB
- Raleway-Thin.ttf - 163 KB
- Raleway-ThinItalic.ttf - 161 KB
Hefty! If we installed all of the static fonts, we would be requiring our visitors to download a total 2,921 KB, or 2.85 MB of font data.
Obviously, we don't want to do that.
If we are planning to use the typeface for our standard body font -- for paragraphs, image captions, menu items, etc. -- then it will be used at various sizes, in various styles and weights, throughout the site. Then we should ignore the static font files and use the variable fonts, for a total load of 614 KB.
To save further, we can opt not to use italics on our site, and then only load the regular font, weighing in at 310 KB. Nice!
Personally, I tend not to use italics on websites, so this is typically the choice I would make.
However, we might be choosing a font only to be used for headings. If our headings are never italic, and we have chosen a font-weight of 600 (SemiBold) in our template, then we can choose the Raleway-SemiBold.ttf font, weighing only 163 KB, nearly half the variable font.
To wit, based upon your needs, you should choose whatever combination of files weighs in the lightest.
Maybe you pair the variable Raleway fonts for body text, with Black Merriweather for headings:
- Raleway-Italic-VariableFont_wght.ttf - 304 KB
- Raleway-VariableFont_wght.ttf - 310 KB
- Merriweather-Black.ttf - 142 KB
Total weight: 756 KB
That's still a bit heavy, but may be worth it. Personally, I would scrap the Italic Raleway, and buy in at 452 KB. But we'll keep all three for the sake of our example.
2. Upload the files
Using your FTP client, upload your chosen font files to your server. They should go into Backlight's "custom" folder.
How you organize that folder is up to you. I like to create a new "webfonts" folder. So, my folder looks like this:
- backlight
- custom
- css
- custom-stylesheet.css
- images
- js
- phplugins
- webfonts
- Raleway-Italic-VariableFont_wght.ttf
- Raleway-VariableFont_wght.ttf
- Merriweather-Black.ttf
- css
- custom
I have also created a custom-stylesheet.css file in the css folder. We'll be using that momentarily!
3. Add CSS
With our files in place, we need to declare the fonts in our CSS, using the @font-face at-rule, so that we can use them.
Create or edit a CSS file in backlight/custom/css, as in my example above. You can give the file any name you like, but the location cannot be changed.
Add a @font-face entry for each font file. In our example, we have three. Be sure to set the font-style (normal, italic) and font-weight properties where appropriate.
@font-face {
font-family: 'Raleway';
font-style: normal;
src: local('Raleway-VariableFont_wght'),
url('../webfonts/Raleway-VariableFont_wght.ttf') format('truetype');
}
@font-face {
font-family: 'Raleway';
font-style: italic;
src: local('Raleway-Italic-VariableFont_wght'),
url('../webfonts/Raleway-Italic-VariableFont_wght.ttf') format('truetype');
}
@font-face {
font-family: 'Merriweather';
font-style: normal;
font-weight: 900;
src: local('Merriweather-Black'),
url('../webfonts/Merriweather-Black.ttf') format('truetype');
}
Mind your syntax; commas, parentheses, quotes, and semicolons are important in CSS.
In can also be nice to set up some utility classes. Because we're loading only a very specific Merriweather font, we'll bake in the style and weight. For Raleway, we can be more flexible. We front them with html to boost their specificity.
html .font-merriweather {
font-family: Merriweather, serif;
font-style: normal;
font-weight: 900;
}
html .font-raleway {
font-family: Raleway, sans-serif;
}
4. Using the fonts
The setup is now complete, and we can actually use our new fonts.
- In Backlight, go to Designer => List Templates.
- Create or edit a template.
- Scroll down to Advanced Setup and click to open the control group.
- Under Custom Stylesheet, switch "Enabled: ON". Choose the CSS file from step #3.
- Scroll back up to Typography and click to open the control group.
- Under Base Font Properties, for "Prepend Font-family w/", enter:
- Raleway
- Under Headings Font Properties, for "Prepend Font-family w/", enter:
- Merriweather
Elsewhere in the template, anywhere you see an option named "Prepend Font-family w/", you can use your fonts by name.
Now, let's try out our utility class! Imagine you're writing content, and you want a heading to use Raleway, not Merriweather. To apply the utility class to your heading, you will need to use HTML instead of Markdown, and use the class attribute:
<h3 class="font-raleway">My Raleway Heading</h3>
Conclusion
You are now an expert in how to host and use Google Fonts locally in a Backlight site, compliant with GDPR. As a bonus, it's not just Google Fonts! If you have other fonts you want to use, or access to other font services, like Adobe Fonts, you can set up to use those font files exactly the same as above.
For example, Adobe's Adelle pairs very nicely with Raleway, instead of Merriweather.
If you have any further questions, please create a thread in our community forum.