Do you like my tutorials?

Then consider supporting me on Ko-fi

Talking about Css and WordPress.

With new webdesign trends, standard fonts such as Arial, Times and Verdana aren’t enough to give our blog/website the loon&feel we want.

That’s why today we’ll discover the magic of Google Font API.

The Google Font API lets you include in your pages high-quality web fonts provided by the Google Font Directory.

This means you can use custom fonts in your design, and they are hosted and served by Google.

That’s nothing new, since services like Typekit are already on the wild for quite a while, and scripts like cufòn already enhance the beauty of most premium templates.

But unlike cufòn, texts rendered with the Google Font API are selectable, and there isn’t any copyright issue, and unlike Typekit, Google Font API is free.

So let me show you the simplest example…

Let’s take the CSS of this blog post titles:

#content h1 {
	font-family: "Times New Roman";   
	font-size:24px;
	font-weight:normal;
	text-align: left;
	margin: 10px 0px 5px 0px;
	color: #181818;
	text-transform:uppercase;
	border-left:15px solid #242424;
	padding-left:10px;
}

and change the first line to

font-family: "Yanone Kaffeesatz", "Times New Roman";

and then just add somewhere between <head> and </head> (normally in the header.php file located in your theme directory)

and… see the difference:

Nice, elegant and without any important downside, if you can bare with a small number of fonts (but don’t forget we are talking about Google, so expect the number to grow fast) and the lack of iPhone/iPad compatibility (hey… shouldn’t CSS heroes design a i/whatever specific layout anyway?)

Never miss an update! Subscribe, and I will bother you by email only when a new game or full source code comes out.