Use Google Fonts in Blogger

The process of getting a Google Fonts font work in Blogger blog can be summarized in two steps:

  1. Choose Google Fonts
  2. Add the link code to Blogger

Step 1: Choose Google Fonts

  1. To browse all the Google Fonts available, visit the Google Fonts site.
  2. Choose fonts you like, click the little red “+” next to the font name to add the font to your collection.
    e.g.
  3. Once you’re done adding fonts, click on the black tab along the bottom of the screen to expand the collection tab.
  4. (OPTIONAL) On the collection tab, click on the CUSTOMIZE link to choose your font weights.
    (To keep page load times fast, choose only the font weights you need. 400 is normal, 700 is standard bold. The tab will even give you a Load Time estimate.)
  5. Click over to EMBED to get your code. This is what you’re going to add to your Blogger site.
    <link href="https://fonts.googleapis.com/css?family=Crimson+Text|Karla&display=swap" rel="stylesheet">

Step 2: Add the link code to Blogger

Paste following code into HTML/JavaScript gadget

<!-- Google Fonts Additions START -->
<link href="https://fonts.googleapis.com/css?family=Crimson+Text|Karla&amp;display=swap" rel="stylesheet" />
<style>
/* google fonts */
.widget.Header h1, h1, h2, h3, h4, h5, h6 {
    font-family: 'Crimson Text', serif;
}
.post-title {
    font-family: 'Karla', sans-serif;
}
</style>
<!-- Google Fonts Additions END-->

Reference Links

Comments

Post a Comment