Web Fonts

Newer browsers and CSS3 lift some of the restrictions on the use of fonts on Web pages.

It is now possible to upload fonts to your server and then reference them in your Web pages. Alternatively, you can refer to existing font collections on other servers such as Google.

The advantage of using Web font embedding over the old Photoshop graphic approach text is that with embedded fonts, the text is able to be copied and pasted, searched, and can be read by search engines indexing your site.

Method 1 - Placing Fonts on Your Server

For this to work with all browsers, both .ttf (TrueType) and .eot (OpenType) fonts must be uploaded.

font-family: baumans;
src: url('http://re-vision.com/webwork/p51.5web-fonts/baumans/baumans-regular-webfont.ttf'), /* Everybody except IE */
url('http://re-vision.com/webwork/p51.5web-fonts/baumans/baumans-regular-webfont.eot'); /* IE9+ */
font-family: heavy-data;
src: url('http://re-vision.com/webwork/p51.5web-fonts/heavy-data/heavy-data-webfont.ttf'), /* Everybody except IE */
url('http://re-vision.com/webwork/p51.5web-fonts/heavy-data/heavy-data-webfont.eot'); /* IE9+ */

<div style="font: 42px/42px baumans, sans-serif; ">This is Baumans font.</div>
<div style="font: 42px/42px heavy-data, sans-serif; ">This is Heavy Data font.</div>
Web page:
This is Baumans font.
This is Heavy Data font.

Font Squirrel is one of many sites that allow you to convert .ttf fonts to .eot for this purpose.

Method 2 - Using Fonts on Someone Else's Server

Google and Adobe provide Web fonts that you can use in your pages without having to upload copies of the font to your server. This saves space on your server and reduces the amount of work you have to do but it means that you have to rely on Google or Adobe to continue to provide the service for as long as you want to continue using the font.

<style type="text/css" media="screen">
font-family: 'Offside', cursive;
font-size: 36px;
text-shadow: 4px 4px 4px #bbb;
font-family: 'Sarina', cursive; color: #568;
font-size: 32px;
text-shadow: 4px 4px 4px #bbb;


<div class="offside">This Google font is called Offside.</div>
<div class="sarina">This Google font is called Sarina.</div>
Web page:
This Google font is called Offside.
This Google font is called Sarina.
< Previous     Webwork Table of Contents     Next >

Simple Truths (and Complex Lies)

The Built World
Semblance Portrait Project
Back to Square One
Changing Chicago
Chicago's Reliance Building
Along the Mississippi River
The Work of Antoni Gaudí

Morocco 2023
Beecher, Illinois
Iceland 2017
Cuba 2015
Providence, Rhode Island
Greece 2013
Eastern Europe 2013
Israel 2010
Paris, France
Puebla, Mexico 2009
Puerto Rico 2009
Barcelona 2007
Rome, Italy 2006

Graphics, sounds, and other ancient
items from the dawn of the Web.


Jay Boersma