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/