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...

About Michael Bohatch - SimpleInbound

Michael Bohatch has been involved with SEO and Inbound Marketing since its inception. Michael provides professional services that combine his experience in Web Analytics, SEM, SEO and Inbound Marketing for a comprehensive strategic approach to web optimization. SimpleInbound.com is an advice blog where he documents some of his findings and advises others on industry updates.
This entry was posted in Wordpress and tagged , , , , . Bookmark the permalink.
If you would like to stay current on our Inbound Marketing Techniques, make sure to:
Subscribe to the RSS Feed!

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

  1. page one seo says:

    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!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>