Use Google Web Fonts in Blogger: Celebrating Google 18!

Estimated Reading Time:
"The monotony and solitude of a quiet life stimulates the creative mind." - Albert Einstein
Always wanted to start a blogpost like that. :-)

Welcome back to another CutieCoding post where we talk about tips for blogging for the lazy blogger, the KISS way.


So, there's default fonts. And there's...default fonts.


But my blog is different! I wanna use one of those funky fonts I see all around. [engage: whiny voice] Wait! I can't use them in Blogger? Why Google? WHHYYYYY! Enter: Google Web Fonts

So, today is Google's 18th birthday and what better way to celebrate than talk about making it pretty with some fancy fonts.

What I like about Google Fonts?

  • There are thousands (yes, thousands) of fonts spanning over 130 languages here! My first test? I checked out the Indic language fonts out - have to say, nice! 
  • It's free and open source (should this have been the first point?). One of the things that we have to keep in mind as a content creator is licensing and figuring out if a font is free or not. Here, Google hosts the library, you connect to it.
  • Easy-to-understand filters: Take it from someone who surfs through typeface sites and browsing for hours on end, the user-friendliness matters so that I don't spend a longer time trying to understand what they mean by 'Gothic'. If you like it, you try it. Simple. 
  • Integrated into Google Docs: My primary outlet for saving my rants and other squabbles. It's extremely easy to use any of the Google web fonts there. Not sure why it usually takes them longer to incorporate the "cool stuff" into Blogger though. 
  • Load times: This should have been the first point, I think. It shows you how quickly each font would load when you add it into your site. Very very cool.
  • Easy to preview: This is probably the easiest I have found to preview a font for a piece of text that I have been carrying on my web clipboard. Check out the screenshot below of a beautiful poem in Google Fonts. 
ADD GOOGLE WEB FONTS IN BLOGGER
The TL;DR Version
  1. Go to fonts.google.com.
  2. Fall in love with a font, or several. You can click into the box and type in to see a preview of how it would look. 
  3. In case you're wondering, the text written in the graphic above is a beautiful poem by Christina Rossetti called Monna Innominata
  4. Click on the '+' button on the top right corner of the fonts you like. 
  5. Once you're done with your selection, you should see a bar at the bottom of the page showing how many you selected. 
  6. Click on the bar to open the interstitial window and copy the code that start with <link href...>
  7. Now, log in to Blogger.com.
  8. Click on the blog you want to edit. The one that uses a Dynamic Views template. 
  9. Go to ‘Template’ and  first backup your HTML code by clicking on 'Backup / Restore' and downloading the XML file.
  10. Then, click the ‘Edit HTML’ button under the ‘Live on Blog’ frame.
  11. Now, paste the <link href...> code just under the&nbsp <head> tag. If you're looking at  your screen, how will I find it in this maze of HTML code, simply click into the text box and press Ctrl + F (for Windows) or Command + F (for Mac) and type in <head>
    in the search box that shows up. Make sure to add a forward slash '/' before the closing bracket because Blogger strictly uses XHTML and not pure HTML. 
  12. WHICH MEANS <link href="https://fonts.googleapis.com/css?family=Poppins|Roboto+Condensed|Source+Sans+Pro" rel="stylesheet"> WILL READ LIKE THIS <link href="https://fonts.googleapis.com/css?family=Poppins|Roboto+Condensed|Source+Sans+Pro" rel="stylesheet" / >
  13.  After you paste it into your website's HTML code, hit 'Save template'.
  14. Now, if want to use in your post, in your post editor, jump to ‘HTML’ side of your post and find the chunk of text that you want written in your preferred font.
  15. Once you've located the bit of your post that you want to have in your chose Google web font, find the <div> tag that encloses that part and change it to look like this. 
  16. CHANGE <div> TO LOOK LIKE THIS <div style="font-family: 'Poppins', sans-serif;">
  17. You're a-done-ult  - Get it? Coz Google turned 18 today! [I'll see myself out]

If you have any questions or wanna share more bad puns with me, let me know in the comments below.

...o0o...

Ray out! Peace!



Comments

Popular Posts