Skip navigation

Using Non-Embedded Decorative Fonts in Firefox

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.

Example of embedded fonts on a web page design, viewable only with Internet ExplorerOn 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 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:

Using non-embedded decorative fonts in Firefox example

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.

Related Articles

Member of the 9Rules Blogging Network


Site Search Tags: , , , ,
Feed on Lorelle on WordPress Subscribe Feedburner iconVia Feedburner Subscribe by Email

Copyright Lorelle VanFossen, member of the 9Rules Network, and author of Blogging Tips, What Bloggers Won't Tell You About Blogging.

11 Comments

  1. Posted June 12, 2006 at 8:59 am | Permalink

    The fonts you refer to look the same in both browsers to me. This is the first time I’ve looked at your blog in IE, and the overall is cleaner and smaller, than in FF. The pause/play icon is a bit different too, with a gray background. (In FF it’s just white and maroon.) Now I want to look at all my fave blogs in IE and see how they look.

  2. Posted June 12, 2006 at 9:28 am | Permalink

    Crap! Thanks, Flood. I uploaded the png file and not the gif when adding the play/pause button to my quotes. IE and Firefox handle PNG transparency differently and I forgot. I’ll fix these soon. Thanks for catching that.

    As for the rest of the Theme, I sure wish I had control over minutia in all WordPress.com Themes. ARGH! I HATE the red border around linked images in the content and black border around linked images in the sidebar, one of the FIRST things I’d change on this otherwise clean and lovely Themes.

    You say the fonts look the same in both browsers? Both like Arial or something plain or decorative?

  3. Posted June 12, 2006 at 2:43 pm | Permalink

    The fonts in your examples look the same in both browsers. The one with green background is a handwritten type font. In the Graphic Rep, the first is another style of handwriting (a bit more manly) and below it kinda looks like a comic sans font.

    I know what you mean about playing around with the minutiae of the html in WP. Secret: I am trying to transfer my Blogger account here because Blogger has been crazy with the outages this past week. I’ll miss being able to customize my template, but the benefits of WP should outweight that. (If I can ever import the second blog)

  4. Posted June 12, 2006 at 10:54 pm | Permalink

    Flood, I am such a fan and I would love you to become a part of the WordPress.com Community, though I know nuthink nuthink! ;-) Let me know how I can help you “not” become one of us. hee hee.

    This font thing is really making me crazy and I want to spend more time playing with it to see if this is a fluke or if we can finally use decorative fonts in Firefox.

  5. Posted June 13, 2006 at 9:36 am | Permalink

    Thanks, Lorelle! Right now I am waiting on some help from forums, to import another blog. One made it in unscathed and another is just being difficult.

    I love WP for a lot of reasons, the widgets are easier to manage than sidebar fiddling in html, the pages are a great feature and the ability to add a static page (if one wanted) all make for a professional look to a blog. Choosing to buy a domain and having WP would make life a lot easier. I wish I had more control over the header (for instance), but like Firefox, if we’re patient, everything will come in time, right?

    My biggest problem is going to be convincing people it will be worth changing their links to me. Wish me luck!

  6. Posted June 13, 2006 at 11:31 am | Permalink

    Oh, flood, don’t worry. They’ll follow!

  7. Posted October 4, 2006 at 2:08 pm | Permalink

    I’m not sure if this is what you meant, Flood, but I bought my own domain and installed WordPress and I have complete control over the header (www.darylsbrain.com). Of course, I haven’t changed it all that much because I choose one I liked, but I did change the top links and how the text on the banner displayed. I also didn’t want one of the side boxes (the list of pages…I am going to handle them a bit differently) so I just commented it out in the code and it all worked fine.

    But maybe this was what you are talking about.

  8. Posted July 12, 2007 at 8:34 pm | Permalink

    Hi,

    First time ever reading this blog but it looks interesting :-)

    For the last few hours I have been trying to work on embedding fonts in Firefox. I still havent found a solution yet.

    When I viewed your demo page in IE it had your .eot font files loading and it looked correct ~ very nice fonts used.

    In Firefox however it did not display the .eot font files, just your standard Arial, Comic Sans et al.

  9. Posted July 12, 2007 at 9:26 pm | Permalink

    For your protect your email was removed. I do not permit commenters to expose their privacy by sharing emails on my blog. Your email should be in the form and it is never published.

    I thought I’d updated this post, but I do know that I did on cameraontheroad.com. 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 you are experiencing is Firefox using the “style” of font not the specific font. The style of the font is the generic version of the font, such as Arial is sans-serif and Times Roman is serif. This is a trick with the fantasy versions of a font. If you use the fantasy, script, or other generic font in addition to a specific font, if the user has that font on their computer, then the font may show, otherwise, Firefox uses the first fantasy, or otherwise generic style, and displays that.

    It makes for an inconsistent and unpredictable result. Best not done.

    Thanks for reminding me to update this post.

  10. Paul
    Posted September 28, 2007 at 1:26 pm | Permalink

    So what happened to cameraontheroad.com? It’s just an ad now.

  11. Posted September 28, 2007 at 1:57 pm | Permalink

    I’m having a fight with my soon-to-be former host and this is their punishment. It will be back and active within the next day, if I have any power left in my body. Stay tuned.


One Trackback/Pingback

  1. [...] Lorelle on WordPress [...]

Post a Comment

Follow

Get every new post delivered to your Inbox.

Join 20,573 other followers

%d bloggers like this: