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

    Hello,
    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?

    Thanks.

    TomC Moderator
    #413339

    Hey There:

    Here is a tutorial that may be just what you’re looking for . . . [URL=http://www.joomlart.com/forums/topic/how-to-use-fontface-for-alternative-fonts/

    hayat Friend
    #413428

    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
    #413695

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

    http://nicewebtype.com/notes/2009/10/30/how-to-use-css-font-face/

    http://www.miltonbayer.com/font-face/

    http://sixrevisions.com/css/font-face-guide/


    FOR A PRACTICAL EXAMPLE OF HOW I USED IT in my JA TEMPLATE . . .

    First I utilized FontSquirrel’s @FontFace Generator (http://www.fontsquirrel.com/) 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 . . .


    /* STYLING THE MENU
    -----------------------------------*/
    /* 1st level */
    @font-face {
    font-family: 'League Gothic';
    src: url("../../css/fonts/League_Gothic.eot") format('eot');
    src: local("☺"),
    url("../../css/fonts/League_Gothic.otf"),
    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
    #413814

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

    Regards.

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, 1 month ago.

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