Just another Font

Individuality with Google Web FontsMany web sites use the standard selection of fonts to display headers and body text, fonts that are sure to be displayed just like they’re supposed to and that are almost certain to be available on the visitors PC or Mac. But what is when you, or your client, really want something a little different? Not so long ago jumped Google once again to the rescue in the form of Google Web Fonts. A really super way to give your web site text a little bit something more special.

What’s the advantage?

The font that is declared in your CSS is dependent on the locally installed fonts of whoever is visiting your web site, therefore, although you can declare the font in your CSS, and you can see it, this doesn’t mean that visitors to your site are going to see it too because to do this they need to have the same fonts installed locally on their own PC or Mac. When this is the case, then the text will be defaulted either to default fonts or to a fall back font choice that you specified in your CSS. The advantage of Google Web Fonts is that the font files are hosted online, and therefore available to everyone who visits your site, without the need for local installation. You can see this working already on this web site, we’re using here “Philospher”.

One more good thing about Google fonts is that they are all ok to use, Google promise that “All of the fonts are Open Source” (although it’s still a good idea to “read the label” first), without being worried about copyright issues and the like, that’s already taking care of by Google. So why wait…

How to get your Google Web Fonts in your web site

Declaring and integrating Google Web Fonts into your site is very easy, and sorted out with either a direct link in the <head> section of your HTML file or template or by using just a small snippet of CSS code that declares an @import URL:

HTML <head>:

<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Sail" />

CSS file:

@import url(https://fonts.googleapis.com/css?family=Sail);

Important to remember:
1. The @import rule must be declared before any other rules, except the @charset rule, which means it needs to go at the top of your style sheet, if you declare it after any other rules then chances are it may not work.
2. If the name of the font contains spaces these need to be replaced with the “+” character, e.g. Pontano Sans should be requested with „Pontano+Sans“.

Once linked in you only need to assign the font name, wrapped in single or double quotes, to elements, classes or ids:

Either in the <head> wrapped in the <style> tag:

<style> body { font-family: 'Sail', serif; } </style>

or in your style sheet:

body { font-family: 'Sail', sans-serif; }

or even inline if you need it:

<p style="font-family: 'Sail'"></p>

Host the fonts on your own server

If you prefer to host the fonts yourself, Google offers also the opportunity for you to download fonts so that you can use them for testing in your local environment or / and even upload them to your own server for use on your web site. Just adjust the link to your new destination folder URL.

What if you want to use more than one font-family?

Using more than one font-family is also possible. Just add it to your declaration. To do you could add each font individually:

HTML <head>:

<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Sail" />
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Pontano+Sans" />

CSS File:

@import url(https://fonts.googleapis.com/css?family=Sail);
@import url(https://fonts.googleapis.com/css?family=Pontano+Sans);

or, a more efficient way is to merge multiple links or @import declarations. Multiple fonts can be merged using a single request and the pipe “|” character (without empty space):

HTML <head>:

<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Sail|Pontano+Sans" />

CSS File:

@import url(https://fonts.googleapis.com/css?family=Sail|Pontano Sans);

Requesting Styles and Weights for Web Fonts

Styles and weights of fonts, like “italic” or “bold”, can also be requested. These need to be placed after the font name:

  • First declare the name
  • Add a colon ”:”
  • Add the style or weight, e.g bold
  • Separate multiple styles/weights with a comma

For example:

<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Sail:bold,italic" />

Or for multiple fonts, still using the pipe separator “|”:

<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Sail:bold,italic|Pontano+Sans:bolditalic" />

At the moment there are over 500 different font families to choose from, maybe just the one you were looking for. ;)

Go to Google Web Font Directory »
Find out more about declaring subsets, styles and weights over at the developers section at Google »

Interesting Sponsors and Related Topics

If you liked this, maybe you'll like this too: