WordPress: How to Add a Custom Font to your Twenty Ten WordPress Menu?

Note: using example font “bebasneue” for this tutorial

1- create a font folder in your theme’s folder, call it “fonts
(should reside next to your styles.css file)

2- upload and convert your font to the 4 different formats per this link:

http://www.fontsquirrel.com/fontface/generator

3- Now upload your 4 fonts to the font folder you created in step #1

4 – Find this section in your styles.css file

/* =Menu
————————————————————– */

5- Add this CSS code (should look like this)   (though you’ll want to swap in your font info)

/* =Menu
————————————————————– */

@font-face {
    font-family: ‘bebasneue’;
    src: url(‘fonts/bebasneue-webfont.eot?#iefix’) format(’embedded-opentype’),
         url(‘fonts/bebasneue-webfont.woff’) format(‘woff’),
         url(‘fonts/bebasneue-webfont.ttf’)  format(‘truetype’),
         url(‘fonts/bebasneue-webfont.svg#svgFontName’) format(‘svg’);
    }

6- Now scroll down till you see this section of code (still in your styles.css file)

#access a {
color: #D5D3BC;
display: block;
line-height: 46px;
padding: 0 9px;
text-decoration: none;
}

7– Add this line to it:

font-family: bebasneue;

8- Should be similar to this:

#access a {
    color: #D5D3BC;
    display: block;
    line-height: 46px;
    padding: 0 9px;
    text-decoration: none;
    font-family: bebasneue;
}

9- That’s it – SAVE

 

Related Posts Plugin for WordPress, Blogger...

One thought on “WordPress: How to Add a Custom Font to your Twenty Ten WordPress Menu?”

  1. Ah! I take a short cutoff from the blogging world and come back to
    find that you have become amazing?! Wow, times have changed!
    Keep up the superb work!

Comments are closed.