Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • hayat Friend

    I want to use a font that I have which is no commonly available on other users’ computers?

    I know I need to change the font name in the css files to the font name, and upload the font to my server.

    But how do I tell the css file to take the font from my server and use it if the user does not have this font on his or her computer?


    TomC Moderator

    Hey There:

    Here is a tutorial that may be just what you’re looking for . . . [URL=

    hayat Friend

    Thank you.
    Is there an alternative link? It does not allow me to see the thread. It seems to be only for paid club members.

    TomC Moderator

    Since @FontFace isn’t any kind of “secret” . . . . .

    USING @FontFace for Non-Traditional/Alternative Fonts On Your Site

    I have to give a shout out to Moderator scotty for pointing me in the direction of @FontFace as an alternative to using the cufon method of using alternative fonts.

    I am very excited about this method because I was having the damndest time trying to use the
    “cufon” method to use a particular font for my main navigation. It DID replace the main nav font, but it also affected the sub-nav menu items in a way I did not want – and I couldn’t figure out how to circumvent the issue . . . UNTIL scotty pointed me in the direction of the @FontFace method.

    The method is actually VERY simple (so long as you get all the syntax correct in your css code).

    Here are a couple of links to explain the process . . .


    First I utilized FontSquirrel’s @FontFace Generator ( to generate the @FontFace font files I would need – in my case, “League Gothic” I then created a “fonts” folder (within my template css folder) and uploaded the font files there.

    the structure looks like this . . .

    your template
    —- css
    ——- fonts

    I then inserted the @fontface css code into (in my case) my mega.css file and designated the font for the particular div/class I wanted it to appear, as follows . . .

    /* 1st level */
    @font-face {
    font-family: 'League Gothic';
    src: url("../../css/fonts/League_Gothic.eot") format('eot');
    src: local("☺"),
    url("../../css/fonts/League_Gothic-webfont.wof") format('woff'),
    url("../../css/fonts/League_Gothic-webfont.ttf") format('truetype'),
    url("../../css/fonts/League_Gothic-webfont.svg#webfontpm5EArBj") format('svg');
    font-weight: bold;
    font-style: normal;

    #ja-mainnav ul.level0 li a {
    display: block;
    text-decoration: none;
    font-size: 30px;
    color: #000;
    font-weight: 500;
    padding-top: 16px;
    padding-right: 10px;
    padding-bottom: 5px;
    padding-left: 0px;
    height: 37px;
    text-transform: uppercase;
    font-family: League Gothic, Helvetica, Arial, sans-serif;

    You need to make sure you designate the correct path to the fonts (within the fonts folder you created).
    I found out, though some trial-and-error” that precise syntax is key.

    But WHALLA, IT WORKS as it should and now you can use non-traditional/alternative fonts for various parts of your site.

    hayat Friend

    Thanks Tom!
    I’ll have a look at the tutorial and will come back.
    I’ve checked your website, and the fonts look really wow! 🙂


Viewing 5 posts - 1 through 5 (of 5 total)

This topic contains 5 replies, has 2 voices, and was last updated by  hayat 8 years, 8 months ago.

We moved to new unified forum. Please post all new support queries in our New Forum