Skip to main content

How To Include Google Font In Blogger

How to Include Google Fonts in Blogger

Adding Google Fonts to your Blogger blog can enhance its typography and overall visual appeal. Google Fonts provides a wide range of free fonts that you can easily integrate into your blog. This guide outlines two effective methods for incorporating Google Fonts into Blogger: the @import method and the <link> tag method.

01. Method: Using the @import Method (Recommended)

The @import method is widely used because it keeps your code organized and is easy to implement. Here are the steps:

  • Visit Google Fonts: Go to https://fonts.google.com/.

  • Select a font: Browse or search for a font that suits your blog’s design. For example, you can choose "Roboto" for modern typography.

  • Choose font styles: Click on your selected font to view available styles (e.g., Regular 400, Bold 700). Use the "+" button to add the styles you need.

  • Copy the @import code: In the right sidebar, switch to the @import tab and copy the provided code:

    @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

  • Add the code to your Blogger template:

    • Go to your Blogger dashboard and navigate to Theme > Customize > Advanced > Add CSS.
    • Paste the @import code into the CSS editor.
    • Click Save.

  • Apply the font in your CSS: Use the font-family property in your blog’s CSS to apply the font. Example:

    body {
  font-family: 'Roboto', sans-serif;
}
h1, h2, h3 {
  font-family: 'Roboto', sans-serif;
  font-weight: 700; /* Bold style */
}

02. Method: Using the <link> Tag (Alternative)

The <link> tag method involves adding a stylesheet reference directly to your Blogger template's HTML. Here’s how:

  • Repeat steps 1–3 from Method 1: Choose your font and styles on Google Fonts.

  • Copy the <link> code: In the sidebar, switch to the <link> tab and copy the provided HTML code:

    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">

  • Add the <link> tag to your Blogger template:

    • Navigate to Theme > Customize > Edit HTML in the Blogger dashboard.
    • Locate the <head> tag in your template.
    • Paste the <link> tag just before the closing </head> tag.
    • Click Save.

  • Apply the font in your CSS: Refer to the instructions in Method 1 for applying the font using the font-family property.

03. Additional Tips and FAQs

Why Choose @import Over <link>?

  • The @import method keeps your stylesheet and font references in one place, making your code cleaner and more manageable.
  • It also avoids cluttering the <head> section of your HTML.

How to Use Multiple Fonts?

  • Google Fonts lets you select multiple fonts and generate a single @import or <link> tag that includes all selected fonts.
  • Apply each font in your CSS as needed for different elements.

Handling Font Weights and Styles

  • Ensure you select the required weights and styles on Google Fonts.
  • Use the font-weight and font-style properties in your CSS. Example:
    • .bold-text {
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
}
.italic-text {
  font-family: 'Roboto', sans-serif;
  font-style: italic;
}

What is &display=swap?

  • It allows fallback fonts to display while the Google Font is loading, preventing a "flash of invisible text" (FOIT).

Common Issues and Troubleshooting

  • Ensure the @import or <link> code is correctly copied.
  • Verify the font name is spelled correctly in your CSS.
  • Clear your browser cache if changes aren’t visible.

04. Conclusion

By following these methods, you can easily include Google Fonts in your Blogger template, improving its design and user experience. The @import method is preferred for its cleaner code and efficiency. Remember to use &display=swap for improved performance and always test your changes thoroughly.

Comments

Post a Comment