Paul Irish

I like the solution and thanks for test cases.
The only problem I can spot is that IE will never use the local font even if it is present, will it?
Being fonts something totally re-usable I'd love to find a perfect way to split the specific file inclusion for IE and not IE browsers, without usage of ugly un-masked conditional comments.

Paul (and Andrea) … Thanks! I've tested your assertions, the code and even played a tad with IE grabbing a local copy.

Paul set me to tinkering

This is great. @font-face never made so much sense until now :)

Wow, I haven't even thought that IE could download both font files.
This is great solution and now we really have to let people know about it.
Thanks Paul.

LOL @ thorough, 'twas more a "stream of consciousness" thing, but thanks!

I've updated the cross-browser font embedding tutorial, crediting you and Andrea for your contributions.

Thanks for sharing Hopefully, we'll get the word out, before everyone is running around posting two @font-face selectors!

Great work, good to see smarter solutions popup now that a large majority of the browsers support @font-face.

Paul,
In my tests, Opera isn't accepting your syntax.
So far, OK with Safari, FF3.5. But Opera is bombing out.
Have you tested with it, as yet? Maybe I'm missing something.

Seems that Opera doesn't support "local". Once again, unless I'm missing something.

Could we simply use filters?

@font-face{
*font-family:'Graublau Web'; /* here you go, IE 6 and 7 */
*src: url('GraublauWeb.eot'); /* here you go, IE 6 and 7 */
font-family:'Graublau Web'; /* everyone else take this */
src: url('GraublauWeb.otf'); /* everyone else take this */
}
Sorta' di(e)rty, but it ought to work.

So far this is the most "Bulletproof" for me.

@font-face {
	font-family: 'Graublau Web';
	src: url(GraublauWeb.eot);
	src: url(GraublauWeb.otf) format("opentype");
	font-style: normal;
	font-weight: normal;
	@-moz-document url-prefix()
	{
		src: local('Graublau Web Regular'), url(GraublauWeb.otf) format("opentype");
		font-variant: normal;		
	}
}

This way at least FF can enjoy the benefits of "local" without breaking Opera and Safari doesn't break when using "font-variant". But I'm looking forward to seeing better solutions.

The shame is that, even with this is a new keyword, we are already making hacks

@eduardo
Hacks are price we pay for freedom from reliance on a single vendor.

@paul
Re: Opera. Yes, I WAS missing something. local() works OK in Opera. But Opera will not accept a call to an EOT file. Opera's Dragonfly debugger explains it as an "invalid src property". Further, unlike the other browsers, Opera doesn't just ignore the rule and move on to the next. It throws out the whole @font-face rule that contains the call to the EOT.
This is quite deliberate. I believe the standards compliant thing to do would be to ignore the rule and attempt to parse the next.
Seems like somebody just doesn't like Microsoft. ;)
Regards, Rich

Did anyone figure out a way yet to use eot files with font-style? As far as I know it shouldn't work in IE by just including the property. But maybe there is a hack to get around this.

After your email, I created some testcases at
http://dl.getdropbox.com/u/2042542/font-face.html using your original bulletproof syntax and adding font declarations. It seems as if IE and Safari can't deal with font-variant.

Maybe it's just me, but Firefox 3.5.3 won't render the correct font if a) the custom font is not installed on the local computer and b) the format is defined like so:

…url('/media/font.ttf') format('opentype');

Only this will work:

…url('/media/font.ttf');

About your Safari permission error, it deoesn’t seems to be a Safari issue but instead a Linotype Font Explorer one.
There is a preference controlling the font requests.
At least that’s what I’ve experienced and solved (You just need to set up Safari to ignore the font requests :-)

I’ve got a test page at http://www.thyb.net/cosmos/index-fonts.html and I’m still fighting between postscript names from Safari and full font names in Firefox, the font-variant and the slow loading time.

So I hope I’ll be able to use corectly @font-face now with your great article.

Thanks again.

First a disclaimer: I haven't tried @font-face yet. My immediate reaction after reading this article is that a conditional IE-only stylesheet is actually the "best" way to handle this - it's widely recognised that all other solutions to make IE use different CSS to the other browsers are essentially hacks, which could possibly break in a year or two when new browsers are launched, or existing browsers are updated, wheras making use conditional comments are supported. Personally I prefer to have all my IE workarounds hidden away in a seperate stylesheet rather than polluting the global styles :)

Now to fix the caching issue.

It takes about 2-4 seconds to see the @fontface font replace the standard html font.

Ideas?

Also, what if you're using a font that's probably not licensed for web use? Not sure if it really protects me but I change the name of the font file so it's not so apparent. Kind of hard then to declare the local version right?

@Paul Irish
Hmm. I was just looking into it. I may be able to set the mod_expires or set caching in the htaccess. I'm not really a "server" guy but it looks easy enough. I'll probably give it a try soon.

hi great post but i could use a little more information. does this functionality only work in IE 8 or latest fire fox? what about previous versions? sorry i havent done my research and just came across this! nice one for the info.

Hi Paul,

I have a site that originally used Cufon for font replacement: http://blog.franklyrealty.com/

All was well and good until the WP 2.8 upgrade. Then Cufon worked on main post page, but not others. I've decided to simply use @font-face b/c ultimately, it's faster and cleaner. BUT…I cannot get it to work in IE or Chrome…and I've followed all the .eot info, etc.

What am I doing wrong?

Thanks for your help!

Hi,

Many thanks for your article, when i tired the sample code of yours with the corresponding font files its worked well in local system. when tried to use my fonts ( i used the thesansplain-black etc… ) its not even working in firefox. what will be the problem here ?

Hi Paul,

Thanks for share all this precious information with the rest of us. It has been most helpful.
Unfortunately, I have been incapable of debugging a weird problem on Safari. On my web site http://www.workingbruno.com, if the page isn´t on cache, you will *not* see the declared font-face, but an alternate rule provided by Modernizr a small javascript library that you surely know… I´m quite lost on this one… don´t know if it´s a browser bug, a Modernizr problem or simply my mistake.

Have you any insight on this?
Thanks for your time.

Best,
B.

There is one thing I am not clear about. I have a font in four different variations, say
- font-regular.otf
- font-italic.otf
- font-italic.otf
- font-bolditalic.otf
plus their .eot equivalents.
The style sheet would then look about like this

@font-face {
  font-family: 'The Font';
  src: url(font-regular.eot);
  src: local('font-regular.otf'), local('The Font'),
  url(font-regular.otf) format('opentype');
}

@font-face {
  font-family: 'The Font';
  src: url(font-bold.eot);
  src: local('font-bold.otf'), local('The Font'),
  url(font-bold.otf) format('opentype');
  font-weight: bold
}

and so on.
When I do this, only the last rule is taken in account. What would be the right way to do this?

Thank you for your time

Dieter

Is there any way to use @font-face in a Blogger blog?

just wanna say that chrome 0.3 support svg font

it seems otf are not working on opera 10
only ttf - am i right?

I created a web page, and I want to use the French Script MT font. Can you help me to use the @ font-face (how to write the code)for the French Script MT font?

Here's to confused and lazy!

I think I've found a way round the problem of IE downloading the font, even when it's already present on the system.

I'm working on a site for a client right now and am using a fairly widely available font (Arial Narrow). However, some older systems don't have it - my Win2K test system, for example. I therefore didn't want every Internet Explorer user to have to download the font just on the offchance they didn't have it already.

The solution I ended up using was a mix of Javascript and the CSS rules already described. First, I made a regular CSS file, with the following:

font-family: "Arial Narrow", "ArialWeb", Arial, Helvetica, sans-serif;

Next up, I made an additional file called webfont.css, and put in it:

@font-face {
  font-family: 'ArialWeb';
  src: url('arialnarrow.eot');
  src: local('Arial Narrow'), local('Arial Narrow Regular'), url('arialnarrow.ttf') format('opentype');
}

Step three: I grabbed the fantastic JavaScript font detector, available here:
http://www.lalit.org/lab/javascript-css-font-detect

Step four, I wrote a little JS to get called when the page is ready:

var font = new Detector();
if(font.test('Arial Narrow') == false) {
	var cssload = document.createElement("link")
	cssload.href = "http://mysite.com/webfont.css"; // This may not need to be absolute path, I just made it one 'cos it was easier
	cssload.rel = "stylesheet";
	cssload.type = "text/css";
	document.body.appendChild(cssload);
}

…and that's it! If the font is already on the user's machine, it'll display because it's been declared in the regular CSS file. If it's not, then the JavaScript will include the web font (for IE or other browsers), and the second font declared in the regular CSS file - our web one - will then get used.

The only problem is that there's a brief flicker of the old font before the new one appears, as it's being loaded at the end of the document. Any suggestions much appreciated!

I do not seem to get it working with the latest build of chrome. Site works fine with IE and Firefox on several test machines. Anybody has the same problem?

thanks for the code guys. please can the various vendors now play nicely on some kind of a standard, or at least support multiple formats. i use sifr quite often and it just feels like a slow hack to me. i'd like to see embedded fonts getting traction.

my main issue aside from the code is the legality around font licensing. let's face it, no open source fonts really compete with the diversity of the established foundries.

found a helpful online facility to generate woff, eot and svg versions if anybody needs a pretty frontend that does it all.

btw, paul, checked out aurgasm. what a rad site - keep up the passionate work.
http://www.fontsquirrel.com/fontface/generator

@Diederik
chrome & iphone = svg
ie = eot
ff = woff

@murraybiscuit
sorry, just saw the font-squirrel link. scratch that.

font-family: helvetica,arial; /* ftw */

@Paul Irish

When using multiple styles and weights, it's worth including font-style:italic; and/or font-weight:bold; in the @font-face declarations for bold and/or italic fonts, even when assigning each file to its own font-family. Without this, using CSS to assign italics or bold will result in Firefox 3.5 to make an italic face oblique (yay, slanty italics) and to make a bold face extra bold.

(Of course, if you don't want to bother providing bold and/or italicized text to browsers that don't support @font-face, then resetting everything to normal weight and style will have the same effect.)

The permissions error will also show up in Firefox for Mac if you've got a font on a separate partition, in my case, for Boot Camp.

Very useful….nice & clear thanks

Nice article. Shame there's no decent support for converting fonts for IE on Mac yet. Not that I can find anyway.

Fontforge http://fontforge.sourceforge.net/ is available for Mac as well as for Windows and Linux. The interface is pants and it requires X11 but it has a lot of functionality.

@Paul Irish
For what it's worth, it appears that Opera 10.10 doesn't have problems with font-style or font-weight.

@Paul Irish
That's a good shout. I didn't want it slow the page loading, but then I guess it makes more sense for it to take a second longer to load the page in the first place than to do the nasty flash! Liking the approach to calling the font-face file as well; anything that cuts down on server requests is always to be supported!

Thanks! I was looking to for a tutorial for embedding fonts!

i am using the same technique for “myriad pro” but not coming in any browser. I have already uploaded eot & ttf files on the server and calling them…..please help

Am I just imagining this somehow? All of my tests have confirmed it but none of you bloggers have mentioned it..

If the name specified in font-family:'name'; is not the real name of the font then IE won't use the font when you assign that font in a style rule. At the very least, this makes the character limit a potential problem. It also means that FF will use their local font if it exists, even if you don't specify any local sources, because if the font-family: = "the real name of the font", and that font is installed on the system, then FF will use the local font.

Am I missing something here? Can anyone else either confirm this (so I know I am not just losing my mind) or prove it wrong (and wake me up from this strange dream).

I also can not understand why any of you would want to use local fonts at all. Haven't you ever encountered messed up fonts installed on people's computers? They are not actually all that uncommon. And with @font-face inspiring many inexperienced people to start doing their own font conversions, the number of messed up fonts in the wild is only going to increase.

I checked on some of the browser screen capture services and found a good number of their systems to have faulty fonts installed. Most of the screens looked perfect but in some cases my font was clearly being used but it had a different Q and K. On a different test with a different font a few of the test systems showed bold instead of regular (not a browser rendering difference, clearly the bold version of the font), and I had only defined one font and not defined any styles. The only place the bold version could have come from is their systems.

I have seen such messed up fonts many times while working on other people's computers and always wondered where they came from. Using the Font-Squirrel converter to convert fonts, often produces such fonts where the italic version is named "regular" and the bold version is named "italic" or other such funky naming issues. A good number of their pre-packaged @Font-face kits also have such issues. I have also run into similar naming issues using other font conversion utilities.

This is not so much an issue for me at the moment because right now I am not using @font-face in any professional work (I would like to, but there are still to many wrinkles), and the personal project I am putting together only uses fonts that I personally created and I know for a fact that no local sources will exist.

Don't get me wrong here, I don't mean to cast a bad light on Font-Squirrel or anything. I love what they are doing and in time I am sure all of these issues will be ironed out.

@Lampica Are there any specific examples you can cite? I did not know that there were problems like this. Thanks!

Hi Font Squirrel,
I've been out of town for the past few days. I should be home tomorrow or the next day, at which point I think I can give you a couple specific examples.

I'm very new to web design. Still attending CC for my certificate. I have an html doc that dreamweaver was used to create & has some inline css for the fonts chosen. Font in a red suit for 1st choice in size 36 no headings, 2nd choice is papyrus bold no headings for the title. I have a small amount of text that I only want to be in papyrus bold. I can't seem to figure out where to place the @font-face code etc. or what exactly it should be, even after reading & re-reading every single piece of info on the web. I think I might need someone if at all possible to look at my code. I used the drag & drop features of dreamweaver to create it, because I am just not good enough at writing the html yet. I can't use external style sheets because this is for en ebay template. eBays system is copy & paste for html. So once again my css is inline. I've tried dropping the font files into the font generator from fontsquirrel , but just keep getting an error with a red X in a box. Some of my text was done in photoshop because that text wont ever change so I made it part of the images. But some text will need to change on a regular basis, & also needs to be searchable through tags in eBays system so it can't be an image. How can I find out what the exact code should be & where to place it in the html doc? Thank you for any assistance! Stacey

Update, finally got the font squirrel to generate the zip files, but when I open the demo.html the font doesn't display correctly. When I try to open the .eot file it wont open in IE, neither will the .svg or the .woff, only the tff opens in firefox & displays correctly. Not sure what to do with the css files, except maybe copy the code into my html file, but where to place it exactly, since I'm using inline I'm not sure? Thank you for any assistance, Stacey

@stacey
I would be willing to help you out for free, but I suggest you go post your question at http://www.codingforums.com/forumdisplay.php?f=13 as it will be much more convenient and appropriate for me to help you there. Just create an account there and then post your trouble in the html/css section and I will see it and help.

@Lampica
Thank you for your response. I will go to the link you provided within the next couple of hours. I found out a little while ago, that I need to use embedded CSS. Still not sure how it should look code wise. But will fallow your request shortly. Thank you!

@Font Squirrel
Finally made it Home (a week later than planned). I guess I'll drop you a line through the contact form on the Font Squirrel website and give you some examples among your @font-face kits.

@Lampica
Just wanted to let you know that I did as you said, but was asked to post my question in the private message utility per Apostropartheid, who said she deleted my original post to you. I will repost in the private utility.
Stacey

@Lampica
unable to send you private message @ codingForums.com because they can't find you as a user.
Stacey

@Lampica
Cant post in private utility as system doesn't recognizance user.

@Lampica
cant send you private message cause system doesn't recognize user

@Lampica
just wanted to let you know that I did as you said, but was asked to post my question to you somewhere else, Apostropartheid emailed me back & said there is no user named Lampica & removed my post. Not sure what I should do? I didn't see the reply button until now.
Stacey

Ok, just post it as a general question on the forum. Forget about Lampica. I am not always Lampica. Rest assured, I will see your question, it does not need to be addressed to me specifically. And please relax and give people some time to reply before posting multiple times. It may take me a couple hours - or it may take me a day or two, as I'm very busy. Just be patient though and I will do my best to help if I can.

@Lampica
sorry, there was some sort of system error, none of the posts were showing up, after several hrs. so I didn't think any of went through

U have a REALLY weird thing, maybe someone can help me?
I have a website which is divided into and hosted on two domains: http://www.qqleq.nl and http://www.filmmaken.nl. Hosted with the same provider and as far as I know, on the same apache system. Now I made this simple test.html file (see below). It uses the font files on http://www.filmmaken.nl. The test file works on (the latest) FF, but in (the latest) IE it works only on http://www.qqleq.nl, but NOT on http://www.filmmaken.nl. Also not if I make the font files local. Also not if I add an .htaccess file as suggested on some websites. How can the SAME script work on one domain and not on the other? I emptied the browser cache, no result. You can see the two identical files on http://www.filmmaken.nl/test.html en http://www.qqleq.nl/test.html . Does anyone have an idea?

<html>
<head>
<TITLE>This is a test</TITLE>
	<style type="text/css">
@font-face {
  font-family: 'Adler';
  src: url('http://www.filmmaken.nl/fonts/adler0.eot');
  src: local('Adler Regular'), local('Adler'), url('/fonts/adler.ttf') format('truetype');
}
 
H1  {
	background-color: black;
	font-size : 16pt;
	font-family : Adler, sans-serif;
	color : #ffffe0;
	border-style : solid;
	border-color : Green;
	border-width : thin;
	line-height : 1.5;
	margin-bottom : 0;
	margin-top : 0 ;
	padding-left:20 ;
	padding-top: 3;
}
</style>
</head>
<body BGCOLOR=black TEXT=WHITE LINK=YELLOW VLINK="#FF8000" ALINK="RED" >
<h1>Hallo</h1>
</BODY>
</HTML>

Hy Guys, Hy Paul,
I really like the attempts made here.
Just one thing that bites me.
Firefox < 3.1 supports SVG. Isn't there any way to enable the SVG-Text rendering for Firefox < 3.1?

Hey Paul.

The 'smilie' trick quite clever. Never would have thought of that. I don't know whether the case of having several fonts with the name is common or not, but I'm sure it happens every now and then. This seems like a great way to prevent this special case - I wonder how often it happens.

Z.

Paul,

Thanks for the great work. Please take a look at this issue with Chrome, first reported on doctype.com. In some cases, it will be worth adding a few extra lines to enable synthetic bold/italic transformations to Chrome.

Hi Paul:
I'm trying to learn this and came up with the following:

@font-face {
font-family: 'myfontname';
src: url('http://www.mywebsite.com/font/GOODTIME.eot');
src: local('GOOD TIMES')
url('http://www.mywebsite.com/font/GOODTIME.ttf') format('opentype');
}

I have the eot file and ttf located as above. The problem is that it works in IE8, but not Firefox 3.6. I tried to find out where IE is getting the font, but it disappears if I simulate a typo error both in the first URL *or* the local font name. Can you help?

I'm confused by the references to the "font-variant" descriptor. According to the current CSS3 font spec for the "@font-face" rule (http://www.w3.org/TR/css3-fonts/#font-resources), the only valid descriptors in a "@font-face" rule are:

font-family
src
font-stretch
font-style
font-weight

"font-variant" is not listed.

Undoubtedly, "font-variant" would be extremely useful. Are some browsers simply supporting this as an extension to the "@font-face" rule, or is there something I'm missing in the spec?

"font-variant" definitely does belong in element styles; I was assuming all the talk here was about using it in @font-face rules, which would be very useful for small-caps font files. I'm not sure why it's not in the CSS3 spec, considering the browser can choose a small-caps variant from system fonts; we should be able to provide a small-caps variant in @font-face rules.

@Mike G
You are missing a comma after local(). That should fix it for FF as long as there's no problem with the TTF file - but if you created an EOT from it, it should be fine.

@dean hall
Font variant doesn't belong in the @font-face declaration. And stay away from font-stretch. No meaningful support as yet.

rich

Hi Paul,
first & foremost I thank you for sharing this valuable property with us. I do however have one concern about it.

I still see web designers/developers using sIFR/cufon rather than embedding fonts straightaway.

Do you mind sharing demerits of 'font-face' with us?

Paul, I'd like to make a correction. You state: "The one catch is that Safari on OS X will use only the Postscript name instead of the full font name; so when they differ, include both names"

This is not really true. Safari only supports specifying the font-FAMILY name in a font-family declaration (and as a fall-back, the PostScript name for cases where the other CSS font-* properties cannot select the face you want, such as an ornaments face).

Your code as follows specifically says "Graublau Web Regular" which is a face name and not a family name, and should in fact not work in any browser unless you have a "Graublau Web Regular Regular" face installed! The actual family name is "Graublau Web", which is why the second match succeeds.

src: local('Graublau Web Regular'), local('Graublau Web'),

The font family name in Safari is exclusively determined from the NameID code 1 (family) as listed here:
http://developer.apple.com/textfonts/TTRefMan/RM06/Chap6name.html
NameID code 2 (face) is not used for matching CSS font-family properties.

E.g. for PlatformID=1:
1="Graublau Web" 2="Normal" -> font-family: "Graublau Web"; (the base face for a family)
or 1="Arial" 2="Narrow" -> font-family: "Arial"; font-stretch: condensed; (an alternate face)
or 1="Arial" 2="Rounded Bold" -> font-family: "ArialMTRounded-Bold" (PostScript name to select an otherwise unselectable face)

Note that IDs 1 & 2 are the 'ordinary' family/face names, and on the Mac (PlatformID=1), a family can have unlimited numbers of faces. On Windows, historically a family can only have Bold and/or Italic faces, so some of what is really the face name has been pushed into the family name, e.g.
PlatformID=3
1="Arial Rounded"
2="Bold"
To compensate for this, name tables can now contain PlatformID=3, NameID=16 & 17 names which should contain the same values as the PlatformID=1, NameID=1 & 2 values (but obviously with different encodings).

Also, to follow up on a comment just above: font-variant does belong in @font-face delcarations, and its omission is an error. There needs to be a way of saying "this is the small-caps face for family WhateverFont".

this simply isn't working for me. here is what i have in the stylesheet.

@font-face {   
   font-family:'fatboyslim';   
   src: url('/fonts/fbsbltc.eot');  /*IE*/
   src: local('Fatboy Slim BLTC BRK'), url('/fonts/fbsbltc.ttf') format('truetype'); /* non-IE */  
}   
.fatboy {
	font-family: fatboyslim , verdana, helvetica, sans-serif;
	color: #0033CC;
}

and in the html i have an unordered list with list items that have the fatboy class. any help would be appreciated. I am testing in IE8 and FF3.5 on my local machine.

Has anyone got @font-face working on iPhone Safari? People claim to have made this work, but when viewed on device no custom fonts are used… Can anyone point me to a working example??? Love to find one as I am beginning to believe this is not actually possible!

 
@font-face {
	font-family: "MistralRegular";
    src: url("../type/Mistral.ttf");
    src: url("../type/Mistral.eot");
    src: local("MistralRegular"), 
    	 local("Mistral"),
         url("../type/Mistral.svg#Mistral") format("svg"),
		 url("../type/Mistral.woff") format("woff");
	}

My approach has been to load the "ttf" directly for Firefox, as IE will skip over "ttf" and use "eot" and the rest using local lookup for mobiles using "svg" and modern browsers using "woff".

note there is a Safari bug with @font-face and having the following line in your css:

@CHARSET "UTF-8";

(fonts generated with font squirrel)
only 1 font is loaded (if using several fonts) and is inconsistently displayed

@dubbs
I'm struggling to get an SVG forn working on the iphone using font-face. I have seen an example that works but try as I might mine doesn't. I can only assume it's to do with the font?

Hi i have tryed out your cool font-face but i cant get to work in IE it workes fine i Firefox but not in IE i hade some trouble that the mime type wasent declared in IIS but i solved that..

Please help …

here is my CSS

/* IE */
@font-face{font-family:BellyBold; src:url(/_css/fonts/BellyBold.eot);}
@font-face{font-family:BellyBlack; src:url(/_css/fonts/BellyBlack.eot);}

/* non-IE */
@font-face {
font-family:BellyBold;
src:url(//:) format("No-IE-404"),
url(/_css/fonts/BellyBold.otf) format("opentype");
}
@font-face {
font-family:BellyBlack;
src:url(//:) format("No-IE-404"),
url(/_css/fonts/BellyBlack.otf) format("opentype");
}

h1
{
    font-family: 'BellyBlack', Tahoma;
    font-size: 30px;
    line-height: 21px;
    color:#333333;
}

Hello ill get to work when i check the html file localy on my coputer but when i set it up on the server it wont work..

Any ideas??

So an issue I ran into, is that I had (apparently) two different copies of a font on two machines and when I loaded up firefox one machine would load the Local font and the other would load the remote font. The one that rendered the Local font was rendering the font different. So my question is, instead of having firefox immediately render the Local font if it is install, can you have it render the remove one, and if that fails to default to the local font?

I managed to get the @font-face working on iPhone Safari taking Paul's advice and it looks great.

Hi Paul,

this article is amazing, thank you so much.. can't wait to play with this soon. And by the way, can I use this excellent script in in the background that is adictive for drawing.. on my site ?

.k

it is not a perfect css code, try on the epiphany browser (gnome). He dont eat it.

 
/*IE*/
@font-face {
 font-family:myindiunicode;
 src: url("fontface/myindiunicode.eot");
 src: local('myindiunicode Regular'),local('myindiunicode');
}
/*NON IE*/
@font-face {
 font-family:myindiunicode;
 src:url(//:) format('No-IE-404'),
        url(fontface/myindiunicode.svg#myindiunicode) format("svg"),
        url(fontface/myindiunicode.TTF) format("truetype");
}

after lots of trial those combination works for me in ie, ff . In chrome combination characters ( I am trying indian unicode font having support of combination characters) are broken.
while it is quite fine in IE and FF. I want to make the code such a way that if the browser dont find that perticular font in visitor machine it will load those font face file and if the font is available in visitor's machine . it will laod the font from the visitor's machine.
1. plz guide me which will be the best code for it ?
2.how to rectify the problem with chrome ?
3. I have make files from frontsquirrel, my all files are too big this is also one of my concern.
thanking you

I managed to minimized those file size by subset the font character codes. I want to make browser to check for the font available in the visitor machine, if font available in visitor's machine .. then it will not load the eot/svg/woff file and will use the visitor's machine font in stead of it ( I will put a link for the fonts in the site) so which will be the best suitable option for me ? plz also mension abt the svg file do I have to put is for rendering it in chrome ?
thanking you ..

Why Google Chrome can't render my font?

@FontNotVisible
you have an extra space behind "fatboyslim" in the class .fatboy properties.

Having attempetd to run the code output by FontSquirrel I noticed that if you're on a Windows server then IIS doesn't have the mime types for SVG and OTF set by default, resulting in those files not being found - even when they're there. If you add the mime types via the MMC and either restart IIS or wait for the App Pools to recycle that seems to resolve it.

Hi,

I used FontSquirrel, and it doesn't seem to work on Safari on a Windows platform. I'm using Windows XP SP2, so haven't tested nor on Vista nor on Windows7 though.

Not much of a issue for myself, but thought i mentioned it.

@Wieland

After testing on Vista and W7, it works on Safari on these platforms. So really not a issue. Thanks for the article btw!

Hello!

Please, I need your help! It's urgent!

In my blog, I changed the blog title font "Verdana" to "Titillium". I'm spekaing of the code "font-face". Many fonts as those, in the Fonts folder in my own computer. Did you understand? I also changed the text font and text title to the fonts that don't exist: Titillium, Calibri, Segoe Print, Segoe Script, Lucida Sans Unicode, etc.. On my computer, the fonts exist. But when I went to cyber café or "LAN house", to see my blog, the fonts of the blog title, text and title text, etc. did not work, because the other computers those fonts din't exist or appear exactly, or those fonts were not installed in the Fonts folder of the other computers. At the blog, accept, recognise and there are only six fonts, including Comic Sans MS, which already existed and was installed on all computers. So how do I install the fonts in my own blog for that the fonts work on all computers that do not have those fonts? Then @font-face doesn't work!

I know you counsel me not to use those fonts, but only the standardised fonts by the Blogger. But see the text at the site of FontsQuirrel, the fonts there work perfectly althought I don't have these fonts, but I know what the font are these!

How do I put the CSS @font-face? Where do I find it in my blog's HTML?

Kevin

Chrome in Windows appears to stop rendering my font whenever it sees an 'e' character for some reason. Works fine in Chrome for OS X and every other browser on both OSes. Any ideas? The font is 'Birth Of A Hero'.

TWO SMILEY VARIATION. Avoid problem with Gnome browser Epiphany:

@font-face {
  font-family: 'Graublau Web';
  src: url('GraublauWeb.eot');
  src: local('?') format('?'),
    url("GraublauWeb.woff") format("woff"),
    url("GraublauWeb.otf") format("opentype"),
    url("GraublauWeb.svg#grablau") format("svg");
}

When I use the smiley method in my .css, I get this message in dreamweaver:

"The document's current encoding can not correctly save all of the characters within the document. You may want to change to UTF-8 or an encoding that supports the special characters in this document"

Then when I reopen the file my smiley face is now a question mark.

Even when I declare this at the beginning of the css:

@charset "utf-8";

it still won't save with the smiley. Any ideas?

Hi,

On IE7 users always get a security warning. Any way around that? Can we target IE7 out and use sifr for them?

-Chris

Thx a lot !!

It has been hard but it's done !! I'm on walkway bold thanks to you !

aby

Really great article,
but the smiley way doesn't work when you use iso-8859-1.

Got one for you all.
In Opera 10.60 build 3445 the @font-face works fine…
until I refresh the page and the text goes back to system fonts.
if I press enter on the address bar it comes back, but any amount of refreshes always gives system fonts and the address bar gives @font-face fonts. weird huh.

forgot to say in I.E. it works fine on refresh and with @font-face.
in firefox it works fine on refresh and with @font-face.

In IE and firefox it works fine.

10.61 the same

hello,

I want You all to know that the @font face generator have and error.

A PHP Error was encountered

Severity: Notice

Message: Undefined variable: demo_data

Filename: views/downloadable_demo.php

Line Number: 58

I cant generate a @font face.

Thanks the generator is so helpful.

Hi Sir, I just want to ask for any help or advice with regards on how to make my fonts appear.

I followed every step in the above mentioned post. But it doesn't seem that I am getting it all right.

I don't know much of HTML and CSS so i tried to copy formats from several websites including yours that uses embedded fonts.

I would really appreciate your help. Thanks.