@ Font- Face changing all fonts on page , help please!

  • Zappa365

    (@zappa365)


    13 years, 3 months 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?

Viewing 5 replies - 1 through 5 (of 5 total)
  • flamenco

    (@flamenco)

    13 years, 3 months 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

    Thread Starter Zappa365

    (@zappa365)

    13 years, 3 months 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?

    flamenco

    (@flamenco)

    13 years, 3 months 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

    esmi

    (@esmi)

    13 years, 3 months 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.

    flamenco

    (@flamenco)

    13 years, 3 months 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

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘@ Font- Face changing all fonts on page , help please!’ is closed to new replies.