Tag Archives: css

How to use Google font API in your blog?

Posted on by
 

I like readable fonts, slightly big in size. But I’m quite bored with the standard fonts we’re seeing for ages like Arial, Verdana, Georgia etc. Recently I tried of another simple experiment with my blog by enabling open webfonts created by Google. I like the font collection provided from Google. In Windows, I like Segoe UI and Calibri which is the most readable fonts bundled with Windows. In the apple world, I personally like Helvetica but the problem is, these wont run across platforms. I agree most of the visitors in my website are Windows users but I still like to have a unique look for my website across browsers and platforms. Also in the old version of Windows, Calibri and Segoe UI is not available by default. Also the purpose of this post is to letting someone know, there some simple beautiful things are happening around to try with.

font_api-128

 

Google webfonts are available through Google Fonts API which helps you to add web fonts to any webpage. Google fonts are high in quality, extremely easy to use and it works with most of the browsers in any platforms. There are two methods to use Google open fonts in your website, the first one is very basic usage of CSS and second version called WebFont Loader which is giving advanced usage of fonts and give far more flexibilty using JavaScript.

Here I’m covering only the basic usage of enabling Google fonts in the website.

1. Add the sytlesheet link request to the required font.

With a wordpress blog, I prefer you’re adding this in header.php file.

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

2. Select the CSS elements which need to apply the fonts with 

CSS selector {
  font-family: 'Font Name', serif;
}

Or inline stle with div tag

<div style="font-family: 'Font Name', serif;">Your text</div>

 

A Simple Example

Here’s the way I updated my blog font

Added link code in Modified Header.php 

<link  href="//fonts.googleapis.com/css?family=Nobile:regular,italic,bold,bolditalic" rel="stylesheet" type="text/css" >

Modified the stylesheet.css and select the body with the Nobile font I selected

body {
  font-family: 'Nobile', serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  text-shadow: none;
  text-decoration: none;
  text-transform: none;
  letter-spacing: 0em;
  word-spacing: 0em;
    line-height: 1.4em;
}

How to easily generate the Google Font API stylesheet code?

You can simply generate Google Font API CSS style sheet using Google font preview page. The modified parts will simply highlight in Yellow color and you’ve perfect control over vertical and horizontal spacing decoration etc. I prefer you to use this page to generate flawless CSS code.

image