Update 2006 There is no way currently to embed a font into any web page viewable by Firefox or any browser other than Internet Explorer. The font converter is proprietary to Microsoft.
What I uncovered is actual appropriate default behavior for any browser. If the font declared in a stylesheet is not found within the computer that is viewing the web page, the browser will display the “default font” for the computer’s system. It could be Arial, Times Roman, Courier, or some base font.
If a generic font style is included in the font CSS declaration, the computer will look for the first font that matches that generic font family. In my case, it was a “fantasy” font. It chooses the first one, so the results are unpredictable and inconsistent. A web design is designed around the specific fonts which best match the overall design and layout, as well as the content. An unpredictable font will not work.
Therefore, what appears consistently on your computer will not appear consistently on another computer unless the first fantasy, script, or other generic family of fonts are installed on that machine…everywhere.
Maybe someday we’ll have more control over fonts in web page design, but right now, it’s dependent upon what you have installed on your computer not what the web designer may want or need.
I’m not sure yet what all I’ve stumbled upon, but I’ve found a way of making decorative fonts appear in Mozilla’s Firefox Internet browser. It’s a simple technique but has limits, and it doesn’t work in Internet Explorer. Still, until I learn more, I wanted to give you a heads up. If you know more about how this technique works, and why, please let me know. So far, my research has come up empty.
On my article, CSS Experiments – Web Fonts and Embedded Fonts, I explain web fonts and embedded fonts. I also showcase how this new technique works with Firefox to to display decorative fonts on web pages. I’m very limited as to what I can show here on WordPress.com as it strips out all CSS and fun codes.
Web fonts are fonts which are viewable in most web pages. They are on your computer, installed by your operating system or whatever word processing or art programs you have installed. If your computer recognizes the font, it appears in your web browser. Most web designers understand that not every common font out there is on every machine, so they write their stylesheets with backup fonts, so if one isn’t recognized, there are fall-back options.
The challenge for the web page designer is how to use decorative and more distinctive fonts on web pages without using graphic images. Until recently, there were few options, and those options don’t cross browsers.
One such option is to use embedded fonts, font files which sit on your website and load into the visitor’s computer when they are viewing a page using those fonts. This technique only works in Microsoft Internet Explorer and has many limitations. To see an example of this in action, view this test page using embedded fonts in Internet Explorer. If you want to compare, view the same page in Firefox and see how it looks different. This is an example of what works and what doesn’t across different browsers.
Today, I stumbled across an obscure web page that featured interesting fonts. I don’t even think they knew what they were doing as the page was designed several years ago, before Firefox was even around. It does not use embedded fonts. I did some digging on the page and found they created the page with Microsoft’s Front Page, a do-it-yourself web page software that has been the nightmare of many a web page. This isn’t important, but it’s a clue as to what they did to create this effect. Still, the technique worked when I tested it out in Firefox on a new HTML page with no Front Page codes.
Here is a screenshot of my test page:
I’m very curious as to what this looks like on your computer when you view the CSS embedded fonts article and the this test page using embedded fonts in Firefox and Internet Explorer (not this page – I can only show graphic representations in this blog). The tests with Firefox don’t resemble the specific fonts, and relies heavily on the “cursive” and “fantasy” font styles rather than on the font itself. To learn about how I did this, check out the article on embedded and web fonts on my main site and test this technique out for yourself.
I’m still experimenting with this, so the examples of the article may look different as I poke around with this technique. I have a lot of questions and no answers yet, and little time as I’m still on the road traveling, so I need your help to figure this out. And if we can come up with a way to make this work consistently in both Firefox and Internet Explorer, I’d say we got something exciting here.
- Blog Design: The Nature of Fonts
- Image Replacement Techniques
- CSS Experiments – Web Fonts and Embedded Fonts
Copyright Lorelle VanFossen, member of the 9Rules Network, and author of Blogging Tips, What Bloggers Won't Tell You About Blogging.