Using @font-face in osCommerce
multimixer | learn | Tuesday June 21 2011It belongs already to a kind of a standard in web design to use custom fonts instead of the so called “web sefe” fonts or even images to get customized font types on the screen.
It looks like the osCommerce world didn’t heard about this yet. Like all of the osCommerce stores that I’ve seen use either the default fonts (Lucida Grande, Lucida Sans, Verdana, Arial, sans-serif) or any other combination of the so called “web safe” fonts.
I wonder why, since this is a great and easy way to get, or to improve, the look and feel of your store
This is a short and easy to follow “mini tutorial” about adding (almost) any font type you like to your osCommerce store. There are various tutorials and posts out there about @font-face usage in general (for example here and here), so I want to concentrate here just on how to implement this in osCommerce
Step 1: Get the font you like
There is a great site that provide free complete font face kits that you can simply download and use on your site: Font Squirrel There are so many font’s to choose from that you’ll find for sure something that fit your needs.
Select the one you like and you’ll get to a screen that offers even more details for the selected font type
Now click on “@font-face kit” that will take you to the download screen
Now, just click on “download font face kit”. You will get a zip file to your computer. Unzip it.
Step 2: Add the fonts to your store
The contents of the folder you just got will look like this. There can be more files included, depending on the font type you selected, since some of them have many sub variations, such as thin, bold etc
Now open the file stylesheet.css and copy all of it’s contents into the top of your file catalog/stylesheet.css. The content will look like this, again, there is maybe more, depending on the selected font type
@font-face {
font-family: 'MichromaRegular';
src: url('Michroma-webfont.eot');
src: url('Michroma-webfont.eot?#iefix') format('embedded-opentype'),
url('Michroma-webfont.woff') format('woff'),
url('Michroma-webfont.ttf') format('truetype'),
url('Michroma-webfont.svg#MichromaRegular') format('svg');
font-weight: normal;
font-style: normal;
}
Leave this as is for now, keep the file open, and zip again the downloaded font folder. You don’t need to include the demo.html and the stylesheet.css, just the rest of the files. In any case, do not rename the folder.
Create 2 new folders named /css/fonts/ within folder /ext/ on your server, so you get following folder structure
[catalog]/ext/css/fonts/
Now upload the zipped font folder to this location and unzip it again. You should now have following folders on your server
[catalog]/ext/css/fonts/michroma-fontfacekit/
It’s not necessary to mention that the actual folder name depend on the font kit you selected, so please do not rename you folder to this folder name here, this is just an example
Next thing is to set the right path in the stylesheet.css file. This is the path to the folder to where you just uploaded the font kit. So, your file catalog/stylesheet.css will look like this now
@font-face {
font-family: 'MichromaRegular';
src: url('ext/css/fonts/michroma-fontfacekit/Michroma-webfont.eot');
src: url('ext/css/fonts/michroma-fontfacekit/Michroma-webfont.eot?#iefix') format('embedded-opentype'),
url('ext/css/fonts/michroma-fontfacekit/Michroma-webfont.woff') format('woff'),
url('ext/css/fonts/michroma-fontfacekit/Michroma-webfont.ttf') format('truetype'),
url('ext/css/fonts/michroma-fontfacekit/Michroma-webfont.svg#MichromaRegular') format('svg');
font-weight: normal;
font-style: normal;
}
Step 3: Use the new fonts
Final step now is to start using the new fonts. You can use them in the complete store or for selected areas of your store.
If for example, you want to use them everywhere, then apply them to the <body> tag as follows
body, .ui-widget {font-family:MichromaRegular, Arial, Helvetica, sans-serif;}
You can see that here I use this font in all text and in anything that has the class .ui-widget. Also you see that I added some common fonts, that is “just in case” something goes wrong with the new fonts
You can be much more selective with your fonts, for example use them only for the page headings, like this
h1 {font-family:MichromaRegular, Arial, Helvetica, sans-serif;}
Here is an example of applying a font-face to just the <h1> tag
What else you can do? You can use more than one font-face, for example have ne for the headings, an other one for the product information page, an other one for the footer etc etc. Just take care to keep a nice balance
Now, go on and add some nice fonts to your store
multimixer
Follow me on twitter. I'm not tweeting all day long and guaranteed no spam and no advertising.
I did the nice fonts in my osc site using cufon. This way is better though I think, as it does not rely on .js as cufon does.
Well, this is considered as cross browser safe. I can not give a guarantee, but it works nice wherever I used it till now
Great article Goerge. This certainly helps all the osCommerce users.
I will be trying it out shortly.
Thank you Dirk
I’ll work on a feature for mini template system, so you can easily select any font types from admin, I think that’s a good idea
Thanks for this great tutorial for adding nice fonts to oSc!
Unfortunately I wasn’t able to get the fonts to work. The problem was, that in my oSc (2.3.1) there isn’t any folder named css under the ext folder? So I made the css-folder and under it the fonts-folder and under it the chosen font folder –> Didn’t work. Could you please help me what wen’t wrong?
BR, yadetar
Hi Yadetar
The folders /css/fonts/ need to be created, I updated the post so it is more clear now.
You can anyway place the fonts to any location of your server you like eg you can make new folders like catalog/kuku/lala/haha/font_folder_name/ but for reasons of keeping some order it is better to do as posted
Possible mistakes are
- a wrong path to the font files in your css file.
Make sure the path is correct ext/css/fonts/font_folder/font_file.xy
- you don’t apply them correctly
make sure that this
body, .ui-widget {font-family:MichromaRegular, Arial, Helvetica, sans-serif;}
is same as this
font-family: ‘MichromaRegular’;
- the style gets overridden at a later moment in your css. You can use the firefox developer tools to see what css is getting applied
Thank you so much for your prompt answer!
Now it works like it should and looks great! Me happy!
Thank you again for your effort to share this information and contrib.!
BR,
yadetar
Love it, thank you so much.
Your blog is so great, everything is very easy step by step. I struggled for days and was lost until I found this site. Thank you!!!
Excellent guide. I used this on my first store, works beautifully.
But since I used a font similar to a standard font (Arial, Verdana, etc.) I have not had any problems.
Now I need to have a more stylized font and I have some trouble with local characters. These do not show up in the installation but are shown as standard Arial. I have checked on the “test drive” on http://www.fontsquirrel.com that the characters are included in the kits, but they do not show up on the site.
Any ideas?
@Hans,
I couldn’t find any @fontface added to any of your stylesheets, but also can’t find any concrete display issue the way you describe it
Could you please give a concrete example?
Hey George! I was searching for a way to do this and found your tutorial. Your instructions were very clear, however, I can’t get it to work.
- Created the folders on my root directory: ext/css/fonts/walkwaybold_regular_macroman
- Added the code to my stylesheet from the uploaded css and corrected paths
- Checked and rechecked paths
- Set the horizontal font to the new one with basic fonts (in case)
NOTHING! Did I miss something? I assume this works with sts.
σας ευχαριστώ