1

I have a font font.tff and want to add it to the following html code. I want to add it only to the menu, @font-face I saw it changes the font to all the text. How can I add it with CSS? Thank you.

<div id="menu">
  <ul>
    <li>menu 1</li>
    <li>menu 2</li>
    <li>menu 3</li>
    <li>menu 4</li>
    <li>menu 5</li>
  </ul>
</div>

I used the following:

<style>
    @font-face {
      font-family: "Your typeface";
                   src: url("ffan.tff");
    }
    #menu { 
      font-family: "Your typeface";
    }
</style>

but doens't modify anything.

6
  • @font-face just includes the font but doesn't change the font of all the text unless you set that on a class definition ..... so you need font-face and after do #menu li { font-family: 'yourfont'}
    – DaniP
    Feb 23, 2015 at 20:46
  • Are there any styles on the ul or li tags specifying a different font? Also be sure the browser you're using recognizes 'tff'.
    – BSMP
    Feb 23, 2015 at 20:57
  • @BSMP no, no other fonts; I'm using Chrome, lastest version.
    – Shury
    Feb 23, 2015 at 21:00
  • Seems like this ought to be a duplicate of stackoverflow.com/questions/107936/… since the answer shows how to use if for just a paragraph tag.
    – BSMP
    Feb 23, 2015 at 21:08
  • Please add related CSS, the code you provided should work as is jsfiddle.net/mj21ksgw
    – Huangism
    Feb 23, 2015 at 21:14

2 Answers 2

1

You could do something like this:

@font-face {
  font-family: "Your typeface";
  src: url("type/filename.eot");
  url("type/filename.woff") format("woff"),
  url("type/filename.otf") format("opentype"),
  url("type/filename.svg#filename") format("svg");
}

#menu { 
  font-family: "Your typeface", Georgia, serif; 
}
1
  • That's what I was writing.. :)
    – Ilia Ross
    Feb 23, 2015 at 20:48
1

With @font-face, you specify a font that you can use on your page, but you don't have to use it everywhere.

@font-face {
  font-family: "myFirstFont";
  src: url("type/filename.eot");
  url("type/filename.woff") format("woff"),
  url("type/filename.otf") format("opentype"),
  url("type/filename.svg#filename") format("svg");
}

For instance, you can specify fonts for the body:

body {
    font-family: 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', Geneva, Verdana, sans-serif; 
}

And still use myFirstFont on the menu:

#menu {
    font-family: myFirstFont;
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.