WM Web Designs Logo

Website Solutions that Simply Make Sense

External Fonts

Web Typography

When HTML was first created, web fonts were controlled exclusively by settings in the web browser. In 1995, Netscape introduced the tag to add more flexibility and control by the designer. However, the font that was specified had to be installed on the user’s computer, so only a handful of fonts could be used that were considered “safe” (i.e. most commonly installed on all computers).

CSS and Fonts

The addition of CSS improved the font selection process, including being able to specify font families.

A font family is designed to split fonts into categories based on their general appearance, such as serif, sans-serif, monospace, cursive, and fantasy.

A Sans-serif font is Arial
A Serif is Times New Roman
A Monospace font is Courier
A Cursive font is Comic Sans
A Fantasy font is Impact

Font Downloading

Font downloading: embedding a font into your page that you’ve uploaded to your server. Font downloading using CSS gained popularity as well because it opened the door to using many types of fonts that could be accessed remotely. However, this also presented legal issues when licensed fonts were uploaded to websites to be used and could potentially be distributed.

Example CSS:
@charset "utf-8";
@font-face
{ font-family: 'Journal'; src:url('http://your-own.site/fonts/journal/journal.woff') format('woff'), url('http://your-own.site/fonts/journal/journal.svg#Journal') format('svg'), url('http://your-own.site/fonts/journal/journal.ttf') format('truetype'), url('http://your-own.site/fonts/journal/journal.eot'), url('http://your-own.site/fonts/journal/journal.eot?#iefix') format('embedded-opentype');

Web Fonts

A more recent solution to the legal issues and desire for design flexibility came with the introduction of Web fonts. Web fonts are accessible globally by using a link reference in the HTML of the page.

Web fonts can be found for purchase at sites like Typekit.com, or for free at Google Fonts.

How to Use Google Fonts

Go to http://www.google.com/fonts/

Screenshot of Google Fonts

Using the filters on the left side of the screen, choose the type of font you’d like to use.

You can choose the font family category, thickness, slant, width, and script.

The page will refresh with each selection and the narrowed search results will display.

Screenshot of Google Fonts

When you have found the font you like, click the Quick Use link on the right side of the screen.

Screenshot of Google Fonts

Now choose the style and character set you’d like.

Screenshot of Google Fonts

Google provides you with the code to add to the <head> section of your HTML page.

Screenshot of Google Fonts

And the code to add to your CSS.

Screenshot of Google Fonts

Benefits of External Web Fonts

Using a Google Web font can take an HTML page from this:

Screenshot of Catered By Dave Website

To this:

Screenshot of Catered By Dave Website

References

Web Typography on Wikipedia
http://en.wikipedia.org/wiki/Web_typography

A Beginner’s Guide to Using Google Web Fonts
http://designshack.net/articles/css/a-beginners-guide-to-using-google-web-fonts/

Google Fonts
http://www.google.com/fonts/

Catered Your Way website
http://cateredbydave.com/