CSS Experiments - Web Fonts and Embedded Fonts
- CSS Unleashed - Experiments with CSS Designs
- CSS Book Recommendations
- CSS Experiments Playing With CSS Blocks
- CSS Experiments with CSS Logo Designs
- CSS Experiments with Background Images and Backgrounds
- CSS Experiments with Lists, Menus, Tables of Content, and More
- CSS Experiments - Web Fonts and Embedded Fonts
- CSS Unleashed - Experiments with Quotations, Pull-quotes and Blockquotes
- CSS Unleashed - Experiments Showcasing Your Photography
- CSS Experiments - Variations on a Theme
- CSS Experiments - How They Were Done and More
- CSS Experiments Putting It All Together
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, you need to understand how standard embedded fonts work in general.
While we don't use embedded fonts within our general documents, yet, the technique is enchanting. We have used it in one of our layout example pages, showing what is possible when you open up to the possibilities. Unfortunately, until recently, you could only view the embedded fonts with Microsoft Internet Explorer.
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 see Courier , 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, only Internet Explorer supports 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, it only works 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.
<!--
@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:
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.
.formal { font-family:"Formal436 BT", "Arial Black", sans-serif}
In the HTML, the reference would be the same as for other classes:
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:
NEW! Creating Fonts for Viewing in Firefox and Other Browsers
Update: I'm still playing with this when I have time, so expect this information to change as I figure out how this works and why.
I'm still experimenting with this technique of adding decorative fonts without embedded fonts which are viewable in Firefox and other non-Internet Explorer browsers. They do not work, however, with Internet Explorer, so this technique still has its limits. I wanted to share this technique with you first. As soon as I find more resources on how this technique works, you'll be the first to know.
This paragraph, if you can read it, hosts a SPAN style that calls out to the Felix Titling font, though it is showing Bradley Hand. It sets a subset fall-back font as the fantasy font, whatever that is.
This paragraph is using a SPAN style for the Zapf Chancery font with a fall-back font set as the cursive font, but on my computer it shows the font as something like Comic Sans.
Here is what it looks like on my computer.
It seems that Firefox is recognizing the fall-back font rather than the specific font. If I remove the font specification, only leaving "fantasy" or "cursive", it still displays a decorative font. Which font it displays on your computer is part of the reason this technique needs more testing. Please let me know what it looks like on your machine in the comments below.
Here is the CSS styles I'm using to create this non-embedded, decorative font effect in HTML:
if you can read it, hosts a SPAN style
that calls out to the Felix Titling font.
It sets a subset fall-back font as the fantasy font,
whatever that is.</span></p>
<p><span style="font-size:1.2em; font-family: "Zapf Chancery", cursive">This paragraph is
using a SPAN style for the Zapf Chancery font with a fall-back
font set as the cursive font, whatever that is.</span></p>
Note that the "quotes" around the font name are in character entity codes. This is how I found this effect. The browser translates these into quote marks, so it recognizes them thus. So far, it works just fine like this. For now, I'm leaving them as I found them until I understand more about how this works.
Try experimenting with different fonts to see if you can get them to change. I did and the fonts do not change on my machine. I did, however, change the Microsoft Embedded Font file for Bradley Hand, and now it appears as the font for what should be Felix Tilting, as shown in the graphic representation. The second paragraph should show the Zapf Chancery font, which should look like celtic calligraphy, but looks more like Comic Sans, but it is a step in an interesting direction. I have a lot more experimenting with this to figure out a consistency in which font shows when and how.
I've checked thoroughly through my computer and I do not have the Felix Titling or Zapf Chancery fonts installed. To check your own computer in Windows, go to the windows/fonts folder and see if either of those two names are listed.
Let me know what your experiments show, and if you find any resources for explaining how and why this works and how to control it.
Embedded Fonts - Links and Resources
- W3.org's CSS-3 Web Fonts
- W3.org's Font Specifications
- Get Any Font You Want - Creating Embedded Fonts
- Microsoft's Web Embedding Font Tool (WEFT)
- Fonts and HTML
- Web Type 101 - A Primer
- Embedded Fonts in MS Word: Keep your Documents Looking Good
- HTMLRef's Downloadable Web Fonts Information
- Microsoft's Core Fonts for Web Software
Authors, photographers, teachers, and public speakers, Lorelle and Brent VanFossen, travel extensively with their camera and pen in hand to bring you a variety of articles on nature and travel photography including basic nature photography and the photography business, writing, travel, recreational vehicles, web page design, and life on the road. All images, design, and content are copyrighted and protected by law.
You can find related articles to this topic in our Web Pages and CSS Tips and Tricks and Photographycategories. The previous post is Winter Whites and Cold Blues and the next post is My Daily Tasks With WordPress. CSS Experiments - Web Fonts and Embedded Fonts, Issue Number 524, by Lorelle VanFossen, was updated June 12th, 2006.
You can follow comments through the RSS 2.0 feed and you can find more feeds on our Feeds List. Your comment is welcome, as are trackbacks from your site.
Article Series - CSS Tips and Tricks
- CSS Tips and Tricks
- CSS Tips and Tricks - Jazzing Up the Content
- CSS Tips and Tricks - CSS Links and Rollovers
- CSS Tips and Tricks - Backgrounds and Transparencies
- CSS Tips and Tricks - Filters and Transforming Text
- CSS Experiments - Web Fonts and Embedded Fonts
Previous: CSS Tips and Tricks - Filters and Transforming Text
Related Articles
- CSS Unleashed - Experiments with CSS Logo Designs
- CSS Unleashed - Variations on a Theme
- CSS Unleashed - Experiments Playing With CSS Blocks
- CSS Experiments - How They Were Done and More
- CSS Unleashed - Experiments with Background Images and Backgrounds
- CSS Unleashed - Experiments Putting It All Together
- CSS Unleashed - Experiments with CSS Designs
- Our CSS Text Designs - Fonts, Text, Links, and Headings
Submit Article: BlinkList | Blogmarks | Digg | Del.icio.us | Ekstreme Socializer | Feedmarker | Furl | Google Bookmarks | ma.gnolia | Netvouz | RawSugar | Reddit | Scuttle | Shadows | Simpy | Spurl | Technorati | Unalog | Wink | Yahoo MyWeb2
February 12, 2006
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
February 12, 2006
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!
March 27, 2006
Seems Firefox 1.0.7 is working just fine with all of your embedded font examples :)
April 3, 2006
Works fine with Firefox 1.5, too.
May 24, 2006
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
June 7, 2006
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.
August 9, 2006
It isn’t working in IE7 beta 3 either now.
September 6, 2006
no working whit firefox 1.5.0.6
September 10, 2006
you are a geniuos.
works fine the Quote trick in OSX with Firefox 1.5.0.6, Safari 2.0.4 Opera 9 and Camino 1.0!!
you are my new idol
November 4, 2006
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…..
November 5, 2006
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. ;-)
November 15, 2006
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.
November 15, 2006
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?
December 12, 2006
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
December 12, 2006
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.
December 14, 2006
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.
February 2, 2007
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
February 14, 2007
http://www.mozilla.org/docs/web-developer/faq.html#downloadablefonts
They are liying
February 15, 2007
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. ;-)
April 6, 2007
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.
April 23, 2007
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
May 11, 2007
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.
May 11, 2007
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. ;-)
February 4, 2008
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.
February 5, 2008
I am using embedded fonts(3D). it works with IE7, but It doesn’t work with IE6.
can you help me.
February 5, 2008
No, I cannot help. Talk to Internet Explorer and Firefox and the W3C and others involved in creating the standards - and keeping them - for web browsers.
May 19, 2008
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
June 20, 2008
@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.
October 24, 2008
@font-face {
font-family: “Webdings”;
src: url(Webdings.ttf);
font-style: normal;
}
I used this in my CSS for an arrow in firefox using a webding font I cnnect the font style to my div tag in CSS
.arrow2 {
font-family: Webdings;
color: #821122;
}
connected to my html page
4HOME
4ABOUT
4CONTACT
it does not work in Firefox?
What am I doing wrong? is this supposed to work in firefox
November 19, 2008
ͤλ֤ᤴǰ줫μĶǤޤ
December 2, 2008
ŻΤȤǴź٥åȤǰ˿ʤɡ˾ä¿褦Ǥޤ
December 7, 2008
ͤʳڤɤ
December 8, 2008
thaks
December 8, 2008
http://www.yixinvalve.com.cn
January 8, 2009
hi
pq8c4m1iv6pplotp
good luck
January 10, 2009
hi
pq8c4m1iv6pplotp
good luck
January 21, 2009
happy new year!
January 21, 2009
thanks.
February 27, 2009
Отличная идея, но надо бы подумать о количестве реламы на сайте. По-моему ее слишком много :) Хотя, конечно - это не мое дело :)
March 19, 2009
asdfaggad
May 2, 2009
Just in case anyone is interested I set up a site showing examples of the different CSS font families Makes it easy to determine what fonts you want to choose Check out the different CSS fonts styles
June 7, 2009
great blog.thanks.recommend to you
August 22, 2009
you are a geniuos.
works fine the Quote trick in OSX with Firefox, Safari, Opera and Camino!!
you are my new idol
October 16, 2009
Very clear and useful explanation. Solve some problems, although I usually try not to get away from standar’s.
December 17, 2009
Сдаем помещение под устройство автомойки, автосервиса, склада, отдельно стоящее здание в нем кафе и магазин, САО 8-905-756-40-37 Надежда
December 24, 2009
Обучение вождению.Автомобиль-Hyundai Accent(МКПП) Уроки вождения в Юго-Западном округе Москвы. Лицензия на обучение. Стаж-33 года. Цена 1000р-90 мин. Анатолий 8-916-832-33-48 с 7.00-22.00
March 2, 2010
Все для лестниц. Бамбук, декоративные решетки, погонажные изделия, доска, брус, фанера, ДСП, OSB, оргалит, МДФ.
Сайт http://lesstroyforum.ru/ Тел.8-903-735-17-74 Владимир
March 16, 2010
Предприятие продает проволоку,ленту нихром Х20Н80,Х20Н30,Х15Н60,GS-40; фехраль Х23Ю5,Еврофехраль GS-23-5,GS SY,GST.Все размеры. НПО РСС(495)926-28-56 Елена, Игорь elena-rcc@mail.ru pirosplav.org.ru
August 30, 2010
KKgXFW http://djb3jDdmjckow30cnjcmd61l0dy.com