'Google Fonts' is the most popular and user satisfied open source font directory to beautify website with the greatest and fastest loaded typography. Fonts more than 135 languages are tested by Google here. Serif, Sans Serif, Display, Handwriting, Mono-space the all categories are available to help choosing the best font for your website. Adding Google fonts to your website will return best look and choosing the exact font will help to keep attendance your audience.

Add Google Fonts for Blogger or Any

To add Google Font, just go to the directory and choose your font. You can search for specific or by categories, trending, languages, number of styles, thickness, slant, width from the sidebar of this repository. 
After searched, you can select the font the available + (plus button just after the font name) and if you want to customize the selected font, click on the font name (in bold). You will see the glyph, characters, styles that created by this font as demo. Scrolling down you will also see the popular pairings with this font. In sidebar, information about this font is kept. 
To add the font to your website or Blogger follow the steps:
1. Go to Google Fonts.
2. Select your font.
3. Click on the font name.
4. Customize font.
5. Click on "SELECT THIS FONT"
6. Click on "Family Selected" from the pop-up box in the bottom. (I have chosen Roboto font family)
7. You can embed or add the selected font in two ways: first put the standard code into <head> tag such as
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"/>
 or import the font as css and add the @import code into <style> tag such as
<style>
@import url('https://fonts.googleapis.com/css?family=Roboto');
</style>
*** Blogger users have to open html template by "Go to Blogger→Template→Edit HTML"
To find head tag,  single click on template code → Ctrl + F → Paste <head> and enter to find.
To find css single click on template code → Ctrl + F → Paste ]]></b:skin> and enter to find.

8. To specify your selected font you have to put the font property that is given on the pop-up box such as
font-family: 'Roboto', sans-serif;

9. Finally save your template (for Blogger) or save your css file (for other) and reload your website.

Wow ! You did it. 

Recommend: How to Eliminate Render Blocking Google font CSS to load fast.

Have got this article helpful or not working? Put your comment below.