• Tutorials
  • Blogger Themes
  • Blogger SEO
  • Blogger Widgets
  • Internet
  • Mobile Phones
  • Gadgets
BloggerHero - Blogger Tuts, SEO, Themes, Gadgets
  • Home
  • Blogger
  • SEO
  • Themes
  • Internet
  • Widgets
  • Gadgets
  • About
  • search
    close

How to Add Google Fonts to Blogger Template

 Rohitkumar  14:03  Leave a Comment
Tweet
    Typography plays an important role in aesthetics of any blog, it is so important that the font on your blog does put an impact on readability of the article that your user is reading. Many people still use basic old school Arial, Times New Roman, Verdana fonts but oh boy, this is 2019 and this game needs to be on another level! So today I am going to share how to add Google Font to your blogger template or blogger theme. If you are a blogger template designer then this is really important that you must play with different typography fonts with your theme. So let's get started.

Basic Google Fonts 

    

    You can open Google Fonts at fonts.google.com and the most important thing to notice is that there are tons of fonts which you can actually use on any website. All these fonts are hosted on Google's own servers so you don't even have to worry about any hosting.You can explore the Google Fonts such as Categories, Languages and Font Properties. I usually prefer Sans Serifs as they are suitable for minimalist themes but you are free to choose your own preferred font.

Steps to Add Google Font to Blogger Template

  1. Select your google font from main page.
  2. Click on Select Font at right top corner.
  3. Click on Customize, if you want more styles you can tick the Font Weight (more ticks, more loading time)
  4. Click on Embed and copy the Code in Standard (You can also copy the @import code which needs to be pasted in CSS of your template)
  5. After copying the code, just paste the code in </head> of your blogger template.
  6. To apply the font, you will have to add the CSS code mentioned in "Specify CSS".
  7. Just copy that code and paste it in blogger template, but make sure you add the CSS property Font-Family to your CSS Codes. Such as to headings or any css ID or Class which is applied to text section. (Write down in comment section if you want to know more how to do this).
  8. You are done.
That's it, feel free to comment if you have any queries or issues or suggestions.
Do check out tutorial I wrote about How to add custom fonts to any website, more Tuts coming soon! Stay Subscribed.

    Sharing is Caring!

  • Facebook
  • Twitter
  • Google+
  • StumbleUpon
  • linkedIn
  • StumbleUpon

Rohitkumar A

Posted In blogger, Google, how to
Subscribe Now

Get Latest Posts Directly Into You Inbox

0 comments:

Post a Comment

Older Post Home
Do you like my work?

Buy Me a Coffee!
Blogger Hero

Popular Posts

  • 3 Easy Ways to Make Money Online Without Investment
  • How to Add Google Fonts to Blogger Template
  • How to Disable Adblock for Blogger
  • High PR Forums That Can Bring You High Traffic
  • Materiality - Material Design Blogger Template
  • How to add Custom Fonts in Blogger or Any Website
Email Newsletter

Get Latest Posts Directly Into You Inbox

Labels

Android blogger browser Buy computer css drop down menu Gadgets Google how to internet Laptops Mobile Phone phone responsive reviews SEO smartphone Social Media Social Share Widgets subscription box Template tool trick widget Wireless youtube
Powered by Blogger.

Popular Posts

  • High PR Forums That Can Bring You High Traffic
  • Sensational v2.0 Responsive Blogger Template
  • BloggerHero Free Premium Blogger Template
  • [Fixed] Facebook Share Thumbnail Is not Showing on Blogger
  • Materiality - Material Design Blogger Template
  • How to Add Facebook Open Graph for Blogger

Contact Form

Name

Email *

Message *

  • Home
  • About
  • Contact
  • Sitemap
  • Services
  • Request
  • Privacy Polciy

© 2013 BloggerHero.com. All Rights Reserved. Designed with Love for Everyone!