Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

I want to add a custom font into my theme. Please let me know if this is just as simple as uploading the font to a new folder named "fonts" and then changing the css and renaming the font-family property there or it's somewhat different procedure. I am not sure about it. Please help me.

share|improve this question

3 Answers 3

up vote 2 down vote accepted

To use a custom font, simply upload the font to your theme folder and then add a CSS @font-face declaration to the top of your theme's style.css file pointing to the new font:

@font-face {
font-family: CustomFont;
src: url('CustomFont.ttf');
}

You can then reference that custom font in other CSS styles, for example:

.entry-content { font-family: "CustomFont", sans-serif; }
share|improve this answer
    
I wouldn't recommend the use of truetype/ttf fonts –  Tom J Nowell Sep 5 at 17:05

Since nowadays you can find the best fonts on Google-fonts (..and there's no better CDN than the google network), I think the best solution is to import it from them.

The best for doing this is adding a function that hooks to wp_head hook,

to functions.php add

function your_fonts() {
    $protocol = is_ssl() ? 'https' : 'http';
    wp_enqueue_style( 'opensans', "$protocol://fonts.googleapis.com/css?family=Open+Sans" );}
add_action( 'wp_enqueue_scripts', 'your_fonts' );//trigger your_fonts
share|improve this answer

I think its best to upload your font file to a web font generator.

After downloading the font kit, you can upload the unzipped folder to your themes root directory and rename it to fonts.

Then you can use the @font-face CSS from the style sheet in the kit to link to your font files in your parent or child themes style.css file.

@font-face {
    font-family: 'christmasevemedium';
    src: url('fonts/christmaseve-webfont.eot');
    src: url('fonts/christmaseve-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/christmaseve-webfont.woff') format('woff'),
         url('fonts/christmaseve-webfont.ttf') format('truetype'),
         url('fonts/christmaseve-webfont.svg#christmasevemedium') format('svg');
    font-weight: normal;
    font-style: normal;

}

After this, it is simply a matter of using the new font-family name in your CSS rules in your style.css file.

h1 {
    font-family: 'christmasevemedium';
}

Adding Google fonts is different and can be done using a variety of methods, PHP being the most efficient and flexible via your functions.php file:

add_action( 'wp_enqueue_scripts', 'wpsites_google_fonts' );
function wpsites_google_fonts() {
    wp_enqueue_style( 'google-fonts', '//fonts.googleapis.com/css?family=Lato:300,700', array(), CHILD_THEME_VERSION );
}
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.