We have already covered how to use custom fonts on your website with CSS; this method lets you use a wide array of fonts even if those fonts are not installed on your visitors machine. But there are a few problems with this method:
- You need to maintain both TTF and EOT versions of the fonts
- You separately need to take care that your font shows up in Internet Explorer.
With a tiny gesture the Google fonts API and Google Fonts factory solves your problem. There is just a single line of code that you have to insert in the head section of your website layout, and you are done.
<link href=’http://fonts.googleapis.com/css?family=Molengo’ rel=’stylesheet’ type=’text/css’>
assuming Molengo is the font you want to use.
Using multiple fonts from the Google Font API
But what if you want to use multiple fonts from the Google fonts factory? You separate each font name with the pipe symbol:
<link href=’http://fonts.googleapis.com/css?family=Molengo|Inconsolata|Old+Standard+TT’ rel=’stylesheet’ type=’text/css’>
As you can see, if there is a space in the name of the font, you fill it up with the plus sign, as it normal happens when you supply parameters through a URL. There is no space between the font names and the pipe symbols.
The ability to use multiple Google fonts doesn’t mean you go on a rampage; the more fonts you connect to, the slower will be the connection. So only use a few fonts.
After you have made a call to the Google Fonts Factory, all you have to do is use the font in the usual manner:
font-family: Molengo, serif;
What’s serif? Since you are connecting to an external fonts repository, it might not work sometimes and there must be a fall-back measure. Including serif means your website or blog can use the default fonts in cast fonts from the Google Font API are unavailable.
Style and font weight of Google Fonts
Although you can easily style fonts and assign weight (like boldface) by using HTML style elements and also CSS, you can also straightaway connect to Google fonts with style and boldface too, in the following manner:
<link href=’http://fonts.googleapis.com/css?family=Molengo:b|Inconsolata:i|Old+Standard+TT’ rel=’stylesheet’ type=’text/css’>
You separate the font name and its style and weight with colon (:) without spaces.
You can either use the style and weight as it is or with their abbreviations:
- bold: b
- italic: i
- bolditalic: bi
Why use Google fonts instead of regular fonts
As mentioned above, you can use some high-quality fonts for free. Then, you don’t separately have to take care of different browsers as Google fonts work on almost all browsers.
Here’s a list of all the fonts currently available in the Google Fonts Factory.