I always forget this so I'll ask the question here, find the answer and document it for future reference.
How do I add a Google font to a Backdrop CMS theme (in code)?
Accepted answer
Most helpful answers
Hello,
if you want to avoid to slow down your site you should add
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap" rel="stylesheet">
in your page.tpl.php
Open Sans is example
There are Backdrop CMS modules that make this task easier:
https://backdropcms.org/project/google_fonts
https://backdropcms.org/project/fontyourface
However, I prefer not to use a module, but to add the fonts via CSS file of the custom theme and to host the font files in a subdirectory of the custom theme, rather than to use a fonts with links to external sources.
The technique is described in many places, this is a good source:
https://www.w3schools.com/css/css3_fonts.asp
However, it is necessary to have the font files in all necessary formats - they can be downloaded from Google or other sites offering web fonts, but it is also possible to convert any desired font to the required formats, for example I use this free online service:
https://www.fontsquirrel.com/tools/webfont-generator
http://www.freefontconverter.com/
There are many sites that offer such converting, and fonts can also be purchased in web format from commercial font developers.
For me, this solution has the advantage of not relying on an external service to work with the fonts in the website, improves the speed of the site pages opening and creates much greater opportunities for unique typographic solutions.
Comments
There are different ways to do this. But, here is a good start. Just add an @import statement in your .css files.
@import url(http://fonts.googleapis.com/css?family=Merriweather:300,400,700,900); @import url(http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900);
I just discovered this awesome resource two nights ago:
There are Backdrop CMS modules that make this task easier:
https://backdropcms.org/project/google_fonts
https://backdropcms.org/project/fontyourface
However, I prefer not to use a module, but to add the fonts via CSS file of the custom theme and to host the font files in a subdirectory of the custom theme, rather than to use a fonts with links to external sources.
The technique is described in many places, this is a good source:
https://www.w3schools.com/css/css3_fonts.asp
However, it is necessary to have the font files in all necessary formats - they can be downloaded from Google or other sites offering web fonts, but it is also possible to convert any desired font to the required formats, for example I use this free online service:
https://www.fontsquirrel.com/tools/webfont-generator
http://www.freefontconverter.com/
There are many sites that offer such converting, and fonts can also be purchased in web format from commercial font developers.
For me, this solution has the advantage of not relying on an external service to work with the fonts in the website, improves the speed of the site pages opening and creates much greater opportunities for unique typographic solutions.
This video explains how to use fonts hosted on your server instead of relying on a CDN for delivery: Self-hosting fonts explained (including Google fonts) // @font-face tutorial
+1 Im using google-webfonts-helper https://gwfh.mranftl.com/fonts
Hello,
if you want to avoid to slow down your site you should add
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap" rel="stylesheet">
in your page.tpl.php
Open Sans is example
There are different ways to do this. But, here is a good start. Just add an @import statement in your .css files.