How to use Google Web Fonts in Blogger

When I first started using blogger, I was quite surprised to see only 7 fonts available to be used. On exploring further, I realized how Google has actually optimized this experience as well. Loading web fonts has some impact on web page loading times and thus performance. And loading only 7 fonts by defaults makes sure that there is no unnecessary performance impact for loading the fonts that end up never being used.

Google has a big library of web fonts. And it's very easy to reference those from within Blogger. This definitely opens up many font possibilities for the web designers.

First go to Google Fonts website.

Choose a font you'd like to use and click on the small 'Quick-use' icon as shown below:

Next you'll be taken to another page where you can select and copy the code as shown in the step 3 below:

1. Log in to your blogger account and open the blog that you want to edit

2. Go to 'Template' on the left.

3. Click on 'Edit HTML'. This will open the entire blogger template code for editing

4. Now search for

<b:include data='blog' name='all-head-content'/>

5. Just paste the code below this line.

6. Now you can use this font anywhere (in css or html code) like below:

font-family: 'Denk One', sans-serif;