with Lorelle and Brent VanFossen

CSS Experiments – Web Fonts and Embedded Fonts

Playing with fonts is like playing with fire. Sometimes it can light a match on a web page, a sparkler of pretty text. Other times, it can burn down the whole house. Use embedded fonts carefully as not all browsers can see them. To view this paragraph as a handwritten font, try viewing this page in Internet Explorer. Can you see the font that this is written in? Does it look like handwriting? Then you have a browser that can read embedded fonts. Lucky you.

But what about this paragraph? If you are using Mozilla Firefox, or a non-Microsoft Internet Explorer browser, you may be able to see this font, which looks like a form of handwriting. It may look different on your machine.

I will get to how I make this decorative font work in Firefox, but for now, it only works for Internet Explorer. This article is to provide a basic overview of how fonts work then and now.

If you are using a modern browser updated since 2010, the odds are that you can see this Google Font called “Waiting for the Sunrise” which is available for embedding and linking for free.

Fonts have come a long way since the early days of the web when we were restrained to working with 5-12 different fonts. The fonts had to work on every computer in every browser in every corner of the globe.

Today, the possibilities aren’t endless or unlimited, but we now have web fonts that we can use to dress up our web designs with HTML 5 and CSS 3 features and functions.

Still, it’s an intriguing concept, making our fonts look more decorate than plain. Therefore, we’re including instructions on how to create embedded fonts within your web page.

Currently, a font appears within a user’s browser because it is already installed upon their computer. While there are millions of different types of fonts available, most computers have a few core fonts installed by their operating system or browser, or they are installed by other software programs like Adobe Type Manager, Microsoft Plus, WordPerfect, Microsoft Office, and others. We have listed the most popular fonts below and included links to sites which keep score cards of the most popular fonts in use on the web. If you see the font characterics, you have this font installed upon your computer. If you don’t see Courier font here, that old typewriter looking font, you don’t have this font installed. Many of these fonts can be downloaded for free off the Internet. Helvetica, one of the most popular, is a commercial font.

Serif Fonts

  • Times New Roman
  • Courier New
  • Geneva
  • Georgia
  • Bookman Old Style
  • Book Antiqua
  • Haettenschweiler
  • Garamond

Sans-Serif Fonts

  • Helvetica
  • Arial
  • Arial Black
  • Verdana
  • Tahoma
  • Century Gothic
  • Lucida Console
  • Lucida Sans Unicode
  • Trebuchet MS
  • Arial Narrow
  • Comic Sans MS
  • Impact
  • Felix Titling

As you can see from the list, there is little variety among the spices. We are basically stuck with variations on Helvetica or Arial for sans-serif fonts and Times Roman for serif fonts. Georgia is a font on the rise and a definite improvement over Times Roman, but still is another version of Times Roman.

If you want to break through the web font limits, you can. Unfortunately, while the specifications for embedded fonts in web pages has been under development in CSS 3 for a long time, until only recently only Internet Explorer supported this technique.

Using a process known as embedding fonts, you can link a font to a web page document. When the user accesses the page, the font file is downloaded temporarily onto their computer along with the content and images of the page – just another file. Wherever the font is specified within the document through the CSS style sheet to appear, it will.

Now, before you go crazy with the possibilities, remember, these types of embedded fonts only work with Microsoft’s Internet Explorer.

If the font doesn’t load or isn’t recognized, be sure and list a generic font as a fall back. It also has some other drawbacks. For instance, if you can see the Brush font in the above paragraph, then the embedded font is working in your browser. If you can’t…that’s one of the drawbacks. Let’s look at the specifics.

  • Many fonts are copyright protected, therefore the font must be authorized for use on a web page. Many font designers don’t want their font designs used just anywhere, but some do. If in doubt, make sure you get permission from the font designer, if possible, before using.
  • Special software is required to create the embedded font file. While it should be as easy as putting a font file on your site and linking to it, it isn’t. Microsoft offers a free web font embedding software tool called WEFT – Web Embedding Font Tool that attaches your name, company, email address, and Website address to the embedded web font code information for the protection of the font designer’s copyright. Other programs can be found within our link resources below.
  • During the creation of the embedded web font, the path of the font and/or the pages or folders which will use the font must be included. The easiest way to include the path is to set it for the root directory of your Website, such as http://www.cameraontheroad.com/ and then all folders underneath that will be able to access the font. If you only set the path permission to /learn/web/ then you can’t access the font from a page in /learn/travel/.
  • If you are into serious optimization of your web page for fast loading, embedded font files add to the total file size of your document. It must load into the user’s machine along with the rest of the content and graphics.

When you have created your first couple of embedded font files and uploaded them to the appropriate folder on your Website host server, you are ready to start the process.

Begin by uninstalling the font you just created from your system. This way, when you are testing the page, you will see the font if the embedded font codes are working. If you don’t see the font and you see its generic equivalent, the process isn’t working. You want to make sure the font loads when you view the page. You can reinstall it later.

Then edit your CSS style sheet to include the following, with your font name and file name and location specifics. This is an example of one of our embedded fonts.

/* Embedded Fonts */
<!–
@font-face {

font-family: Bradley Hand ITC;
font-style:normal;
font-weight: 700;
src: URL(../../BRADLEY0.eot);
}

@font-face {

font-family: Formal436 BT;
font-style:normal;
font-weight: normal;
src: URL(../../FORMALB0.eot);
}

–>

Using the CSS @import, the font is “loaded” with the style sheet. Notice the comment codes around the embed font statements. This helps any browser that doesn’t recognize the @import rule to ignore it. The URL reference to the font should be from the location of the style sheet and not the page itself.

To set these fonts to be used within a specific class or division, there are two ways. One method is to set it normally through a tag rule such as:

h1 {
font-family:"Bradley Hand ITC", "Comic Sans MS", sans-serif; font-size:120%; font-weight:bold; color:blue}

Another method is to give the font a class statement so you can use the font on a specific tag or division. Remember to add alternative fonts in case the technique doesn’t work with the browser.

.bradley {
font-family:"Bradley Hand ITC", "Comic Sans MS", Arial, Helvetica, sans-serif}

.formal {
font-family:"Formal436 BT", "Arial Black", sans-serif}

In the HTML, the reference would be the same as for other classes:

<div class="bradley">This would be Bradley Hand ITC font.</div>

This would be Bradley Hand ITC font.

If you can’t see the above in a handwritten style font, you might see it in Comic Sans or a sans-serif generic font. Try F5 to reload the page. If it still doesn’t look like handwriting, this technique doesn’t work with your browser. Here is a graphic of what the font should look like:

Graphic Example of the Bradley Font

CSS3 and Web Fonts

With the development and embrace of CSS3, web fonts are now popping up all over the web. These work similar to the Internet Explorer embedded fonts but now cross browsers. They can be downloaded and installed on your server or linked to directly from the source. Expect font creators and innovators to start offering a wide range of affordable or free fonts to keep up with the demand over the next few years.

To use web fonts, you can either download and install the font file on your server or link to it from within your web page’s head section for use in CSS anywhere on your site.

This is a Google Font called “Wallpoet,” a stencil computer style font.

Google Web Fonts offer a free method for designers to embed or link to free fonts hosted and provided by Google. This is “Over the Rainbow,” a handwritting font.

In the head of the HTML web page structure, a link to the font on Google is added. This allows the font to work anywhere within the site’s design with some simple CSS references. An alternative is to download the font or to use the @import CSS function to import the font to the stylesheet.

&lt;link href='http://fonts.googleapis.com/css?family=Over+the+Rainbow' rel='stylesheet' type='text/css'&gt;

or in the stylesheet:

@import url(http://fonts.googleapis.com/css?family=Over+the+Rainbow);

and within the design:

h1 { font-family: 'Over the Rainbow', arial, serif; }

There are hundreds of web fonts now available. I’ve included links to articles and lists below.

Embedded Fonts – Links and Resources

30 Comments

  • WordPress › Error

    There has been a critical error on this website.

    Learn more about troubleshooting WordPress.