GoogleFontsI learned something today about how we see fonts on the web. Windows computers have a relatively small set of fonts that come with them as do Macs and these fonts aren’t necessarily the same set of fonts. Since we look at the internet through our computers, the fonts that we have available will render what’s seen on websites. If we don’t have the font residing on our computer, we won’t see what the designer has intended. If that’s the case, then the CSS code has to be in place on the back end to tell the computer the fonts that should be substituted for a similar viewing experience if the font doesn’t exist on the device.

This is done through CSS code within the WordPress site.  for selecting a font, the declaration looks like this:

font-family: HelveticaNeue-Light, ‘Helvetica Neue Light’, ‘Helvetica Neue’, Helvetica, Arial, sans-serif;

Basically, this line of code is saying, “I want the font on the site to be HelveticaNeue-Light, if you have it. If you don’t, then Helvetica Neue, Helvetica and Arial will all give you a similar view of the site. If all else fails, use a sans-serif font and you’ll be close enough.”

Now, there are only about 18 fonts that are considered a standard set available to Windows and comparable substitutes for Macs, but this doesn’t mean that we’re limited to using just these fonts. There are a whole other set of fonts available to us through GoogleFonts, in fact 629 and counting.

By going to their site, GoogleFonts can generate the appropriate code to add to your style sheet and make other fonts available to the viewer regardless of the fonts installed on your machine. The code generated will look something like this:

@import url(http://fonts.googleapis.com/css?family=Inconsolata:400,700); /* Code Font */

When it is declared at the top of the style sheet, it can be used later on and can look something like this:

font-family: ‘Inconsolata’, ‘andale mono’, ‘lucida console’, monospace;

where the new font is being declared for usage in an area of the site.

Pretty cool if you ask me!

Top