11

Using @font-face in osCommerce

multimixer | learn | Tuesday June 21 2011

It 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.

Font Squirrel offers many fonts to choose from

Select the one you like and you’ll get to a screen that offers even more details for the selected font type

Font type details

Now click on “@font-face kit” that will take you to the download screen

Font Squirrel download fonts

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

downloaded font package

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

The category title has a new font type

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

Click +1 to recommend this to your friends when they search.

multimixer

follow multimixer on Twitter

Follow me on twitter. I'm not tweeting all day long and guaranteed no spam and no advertising.

If you like what you read and if you think it will help you in your online business, then please consider a donation.

There is no obligation to do so and all information provided here is free to use.

It will however help to keep this blog alive, free of advertising and full of content.

  • Gary 21/06/2011 at 15:56

    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.

  • multimixer 21/06/2011 at 16:11

    Well, this is considered as cross browser safe. I can not give a guarantee, but it works nice wherever I used it till now

  • Dirk Tromp 30/06/2011 at 18:18

    Great article Goerge. This certainly helps all the osCommerce users.
    I will be trying it out shortly.

  • multimixer 30/06/2011 at 18:25

    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

  • yadetar 30/07/2011 at 00:50

    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

  • multimixer 30/07/2011 at 08:42

    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

  • yadetar 30/07/2011 at 23:09

    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

  • Lynn 13/03/2012 at 22:32

    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!!!

  • Hans 28/05/2012 at 15:52

    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?

    • multimixer 30/05/2012 at 10:55

      @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?

  • Penny 30/09/2013 at 02:51

    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.
    σας ευχαριστώ

Leave a Reply