Description: An easy way to use Google fonts to Blogger blog. Adding Google fonts by Blogger template designer or adding it manually.
Do you want to use different fonts for your blog? The perfect solution is to use Google web fonts. Google font library is a great source of web fonts used by web developers and designers. Google web fonts are also free of cost so you can use it for your personal or commercial blogs. There are millions of blogs on the web and everyone want the uniqueness of their blog including this blog. You can differentiate your blog with other blogs with as many little things like CSS style, design, functionality, images and font styles. In this post, I am talking about web fonts. You can also use web fonts to differentiate your blog with the crowd. You have many ways to choose different font style in Google web font library that you can use in your Blogger blogs. Therefore, here is a simple guide to use Google web fonts in Blogger.
More Blogger Tips:
Select "Advanced" tab, and now you can change your page, title, tabs or post text fonts, colors and size.
- Host Blogger JavaScript or CSS files to Google Drive
- How to Make Responsive Images for Blogger Posts
- Add Responsive Social Media Share Buttons to Blogger
- Using Custom Robots Header Tag and Robots.txt file in Blogger
- Create a HTML Responsive Sitemap Page in Blogger
Google Web Fonts to Blogger: Inbuilt
If you are using Blogger default template, you can use bunch of Google fonts directly from your Blogger template designer (Dashboard > Template > Customize). Few custom templates also have these features.Select "Advanced" tab, and now you can change your page, title, tabs or post text fonts, colors and size.
Google Web Fonts to Blogger: Manual
If you are using a custom template then you may not having the above feature inside your Blogger template designer. In this case, you have to use Google web fonts manually into your Blogger blog which is not a difficult task. Just follow few simple steps to install Google fonts into your Blogger blog.- Go to Google Web Fonts page. Choose the fonts you want to use in your Blogger. For the demonstration I am using Raleway.
Once you select a font style, click on the associated "quick-use" icon as shown in the above screenshot.
- In the next page, you have to choose the styles you want. "Normal 400" font style is selected by default. If you also want this font style for your title then you may select "Extra-Bold 800" or any of your choice. Make sure, using many styles can slow down your blog speed so select it wisely.
- Now, scroll down the page, and select "JavaScript" tab (You can also use the different tab to use Google's script, but I recommend to use this async method). Copy the code.
- Go to Blogger Dashboard > Template > Edit HTML. Paste above code just below to <head> tag in your Blogger HTML code as shown in the following screenshot.
- Now, go to Blogger dashboard > Template > Customize > Advanced > Add CSS. You can add your style here for your post title or text. Different Blogger templates have different class for title or text. You can find it in your blogger template. Let I want to add bold raleway font in post title then I will add the following style in my CSS.
h3.post-title, .comments h4 {
font-family: 'Raleway', sans-serif;
font-weight: 800
}
I have used "font-weight:800" here since title need bold text.
- Now, let I want to use raleway font for our post text. I will use the following class.
.post-body.entry-content {
font-family: 'Raleway', sans-serif;
}
You can adjust your font size by adding "font-size:28px". - Your can view your change directly below to the code. Once everything is fine. Click on "Apply to Blog".
- You can also add the CSS style directly in your Blogger template HTML code.
It is a simple method to use Google web fonts for your Blogger blog although it may be difficult to find the correct class to change the style of your custom Blogger template. Try it yourself, if you don't find the proper title or text class to change its formatting, just comment with your Blogger URL, and tell me which text you want to change i.e., post title or post text.
