How to use Google Web Fonts for your website?

andy - 11 Jul, 2013 3507 Views 0 Comment

You will probably get bored when you view your current website fonts and in your mind you started to think, is there a way to change the default safe fonts used on your current website? Yes luckily, you can now using Google Web Fonts. In this tutorial, we will show you how you can use a Google Web Fonts and embedded to your existing website.

Firstly go to the Google web fonts website:

You will be able to perform a filter or search the google fonts based on name, categories, thickness style or latin (shown in number 1). In addition you can preview how the fonts are going to like in sentences or words (shown in number 2). Once you are happy with the font selection, you can click a link named "Quick Use". Once you click this one, it will display more details about fonts.

In this example, we going to use fonts named "Source Sans Pro". To use this font in your website, you will need to include this font source and place it in the heading tags of your site.

<link href=" Sans Pro" rel="stylesheet" type="text/css"/>

Or alternatively, you can import it to your css file

@import url(;

How to use it?

To use the font, you will just need to specify the font name on your css style. See below example.

    font-family: 'Source Sans Pro', sans-serif;


There are no comments available.

Write Comment
0 characters entered. Maximum characters allowed are 1000 characters.

Related Articles

How to style pagination links with CSS?

Do you need to create a beautiful, simple and elegant pagination links with css? Simply follow our easy and quick tutorial on how to create the pagination links easily with CSS.

Optimizing your site for printing

The easy way to optimize your site for printing is to create a separated external css targeting a media to print only When a printing action is being executed the browser will send over the information from your page to ...