How to add stylish fonts in a blog

  1. Previous
  2. Next
  3. Recent

    1. Signs 'He' May be Cheating on You
    2. 7 Vows of Hindu Marriage - Know What 'Saat Vachans' Mean
    3. RuPay vs Visa vs Mastercard vs American Express- A Comparison
    4. What is RuPay? Everything You Need to Know About India's Domestic Payment System!
    5. Top 10 Online Portals to Find a High Paying Job in India
    6. Top Indians who Revolutionized the IT Sector in India
    7. 8 Initiatives by Narendra Modi that Could Change the Future of the Nation
    8. 8 Work-from-home Jobs for Housewives, Students, and Part timers
    9. Complete Company Registration Process in India - Explained
    10. Change Name in India in 5 Steps - Filing Affidavit, Newspaper Ad & Gazette Notification

Using stylish font(s) in a blog has gone easy with Google fonts. It allows you to add fancy fonts to amplify appearance of your blog headings and content.

Previously, we read a blog in correct font only when we have that particular font installed in our system.

But with Google fonts, you can download stylish fonts on page load and then use it in your blog. This is all done in real-time.

life cycle of blog using stylish fonts

Syntax to include the Google font?

The basic syntax for adding stylish fonts to a blog is same as including a CSS file. Here is the skeletal code,

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/ css?family=/* FONT NAME */">

Here we are including ‘Inconsolata’ font,

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/ css?family=Inconsolata">

Once you’ve included the font in your blog, alter your CSS file

CSS Selector {font-family:'Inconsolata';}

You can make the font appear bold using font-weight:bold property of CSS.

Including fonts with spaces between words

Put a ‘+’ in place of spaces in the font’s name. See the example below where font ‘Droid Sans’ is the included with a ‘+’ sign in between,

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/ css?family=Droid+Sans">

Including multiple fonts together

Separate multiple fonts with ‘|’ while including in a blog. Alter CSS file to include the font you want to use.

Here is how you can do it,

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/ css?family=Tangerine|Inconsolata|Droid+Sans">

Including bold and italic fonts

Not many stylish fonts have their bold and italics versions, so check this before using any font. You can include bold and italic version of a font with a minor alteration in code.

See the sample code,

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/ css?family=Tangerine:bold,bolditalic|Inconsolata:italic|Droid+Sans">

Things to remember while including fonts

  1. While using stylish fonts in a blog we are actually download these fonts. Downloading external data increases website loading time and makes it slower.
    So its better to use ligher fonts and in limited numbers
  2. Use font-weight:bold CSS property to make fonts appear bold rather than downloading the bold version of the font.
  3. Always use secondary fonts along-with your stylish fonts. There may be times when Google’s server gets un-responsive and fonts fail to load. In such cases, secondary fonts could be very much helpful.
    always use secondary font with stylish Google fonts
blog comments powered by Disqus