Even More Fonts For Blogger With Google Web Fonts

A properly designed blog followed by a meaningful content grabs attention of every reader and therefore every blogger tries to design his post in an impressive way. The blogger template designer provides you the facility of enhancing design of your blogs with stylish fonts. This section of blogger is supported by Google Web Fonts and offers wide range of font styles to meet requirement of different types of blog.  However if you do not find any font suitable according to requirement of your blog you need not have to lose your heart because Google provides you more than 500 fonts free of cost for you to utilize. These fonts can be used according to requirement of your blogger template by integrating few codes in your template. In the paragraphs discussed below we shall be discussing the method of using Google Web Font in blogger template.

Choose your Fonts:

Click on Google Web Fonts and have through the wide range of available fonts. Select the fonts which you want to use in your “Collection” these fonts will be displayed in the bar displayed at the bottom of page in picture shown below:



Once you have made selection of fonts which you wish to use, click on the Use option as shown in the toolbar of collection. There will be some fonts of different styles, therefore in the above shown picture you have the option of selecting style for each font which you want to use. You also have the option of de-selecting the fonts from your collection which you do not find suitable for your use.


Add CSS Link to your Blogger Template:

In the second step you will be required to integrate a link to dynamic CSS file which will be used for importing selection of fonts made from Google Web Font for using in your blogger template. Now on the Google Web Fonts page move to the third section which embeds the code which you have to paste on your site.

Now you have to paste this code into text file or copy it on your clipboard.

Now open new tab of your browser login to blogger dashboard and go for Template > Edit HTML and look for opening <b:skin> tag. Just above this <b:skin> paste the code which you have copied from Google Web Fonts page. You will have to “close” the CSS link tag followed by a slash or you will receive a message indicating an occurrence of error whenever you go for saving changes or try to preview. This can be understood from the example explained below where an original code is created for the web fonts.

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

The same code is displayed below followed by a slash

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

Now save the template.

Specify the web fonts in your CSS: 

In this final step you have to determine the place of font where you want them to appear. This could be done by adding CSS to your template. Now scroll down to the bottom of page on Google Web Fonts to confirm how these fonts are referred in your template and copy the code of fonts for different fonts chosen by you. This code you have to paste into your CSS, after you have decided the specific page of your design (for instance blog title, gadget headings, and body text). The suggested option to do this to add CSS code in the advanced section of Blogger Template Designer. 

This you can understand from following examples.

For using Fredoka One in the blog title you can add following code:

.header h1 {font-family: 'Fredoka One', cursive;}

For using Codystar in the main body text the following code will be required:

.post-body {font-family: 'Codystar', cursive;}

While you will paste your CSS code by making use of Template Designer you will notice how the selected fonts are working for deciding design before showing you the preview of the changes and saving them. Moreover you still have the option of changing the font size by making use of other sections of Template Designer widget.

In case of any query please do feel free to revert me.

No comments:

Post a Comment

Man Behind Ribbun Software

vikas Singal Vikas Singal is a professional Internet marketer from Jaipur, India.

Apart from Blogging , he is a fun loving person. His areas of Interest are php, wordpress and joomla.

At Ribbun-Software he Writes about Blogging, Wordpress, Technology, Making Money online.

You can read more about him at About me page.


My Tweeter Updates

    Follow me @ribbuntweeting

    Also Check