CODEWITHSUNDEEP
csshtmlfonts
Shury
Shury

Reputation: 578

Add font to a specific div in HTML5 and CSS

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.

Upvotes: 1

Views: 6580

Answers (2)

Michael Dziedzic
Michael Dziedzic

Reputation: 543

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

Upvotes: 1

Dryden Long
Dryden Long

Reputation: 10182

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

Upvotes: 1

Related Questions