Add font to a specific div in HTML5 and CSS

Question

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.

`@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 '15 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 '15 at 20:57
@BSMP no, no other fonts; I'm using Chrome, lastest version. — Shury, Feb 23 '15 at 21:00
Seems like this ought to be a duplicate of http://stackoverflow.com/questions/107936/how-to-add-some-non-standard-font-to-a-website?rq=1 since the answer shows how to use if for just a paragraph tag. — BSMP, Feb 23 '15 at 21:08
Please add related CSS, the code you provided should work as is http://jsfiddle.net/mj21ksgw/ — Huangism, Feb 23 '15 at 21:14

score 1 · Answer 1 · answered Feb 23 '15 at 20:47

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; 
}

answered Feb 23 '15 at 20:47

Dryden Long

10,072
2
35
47

That's what I was writing.. :) – Ilia Ross Feb 23 '15 at 20:48

score 1 · Answer 2 · answered Feb 23 '15 at 20:51

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;
}

Add font to a specific div in HTML5 and CSS

2 Answers2