Public Forums 71,145 posts

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#168235

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.

Hope this has been of some use and benefit for you.

🙂

TOM

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#411053

With more and more “alternative / non-traditional web fonts” being used in templates these days, I’m thinking more of you may want to know about this very easy method to utilize most any font you want . . . . so, BUMP.

🙂

[thatcomputerdude Friend thatcomputerdudeJoin date: December 2008Posts: 280Downloads:0Uploads:9 Thanks: 67 Thanked: 32 times in 1 posts]

#411054

I’m having no luck getting this to work with Internet Explorer and basically did exactly what you did.. Have you run into any problems with the font not showing up in Internet Explorer?

Works fine with FF, Safari and Chrome.

[thatcomputerdude Friend thatcomputerdudeJoin date: December 2008Posts: 280Downloads:0Uploads:9 Thanks: 67 Thanked: 32 times in 1 posts]

#411055

I figured it out – I had to tweak a line of code for IE, here is my new @font-face code


@font-face {
font-family: 'BebasRegular';
src: url('../../css/fonts/BEBAS___-webfont.eot');
src: url('../../css/fonts/BEBAS___-webfont.eot?iefix') format('eot'),
url('../../css/fonts/BEBAS___-webfont.woff') format('woff'),
url('../../css/fonts/BEBAS___-webfont.ttf') format('truetype'),
url('../../css/fonts/BEBAS___-webfont.svg#webfontSRj8j0PE') format('svg');
font-weight: normal;
font-style: normal;

}


[Author]

Posts