Embedding Fonts in your Web Site with CSS and @font-face
One of the winners of a free copy of Magazine Premium (see this article) suggested implementing @font-face kits to the theme. I had read about @font-face but never actually attempted to use it before. I did a bit more research and finally figured it out. Now 10 @font-face kits are available with Magazine Premium and I thought it would be a good idea to show you how I did it.
Adding @font-face fonts to your Web site is not that difficult. It just takes a few steps.
First, you need to download some @font-face kits. I like to use kits supplied by Font Squirrel because they have an awesome library and all their fonts are 100% free for commercial use. For this example I’m going to use Riesling.
Once you have the files downloaded you need to add them to your Web site. Create a folder named “fonts” and place the riesling.eot and riesling.ttf files into the folder. Upload that to your site, in to the same directory as your style sheet.
Now open your style sheet and add the following:
/* * * The fonts included are copyrighted by the vendor listed below. * * @vendor: Bright Ideas * @licenseurl: http://www.fontsquirrel.com/license/Riesling * * */ @font-face { font-family: 'RieslingRegular'; src: url('fonts/riesling.eot'); src: local('Riesling Regular'), local('Riesling'), url('fonts/riesling.ttf') format('truetype'); } |
Everything is in place for you to use Riesling as a font on your Web site. Just add it to your CSS like you would any other font-family:
h1 { font-family: 'RieslingRegular', Arial, sans-serif; } |
The one thing you need to realize when using @font-face kits is that only modern browsers recognize it.
This is a sample paragraph that uses @font-face kits and CSS. If you see this paragraph in Riesling then your browser supports @font-face. If not, you might need to upgrade your browser to take advantage of @font-face kits.
Great post. I’m sure a lot of your readers will be happy to use real fonts on the web for a change.
I usually put the actual fonts in two places – in the top level directory of the site & in the theme folder I’m working with. I do it to make access a lot quicker from pages outside the WordPress theme files (e.g. index placeholder pages, adwords landing pages, etc…)
Will this work on any WordPress theme?
Yes it will.
Thank you.. I was wondering if you can give me a little more instructions.. I am just learning.. Can you tell me where in the style sheet i put everything, and more explan on the creating the folder… I really want to use this, and i promise to link back to you… Julie
THe theme that I have used is “Sliverray” it did not come with a style sheet, but i have a master sheet that I change everything in!! Kinda strange…This is what it says about the style sheet..
/*
Title: screen styles and ie/win fixes
Author: http://www.blogperfume.com
*/
/* import stylesheets and hide from ie/mac \*/
@import url(“master.css”);
@import url(“ie.css”);
/* end import/hide */
And I use bluehost, and build in wordpress… I know how to upload for the theme’s and then into the images.. Bt I have never uploaded a file or folder… Julie
If you do things through the backend then you would have to create a folder user the file manager in Bluehost’s cPanel. Create the folder there and make sure it is in the same directory as your style.css file. Then add the style code to the master.css stylesheet.
Thanks, just starting to get into the whole CSS thing and finding it very confusing. Would you recommend a good starting guide?
Take a look at the tutorials on the W3C Web site.
http://www.w3schools.com/css/
I am using iMac and a new Free Trial Version of the Adobe illustrator. When I try to save my company name in Riesling Regular font an error appears stating there is a licensing issue. I have searched everywhere on line and can’t purchase Riesling and all the sites say it is free for commercial use as well as personal.
How would you suggest I get around this?
Thanks!
I have no clue what the issue might be. I use that font ofter but I have a licensed version of Illustrator. Might be best to contact the developer of the font.
i don have a eot file how do i go about it, i tried without eot file its not working in any browser…….plz help
If you downloaded your font from Font Squirrel it would have come with the EOT file. If not, there are some TTF to EOT converters online.
I’m just starting out with @fonts and though it sounds super easy I just can’t get it to work.
My goal: to use the @font for a header (h3) on my web page.
I’m using Dreamweaver MX to create the page and am using the latest version of Firefox to preview the site.
I downloaded the @font-kit for VeggieBurger (the font I want) from Font Squirrel, placed it in a folder called “fonts” and uploaded it to my server. I copied/pasted the css styles that came with the kit into my OWN style sheet… which I have a feeling there lies the problem.
For the font family in my style sheet do I use “VeggieburgerRegular” or ‘VeggieburgerRegular’ – is there a difference as to whether double or single quotes can/should be used?
Next for the srcs, are they being called from my server? If so, since I put them into a “font” folder, do I have to put /fonts/ in front of the name (/fonts/VeggieburgerRegular) and do I wrap those words with a single quote or leave it like the above? So (‘/fonts/..’) or (/fonts/)
For the h3 style. Do I have to create a separate style for the @font? like h3.VeggieburgerRegular or do I just put the Veggieburger as the first font family item?
Lastly for the html portion, how do I call the @font from my style sheet? do I just put (without spaces) and it’ll automatically call up the style from my sheet or do I have use a class to call it up?
You need to point your “src” to the file, so if it is in a /fonts directory that needs to be included. Remember, that this “src” is in reference to where the stylesheet is located. So you have to set it accordingly.
Once the font is added properly, you can call it in your CSS exactly as I demonstrate above. To set an H3 tag all your need to do is something like this:
If you set your font with quotes, you will have to add it using quotes.
Woo-hoo, finally got it to work! I was setting the url portion wrong. Thanks for the help
I was looking for this all over the net, the only part I dont like is that anyone can steal my private fonts.
Nice info.
IE 8 is not supporting, when i use this same code and same font
@font-face {
font-family: ‘RieslingRegular’;
src: url(‘fonts/riesling.eot’);
src: local(‘Riesling Regular’), local(‘Riesling’), url(‘fonts/riesling.ttf’) format(‘truetype’);
}
.. plz help me
thanks
I didn’t realize adding @font-face fonts was as simple as adding it to the CSS. Mind you I am still learning. When you download the kits, can you create any folder to store them in? (as in, there isn’t a default folder?)
This is very exciting, but unfortunately every browser supports @font-face slightly differently
Google Crome won’t support it
Yes it will. Check out http://www.fontsquirrel.com/ and test some of the @font=face kits. They work in Chrome.
and can I get a bit more explanation about src: local(‘Riesling Regular’), local(‘Riesling’)
That looks to see if you have the font installed locally on your computer, then it won’t have to load it from the web.
This is very exciting..
great post! is there a way to use this for a regular block of text (not headings)? i’m using aller font, but if i set the size to anything lower than 17pts, the font breaks apart. the size i’d like to use is 14pts.
thanks alot…really helped.! :d