How to add a new font to your HMML pages using the Google Fonts service?

When designing a Web page, it is crucial that the fonts we choose actually show up for the viewer. 

In order to do that we have to ensure the right font is being downloaded to the viewer's browser.

How can I find and download fonts?

Usually, you would find and download the font you like from the Internet, then post it on your Web server and reference it on the given page.

In the case of the Blogger, I do not know how to do that, but I use a handy service provided by Google Fonts that will hos the fonts for me.

How do I implement a font into my page?

Here are the simple steps (refer to the images)

1. Open Google Fonts and find the one you like, in my case Garamond.
2. Select a couple of variants in my case:
   - regular 400 weight
   - regular 400 weight, italic
   - bold 700
3. On the RIGHT panel, a <link> is created, copy it.
4. Pase the <link> into your HTML template HEAD section.
5. Please note the proper usage for the CSS rules:
   font-family: 'EB Garamond', serif;
6. Update your body HTML tag with the 
   
   

Opening Blogger Theme > Edit HTML

Example of the LINK tags

<!-- START: Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous" />
<link href="https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,700;1,400&#38;display=swap" rel="stylesheet" />
<!-- END: Uki's changes -->


</head>

NOTE: My code differs from that provided by Google Fonts in order to FIX a couple of the parser problems:

• Attribute name "crossorigin" associated with an element type "link" must be followed by the ' = ' character.
• The reference to entity "display" must end with the ';' delimiter.

How to set up the body CSS rules

body {

  font-style: normal;

font-weight: normal;

font-family: 'EB Garamond', serif; // from "Google Fonts" service

font-size: 1.2rem; // 120% of browser setting, because bigger is better

  color: #6f6f6f;

  background: $(body.background); // mountains

}

Design Tips

• Do not use more than a couple of fonts on the page,
  in my case, I use Garamond for writing and MONO for CODE samples.
• Identify your page's font in the body CSS and nowhere else,
  other tags can change the weight (normal, bold) and size 1.6rem

Share it

If you liked this post, please share it with the following accreditation:

Uki D. Lucas. 2022. http://uki.blogspot.com/2022/07/fonts.html

References

• Google Fonts: Garamond:
  https://fonts.google.com/specimen/EB+Garamond?query=Garamond