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

Be Sociable, Share!

•