How to add Google Web Fonts using import function

Showing content using stylish fonts makes overall website and blog very attractive. Google Web Fonts provide hassle free and easy way to use different styled fonts on your WordPress blog. One can use these fonts without having to download fonts on either end (WordPress admin or user opening your blog).

You can easily use any available Google Web Font on WordPress powered blog using @import function. First, you need to decide which Google Web font(s) you want to use on your blog. Checkout Google Web Font directory to make up your mind.

1. Now login into your WordPress dashboard and goto Appearance > Editor section. Before you start editing style.css file, you can copy whole content and save it in a notepad file as a backup for restoration (just in case).

2. Following is an example to add ‘Lora’ Google Web Fonts that will be used for post title text (the H1 text on single post page). Add following code at the top above body function in style.css file.

/* Import Fonts
------------------------------------------------------------ */
@import url(http://fonts.googleapis.com/css?family=Lora);

3. Now goto H1 section in style.css file and add ‘Lora’ to font-family element as seen below.

font-family: 'Lora', Georgia, "Times New Roman", Times;

Save changes and now your single post title text (h1) should display in stylish ‘Lora’ font. Similarly, you can import multiple Google Web Fonts and use them to add style different sections like H2 text, post text, comments text and so on.