How to use a stylish font on my website that works on all browsers
"that works on all browsers"
I don't think there is such a thing as ANYTHING "that works on all browsers".
But your options would include (as stated above) sIFR, though you'd only want to use that for headlines, at most.
More recent browsers can support #font-face css "embedding" of fonts. Some online web services that will allow you to license type for that (either commercial or free fonts) and also make the CSS/JS needed include:
http://www.kernest.com
http://www.typekit.com
and there are others as well.
There's also Cufon, which is a javascript based solution.
Try sIFR. "Rich Accessible Typography for the Masses".
Edit: Also, check out cufon. (via later posts)
The only worthwile solution is sIFR.
You really should check out the #font-face CSS3 rule. Here's a converter to make it work in IE. Paul Irish has a great writeup on how to use the rule here.
[EDIT] Just found a handy generator, too: http://www.fontsquirrel.com/fontface/generator
Font embedding is becoming viable now. Check out this post from Jonathon Snook
Do you want to use if for headlines and other 'special' text or for general paragraphs of text? If the former, sIFR or an image representing the text would probably be best. If you want whole paragraphs then you should look into #font-face like DA suggested or see if there's an acceptable web safe font that is close enough to the font you would prefer to use.
I personally have switched from sIFR to cufon on projects that don't have issues with font EULAs. The about page has a more in depth overview.
Depends what font you want to use ... the easiest solution is to use the #font-face method. If you include the microsoft only format(.EOT) it will work in ANY browser.
Font Squirrel has a great collection of free to use commercially, font kits, that include:
Original TrueType or OpenType Fonts
for Firefox 3.5 and Safari
EOT fonts for Internet Explorer
SVG fonts for Opera, iPhone & Chrome
WOFF fonts for Firefox 3.6+
Demo.html and stylesheet.css so you
can get going fast
The #font-face method doesn't require Javascript or Flash, like the previously mentioned sIFR and Cufon techniques, so is more accessible by all.
It's totally SEO friendly and scalable.
Related
I was searching the best-practice to implement a font inside a website and I still didn't found a real answer to this.
On forums and blogs many people say that using #font-face is the best way, other using Typekit or Cufon.
I don't like these 3 options.
Font-face render my fonts grainy.
Typekit is not freeware and do not have all the font that I'd like to use.
Cufon use canvas.
There are other way to implement fonts?
There is a way to render it with no grain?
Screenshots:
Mac
Windows
Font rendering depends on the Operation system, some of the font specific settings in the OS, the browser and the font itself. The better the font is prepared for screen usage (hinting,…) the better it looks. Their is no »do it like this and it is always fine way«, there are too many factors that play a role. In the images above you are trying to render very thin font, this is always problematic, especially if the font is badly hinted and/or set in a small size. The advantage of services like TypeKit and google webfonts are that they provide you with screen optimized fonts, so if you are not familiar with fonts themself you should prefer some prepared fonts, or optimize the font yourself if it is too bad. You should also keep in mind that not every font is suitable for screen usage and i think that can be one reason why google and typekit do not provide all fonts.
good luck…
EDIT:
once I forgot to enable some kind of font rendering option on windows, I think it was somewhere at: leftclick computer > properties > performance, but I am not sure where exactly, I do not use windows anymore to find it, but the start was at »leftclick computer > properties« and it was about the »antialiasing« of fonts. After ticking the box it looked much better. It was a thin font too in this case…
greetings…
What exactly do you mean by 'grainy'? I only ever see that in older versions of internet explorer, and there are CSS properties for font smoothing.
Using TypeKit uses #font-face, it's just loaded in a different way. Have you tried Google's webfonts too?
Here is a great article on the best method to use: http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/
#font-face {
font-family: 'Graublau Web';
src: url('GraublauWeb.eot?') format('eot'),
url('GraublauWeb.woff') format('woff'),
url('GraublauWeb.ttf') format('truetype');
}
if i place my ttf font file in my websites root folder lets say named AMC.tff and in my website use <font face="AMC"> is it going to work... if not than what is the method to use unusual fonts in your website
You can include True Type Fonts with the help of the CSS 3 property #font-face. The following CSS would apply your AMC font to all <h1/> tags:
#font-face {
font-family: "AMC";
src: url("./AMC.ttf") format("truetype");
}
h1 {
font-family: "AMC", sans-serif;
}
For browsers that have no support for webfonts you should specify a similar alternative to your font. In the above example sans-serif would be used if AMC cannot be found because the #font-face tag was not recognized by the browser.
No, the fonts in a browser is based on fonts installed on the visitor's machine.
I don't know much about this area, so I can't tell you which one of these works or is considered best practices, but check out:
SiFr
typeface.js
Cufon
No. Apart from the fact that <font>is deprecated, you have to use the CSS3 #font-face directive, or older more compatible methods such as Cufon and Sifr.
If you need to use Custom Font for your site, you can give a go for Cufon
http://cufon.shoqolate.com/generate/
Detailed Tutorial for using CUfon on your site
http://net.tutsplus.com/articles/news/the-easiest-way-to-use-any-font-you-wish/
Forgot to add, You can also use CSS3 property
#font-face
Supported by FF3.5 and above, Opera 10 and above, IE 7,8(not sure about 6)
Check this link out:
How to get non-standard font with effect in use of web site?
I have explained in detail how to embed fonts in a webpage and make it browser compatible.
Font embedding is also a risky affair, as the font license sometimes doesn't allow.
PS - And please make sure that you don't repeat questions in stackoverflow as this question has been answered many times.
I started getting into reading design blogs a little while ago, and it seemed that #font-face got really popular sometime late last year, or something like that, because I was under the impression that it was a new emerging feature of the web. But then I saw that Internet Explorer has had it since IE4 (with some conversion).
So is it common to see #font-face online nowadays? Sould I have anything in mind with respect to accessibility, legality, or rendering before I do something like this? I saw that Hulu.com renders fonts with Canvas and a javascript called "cufon."
It's not amazingly common yet, but all relevant browsers support it.
http://reisio.com/examples/webfonts/
Short answer: over 90% of browsers in use support #font-face if you get the syntax just right.
Long answer: the tough thing about #font-face is that different browsers need slightly different css, and that IE needs EOT.
Easy solution: FontSquirrel will take your font and give you the css and the EOT. For free.
So is it common to see #font-face online nowadays? Sould
No. It is still fairly bleeding edge as far as wide browser support is concerned.
accessibility
Not unless you choose to use a font that is hard to read.
legality
Read the license of the font to make sure it allows embedding
rendering
Beware the flash of default fonts before the one you specify is downloaded.
See here for browser compatibility. All browsers except for IE currently support it.
It would be easier for development if I can just embed every typeface I'm likely to use, but I definitely don't want the extra HTTP requests for fonts that don't end up anywhere in the page. Can anyone enlighten me?
IE will download the .eot file immediately when it encounters the #font-face declaration.
Gecko, Webkit, and Opera all wait until they encounter HTML that matches a CSS rule with a fontstack including the #font-face font.
-- http://paulirish.com/2009/fighting-the-font-face-fout/
So were it not for IE, it actually would be safe to embed lots of fonts, as long as you're careful not to refer to unused ones in your CSS styles, because at that point they will be downloaded by the browser.
Unfortunately, most browsers won't second guess you to avoid downloading fonts that aren't actually used (actually I don't know of any browser who is smart enough for such avoidance, which of course doesn't mean some such browsers might not exist). Couldn't you post-process the pages during deployment to remove the unused ones?
Paul Irish has a really good tutorial on using #font-face
http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/
You can also use a syntax generator on fontsquirrel.com
in addition, you may do this too:
clear browser cache, then run inspector of your browser (right click> Inpsect) and Debugger (resources) tab. then type the url and see what is being downloaded.
I'm helping my sister convert a website that somebody did for her in flash into html.
They use fancy fonts in the flash that I am trying to define in a css file through #font-face. I tried opening the page in firefox, IE and chrome, but nowhere do I see the proper font.
The declaration that I am using is:
#font-face {
font-family: "VAG Rounded";
src: url("http://judith.huinink.net/chilax/VAGROUNL.OTF");
}
http://judith.huinink.net/chilax/index.htm contains the html.
http://judith.huinink.net/chilax/chilax.css contains the full css.
I checked that I can download the font file, but it simply doesn't use the font when I open the page in a browser. I must be overlooking something. Does anybody have any suggestions?
font-face goes mainstream
As of January 2010 all major new browsers support font-face
Safari 3.1
IE - all versions
Firefox 3.6
Chrome 4
Opera 10
See http://webfonts.info/wiki/index.php?title=#font-face_browser_support
Update
In the last year, browser support for fonts has improved rather dramatically. I'd suggest reading Tim Brown's excellent article on the subject, which describes in detail how to get web fonts working in most modern browsers.
Original answer
In realistic terms, #font-face is completely unusable right now. Only two browsers support it — Internet Explorer for Windows, version 5 or better, and Safari 3.1.
Worse, IE and Safari do not support the same font formats. IE supports only EOT, while Safari instead supports the more common TrueType (.ttf) and OpenType (.otf) formats.
Almost no browsers support #font-face: When can I use...
http://www.css3.info/preview/web-fonts-with-font-face/
How to use #font-face in all browsers that support it: at Jon Tangerine's blog
ttf2eot is a nice font converter for Unix and Windows so you don't have to use the horrible old Microsoft WEFT. It converts the whole font, not just some characters.
Here's a javascript to use with sIFR that disables sIFR for #font-face enabled browsers.
Flash needs to die, so here's another alternative to sIFR: facelift. It's a serverside script that generates images.
The problem with afaik all sIFR replacements is that selecting and copying text doesn't really work -- you either don't see the selection, or it's impossible to select less than a word or line. There's also Cufón which uses <canvas>, so it only works on newer browsers, most of which have #font-face anyway.
Do the right thing, use the state-of-the-art technology now: #font-face with TTF or OTF, and fallbacks for IE and old browsers. Preferably keep your HTML clean and implement those fallbacks in separate javascript and CSS files. For IE you might need to use "conditional comments" as explained in my first link above. For browsers with javascript disabled, always specify a list of replacement fonts with the web-safe fonts at the end.
Check out the ever popular sIFR or with no flash dependency, typeface.js
I've come across situations where WWW must be included in the domain. Without it, it wouldnt work.