Google fonts are awesome! They make your blog look stunning, but adding
them to blogger is a little tricky. I’m going to show you how so you can add
these beautiful fonts to your blog!
Generate Custom Robot. txt with this tools
A font page is a specific, designated blog post that displays your content in a stunning way This article will
walk you through how to set up and customize Google Font for free!
#1 - Select Your Google fonts for your Blogger site
#2 - Customize Your Blogger Font
Table of Content
1. Introduction
2. Why add Google Font to your blogger?
3. How to add Google Font to your blogger
4. What is Google font?
5. How to add Google fonts CSS
6. Resources and links for further reading!
What is Google Front.
Google Fonts is a collection of fonts that you can use for your website.
Each font in the library has been optimized by Google to work on different
devices and screens. The reason why most designers prefer using Google Fonts is
because you don't need to download them or update them as they are regularly
updated at the same time as Google Chrome updates.
According to Wikipedia
Google Fonts (formerly known as Google Web Fonts) is a font embedding service library. This
includes free and open source font families, an interactive web directory
for browsing the library, and APIs for using the fonts via CSS and Android. Popular fonts in the Google Fonts library
include Roboto, Open Sans, Lato, Oswald, Montserrat, Source Sans Pro, and Raleway.
How to add Google fonts to
your blogger
1. 1. Login to Google Web front directory and
select a front you like
2. 2. You can choose the styles of the front you
want
3. 3. It will give you the code to integrate the
font which look like this
<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=Roboto&display=swap"
rel="stylesheet">
CSS
rules to specify families
font-family:
'Roboto', sans-serif;
4.
You need to
close the code to prevent errors. To do this add a / to end before > so that
the code looks like this
<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=Roboto&display=swap" rel="stylesheet’ type=’text/css’/>
CSS rules to specify
families
font-family: 'Roboto',
sans-serif;
5.
Now login to your blogger dashboard navigate to Theme >
Edit HTML find <head> and below it paste the edited code to embed the
fonts.
To find <head> click ctrl + F
Google Web fonts will also provide you with the CSS for
the font which will look something like this
FONT-FAMILY: FONTNAME’;
6. 6. Now you have to add CSS to your blogger site:
To add CSS go to Theme>Customize select Advance then scroll down to Add CSS
7. Then copy this code:
body{
font-family: Roboto+Slab’, cursive
}
To specify only the blog
post title to have this particular font, use the following code
.post-title{
font-family: Roboto+Slab’, cursive
}
To apply the font only to the blog post body,
use the following code.
.post-body{
font-family: Roboto+Slab’, cursive
}
In this article, we’ve gone over a few of the best practices to keep in
mind when it comes to adding Google Web Fonts to your blog. If you have any
additional questions or suggestions, please leave them in the comments section
below. Also, if you found this article helpful and would like to stay
up-to-date on future articles, follow us on Facebook!
0 Comments