WordPress.org

1. Zappa365
   Member
   Posted 1 year ago #

   Hi,

   I am trying to use the @font- face rule to change the font of my menu text. Here is the CSS I defined in the global stylesheet:

   @font-face {
   	font-family: 'BebasRegular', Arial;
   	src: url('bebas___-webfont.eot');
   	src: local('?'), url('bebas___-webfont.woff') format('woff'), url('bebas___-webfont.ttf') format('truetype'), url('bebas___-webfont.svg#webfontdr2M6MXL') format('svg');
   	font-weight: normal;
   	font-style: normal;
   }

   For my body text and the rest I did this:

   body{
   background:url(images/bg.gif) repeat-x #e9e9e9 fixed;
   font-family:Arial, Helvetica, sans-serif;
   }

   For some reason the @font-face declaration changes all text on the page to the dont.

   Has this happened before/ can anyone help me out please?

2. flamenco
   Member
   Posted 1 year ago #

   Hey Zappa,
   Ah, I was going to ask for a link, but I see a glaring error there. You just told your site to use that new font for everything Arial, and then you have Arial as your main font in the body, and well, that's basically everything! :)

   This is what that one-liner should look like (no Arial):
   font-family: 'BebasRegular';

   Then you simply apply the BebasRegular font to your menu or whatever you want that font to show up on. And again, no one can help with your menu if you don't post a link.

   Cheers, Dave

3. Zappa365
   Member
   Posted 1 year ago #

   Ah!

   didn't know that would cause the problem, error sorted!

   Thanks!

   Can you use @font-face more than once?

   e.g. using two or three different fonts, like one for the menu and one for headings?

4. flamenco
   Member
   Posted 1 year ago #

   You sure can! My fave clients love them some fonts, as some say over here. :) If coded correctly, it's just like having other fonts to choose from besides the typical old standards. I enjoy having other typography choices.

   And with the different file types you have, it looks like you have everything covered, even silly old IE. :)

   Of course, it helps to have some taste in fonts, and a good sense of what goes well together. And I've also found that font file quality varies quite a bit.

   Cufon is a big favorite right now, and many implementations are good. The only obvious caveat on that system is that there is frequently not great support for characters found in non-English languages and special characters.

   Cheers, Dave

5. esmi
   Theme Diva & Forum Moderator
   Posted 1 year ago #

   The Google Font API is better than Cufon, in my opinion. The hosted font list isn't very big right now but it will almost certainly grow.

6. flamenco
   Member
   Posted 1 year ago #

   Esmi,
   Great tip, I hadn't seen that, thanks! I love piggybacking on their stuff when I can. I recall using them a time or two to make stupid IE6 work better.

   Wow, to me, the font list is already quite long, definitely enough to keep me amused, and quite a lot of variety there! Looks very easy to implement, too.

   Glad we talked. :)
   Dave

Topic Closed

This topic has been closed to new replies.