Web designers have been constrained to use a limited number of safe-fonts due to the dependence of being available on various computers and operating systems. CSS3 changed that by introducing a feature that allows you to use any font for your website.
This article contains a simple and easy to implement tutorial about using the @font-face property.
Ok, how can I use this?
Let’s see now how can you take advantage of this. So, in order to be able to use this CSS3 property, you must complete the following 3 steps and you can also check the demo.
For this fast example I used 3Dumb font from Font Squirell.
1.Upload the font to your server
Just open your FTP tool and upload the font to your server and note the location. If you don’t have a cool font to use for your website then you could try:
2.Define it in your CSS file
@font-face {
font-family: '3DumbRegular';
src: url(‘your-path/3Dumb-webfont.eot’);
src: local('?'), url('3Dumb-webfont.woff') format('woff'), url('3Dumb-webfont.ttf') format('truetype'), url('3Dumb-webfont.svg#webfont57ztNrX6') format('svg');
}Just make sure that you change “your-path” with the exact location of your font.
Thanks to Paul Irish, we can use this cross browser font-face solution. As you notice there are multiple font sources defined, as ttf, eot and svg.
- TTF – Works in most browsers except IE and iPhone.
- EOT – IE only.
- WOFF – Compressed, emerging standard.
- SVG – iPhone/iPad.
3.Properly use it
h1
{
font-family: '3DumbRegular', Arial, sans-serif
}
About Copyright
I’d recommend always make sure you check the used font license before you use it in commercial/personal purposes. Use free fonts or check the fonts available for @font-face embedding list.
That’s all folks!
This is how you can beautify the fonts from your site, I hope you enjoyed my article and feel free to comment about it.
That’s a good point you touched, as I was looking for a while into this.
Just a quick question. I am just wondering if there is any special place on the server where I should add them.
Thanks!
Eugen
You can place your fonts wherever you want on your server as long as you remember your path and use it to define your font inside the CSS file.
src: url(‘your-path/3Dumb-webfont.eot’);
If only @font-face whas compatible and render the same cross-browsers :<
Webkit rules!
What about font smoothing? I have issues with that on some browsers.
Stacy, indeed, this can be a side effect for some fonts, the fact they don’t render smoothly on all browsers.
Regarding @font-face I’d say you have to love it or hate it! Alternatively, you can choose another custom font embedding solution as cufon, sIFr etc.
really helping technique you sharing. thanks
It’s nice to hear you found this helpful, thanks for your comment!
Hey, I have a little question. Can you change text size if you use @font-face ? Thanks in advice.
Alex, of course you can do that without any problems.
Then I must be idiot because it won’t let me change it with font-size … Have a look at my code:
@font-face{
font-family: “League Gothic”;
src: url(“League Gothic.ttf”) type(“true-type”);
}
#blog-title{
font-family: “League Gothic”;
text-size: 14px;
}
I can change the color but not the size :-s
Mkay, I figured out. It’s font-size not text-size. D’oh I’m idiot xD
Sorry for my late reply, and indeed… text-size is not a CSS property.
Ha ha..:)
wooooo.like always.
aaaaweeesoooome
Thanks for your comment Mohsen!
can someone explain me what does this code:
src: url(“League Gothic.ttf”) type(“true-type”); ?
Ohana, please read above about how can you define both source and format for your font.
http://www.fontsquirrel.com/fontface/generator
Great work!
One question: Is @font-face property supported by the older browsers? I mean is it safe to use it without worrying about backward compatibility issues or something?
Hassan, the
@font-faceis supported in all major browsers (including older browsers like IE6 and IE7).Ohh.. That is good I am going to try. :)
Dear friennd ,
You are very helpful man. all your articles are very useful and easy to understand for beginners. So thank you so much for sharing tutorials.
Hoping more good things.
Thanks
Vipin CK
vipin, it’s so nice to hear that.
Thank you for appreciating my work.
You most welcome Red,
I will be good follower of you . :)
Hi Red,
Could you please help me to get various types of fonts for devices , I mean .eot,.woff like these..for using ” @font-face ” property.
Thanks
Vipin CK
Vipin, just use this @font-face generator made by Font Squirrel .
Red ,
I got it. Thank you so much. XD
hey, what is mean src:local(‘?’) ?
Marvelous! I want to use it on my blog. Can I put the CSS right on the page body? Will the properties be the same? Thank you!