CSS Experiments – Web Fonts and Embedded Fonts

Posted on by

CSS Experiments

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

40 thoughts on “CSS Experiments – Web Fonts and Embedded Fonts”

  1. Pingback: » Font Test

  2. Pingback: Taking Your Camera on the Road » CSS Unleashed - Experiments Showcasing Your Photography

  3. Your crash course was the only one I found that solved my issue. I speny the last 14 hours trying to embed fonts into a WordPress theme without any luck. Then I found your very good explantaion. THANKS A MILLION!

    VB

    Reply ↓

  4. Vic, glad to help, but remember, embedded web fonts suck. They only work in Microsoft Internet Explorer, and while the stats say that MSIE is still the most used browser, serious, and I mean serious Internet users are now switching to Firefox, and MSIE’s proprietary webfonts won’t work. You have now cut off a huge audience that is growing every day. View this page with Firefox and compare.

    I’m as frustrated as everyone else that web page designers don’t have the freedom of printed designs font choices. Until that is settled, we’re stuck with the fonts most people have installed on their computers or use image replacement techniques.

    Good luck!

    Reply ↓

  5. Pingback: Netlex News » Blog Archive » Embedding fonts

  8. Well, I as well thought it works in Firefox. Turns out, that it was just a similar font already installed on my system. Im using Mac OS X 10.4, Firefox and Safari.

    Sucks. But remember, converting your text into PNG or GIF could help (especially when using a few colors). Alternatively, you could rely on a embedded Flash-Object for your fancy text (Remember that Flash now has a coverage of about 90%, costs nothing for the viewer). Didn’t compare the file sizes yet, though. Further info available here: http://www.flash-mx.com/news/archives/000136.cfm

    Reply ↓

  9. I was seeing the handwritting as well using Firefox 1.5. Then I took a look in my font file (WINDOWS/fonts) and removed (moved to desktop) the Bradley Hand ITC font file and lo and behold, the font changed in my browser.

    *sigh*

    I had thought for a sec that Firefox actually did support it. Oh well, it would take a lot more then this for FF to stop being my default browser.

    Reply ↓

  10. Pingback: Lorelle on WordPress » Using Non-Embedded Decorative Fonts in Firefox

  14. Pingback: Because I Write » Blog Archive » links for 2006-09-22

  15. I am now looking at your site with firefox, and guess what i can see the fonts. I knew about a trick to embed fonts in IE but your method works on firefox to.
    Cool…
    Great job…..

    Reply ↓

  16. This is NOT a technique to embed fonts viewable by Firefox browsers. It is, however, a technique that is on the right track, it just doesn’t work consistently or accurately.

    Firefox looks up the fall back of the “fantasy” font and uses it. It was consistent until I added a few new fonts with a program install recently, and then the fantasy font was replaced with a new handwritten font, not the one shown in the graphic example. So it’s not controllable. Firefox looks for your fantasy font, not the font you intended. I sure wish we had more control over fonts in browsers, but then again, maybe I don’t. ;-)

    Reply ↓

  17. I don’t see what you are getting at. If all you are doing is specifying several fonts with the one you really want first, then common fonts, then generic font last, that is standard practice and explained in the CSS documentation. So, you’ll get the font you really wanted if the user has it, took the trouble to install it, or got it pulled in automatically from a browser-specific feature.

    If that’s the case, what do you mean it doesn’t work in IE?

    As for the " entity, that is simply how you can use double-quotes inside the string that is itself delimited by doublequotes. An easier-to-read alternative is to use single quotes for the enclosing style=’…’ string, or don’t use style= in the first place but use a STYLE section keyed to the element’s ID.

    Reply ↓

  18. Unless the new version of Internet Explorer now does this, when you use “fantasy” as one of the font choices, IE didn’t look for the first fantasy style font and display it. It only displayed known and available fonts. Firefox recognizes font styles and looks for the first available “fantasy” font and uses it when you designate that style.

    Is that what you were asking?

    Reply ↓

  19. Pingback: Jackson Fish Market » A Small Trick(?) for Expanding Your Cross-Platform Web Font Palette

  20. Hi,

    IE7 doesn’t display the trick anymore, how to get the same effect under IE7 ??

    Great job for firefox, I was looking for this for a long time now.

    Thanks

    Reply ↓

  21. From everything I’ve read so far, Microsoft has stopped supporting their WEFT program and IE7 doesn’t handle embedded fonts.

    There are a lot more troublesome problems with IE7, and I’ve yet to be able to install it without it crashing or disrupting Internet access, and I’ve removed it from four different computers as their system locked up or stopped Internet access, too, so I haven’t been able to test it myself. I don’t use IE at all any more unless forced to for testing purposes.

    Reply ↓

  22. Are you sure it works for Firefox 2.0? Both IE 6/7 works fine. BTW, I am using windows XP64 but that shouldn’t make a difference. It should be more standard with 32-bit windows.

    Reply ↓

  23. Pingback: papierlos.net » Blog Archive » links for 2006-09-22

  24. Hey,

    I’m so fed up of all this discussion crap. Why isnt’t there a simple way to embed fonts in websites that works in every f****g browser?

    What do these people coding browsers think??? About little pink flowers??? I don’t f****g wanna use Arial, Times Verdana. It f****g simply doesn’t belong to my customer’s corporate design!!!

    Everybody makes incredible noises and boo-ha-har’s if the type spacing on printed a f****g business card is set to +15 instead of +10 (the setting defined in the according design guidelines)…but on a website visited by tens of thousends of people every day fonts simply are not to matter.

    What is wrong in this world???

    Please, somebody, implement working font embedding to IE*, Firefox* and Opera browsers on all platforms.

    Thank you very much.

    Regards,

    Chris

    Reply ↓

  26. Who is lying? Mozilla is not lying. Firefox does not work with “downloadable font”. That’s the truth. The work with fonts already on your computer, just as IE and other browsers do. IE will recognize specific downloadable fonts, but only when properly formed as described in the article. I do not believe recent versions of IE support downloadable fonts any more.

    If the font is on your computer, the browser will “see” it and make it appear in a web page. If it is not there, it will go to the next equivalent font. That is why it is important to offer several font choices when designing your web pages. If you are reliant upon one, you are at the computer user’s font supply mercy. ;-)

    Reply ↓

  27. Pingback: Profi-Typografie fürs Web? - April, April! » contactsheet.de

  28. Er…I think you’re fundamentally misunderstanding something here. You wrote:

    > when you use “fantasy” as one of the font
    > choices, IE didn’t look for the first fantasy
    > style font and display it. It only displayed
    > known and available fonts. Firefox recognizes
    > font styles

    As far as I am aware, this is not true. What is going on is this. According to CSS and HTML specifications (see http://www.w3.org/TR/REC-CSS2/fonts.html#generic-font-families , for example), Web browsers should recognize five generic font names — serif, sans-serif, monospace, cursive, and fantasy. There is no real specification for what specific fonts these names should map to, although the document cited does encourage reasonable mappings; in fact, many browsers allow user-defined mappings for the generic fonts. (For example, right now “serif” maps to Times for me in Firefox, but I could change that to Georgia — or even Helvetica — if I really wanted to.)

    The last time I used IE regularly — and that was admittedly some time ago — its defaults for “cursive” and “fantasy” were not particularly cursive or fantastic (things like Arial and Futura, IIRC). This is probably still true, whereas Firefox may pick more reasonable defaults.

    So what seems to be happening is that your CSS works in both Firefox and IE. The difference lies completely in the browser’s mappings from the generic families to real fonts, and that’s not under the designer’s control in the slightest.

    In other words: Both Firefox and IE are using their “fantasy” font, but IE’s “fantasy” font is less fantastic than Firefox’s. Look in the Preferences dialog for more info.

    If any of this was unclear, let me know and I’ll explain further. It is often good web-design practice to end CSS font lists with a generic family, for precisely the reasons you’ve discovered.

    BTW, on my Mac with Zapf Chancery installed, your Zapf Chancery paragraph shows up in the correct font in Firefox.

    Reply ↓

  29. I think that there is another cuestion that prevents browsers of supporting downloadables fonts. I believe that it is because of copyrights. It is a very difficult task to develop a font and its not good for developers to deliver their fonts without any control.
    However I think that they should offer any solution because it is a neccessary thing

    Reply ↓

  30. IE7 does work with Embedded fonts.

    I just finalized a successful test of this fact. WEFT is not a robust tool, but with a little playing one can get it to function, and enable what is required for EOT production.

    FireFox Embedded fonts however I have not found info on.

    Reply ↓

  31. Firefox does not work with Embedded Fonts. It’s proprietary with Internet Explorer. What it does do is take the font style and match it with whatever is on your computer which is similar. Use “fantasy” as your font style and it grabs the first fantasy font on your computer. Unfortunately, most designers do not want to leave such font choices up to random chance. ;-)

    Reply ↓

  32. Pingback: PirklePet’s Garden » Playing with fonts…and setting up a new site

  33. This is all very interesting. But I am not interested in a cataloging of the failure to work, I just want one single foolproof way to 1) get the embedded font to work in MSI(Yuck)E today and 2) light a fire under the FF dev team for tomorrow … and not many tomorrows from now.

    And I want to know how to embed it in a WordPress header.

    Reply ↓

  36. Does any one know how to Embed your own Font in Joomla? and which files to modified!

    ** I have modified my default template index.php
    and ** template.css file of the template and they didn’t make it.
    Does any body know what other files to be modified or good resource of font embedding in Joomla?
    Thanks

    Reply ↓

  37. @Ghion:

    No. Joomla isn’t a server, it is a content management program. Font embedding happens on the server and in HTML and CSS, which has nothing to do with Joomla. Either way, font embedding doesn’t work and is not supported by browsers currently. Maybe in the future. So embed away but browsers won’t see it most of the time.

    What is available is font linking, like to Google fonts or others. Follow the instructions for that font service and check with Joomla on how they handle it, but it basically rests in the stylesheet.

    Reply ↓

    • Luckily, it’s your site. You can use whatever font you want. Fonts have nothing to do with WordPress blogs or any other web publishing tool. It has to do with your readers and what they are willing to look at and read.

      Reply ↓

  39. Pingback: Playing With Fonts | Premium Wordpress wooCommerce Plugin Theme

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>