Joomla Templates Club 406,261 posts

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

#157693

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

4 users say Thank You to TomC for this useful post

1. Menalto
2. thatcomputerdude
3. scotty
4. digimouse

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

#370499

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]

#380936

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]

#380941

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;

}


[irfandi Friend irfandiJoin date: July 2011Posts: 94Downloads:0Uploads:42 Thanks: 43 Thanked: 2 times in 1 posts]

#430689

the fontsquirrel.com doesn’t work…

---

Attachments:

1. 

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

#430748

<em>@irfandi 290491 wrote:</em><blockquote>
the fontsquirrel.com doesn’t work…</blockquote>
I am guessing this is an issue related to your particular browser configurations.
I just brought up the site no problem.

1 user says Thank You to TomC for this useful post

1. irfandi

[dieudonne Friend dieudonneJoin date: January 2011Posts: 947Downloads:61Uploads:266 Thanks: 452 Thanked: 107 times in 3 posts]

#482520

Thanks.

And can you provide a little tuto : “how to work with font in .less file ?”
It’ll be great.

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#482646

Hi,

Please make your concern about font in Less clearer, how you want to achieve. Here is good reference to know about Less & Bootstrap:

http://twitter.github.com/bootstrap/base-css.html

http://lesscss.org/

[Author]

Posts