2

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.

1

4 Answers 4

2

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; }
1
  • I wouldn't recommend the use of truetype/ttf fonts
    – Tom J Nowell
    Commented Sep 5, 2014 at 17:05
2

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

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
0

The alternative is to try with Use Any Font plugin. Note that you can add only one custom font for free. For detailed instructions, please follow video tutorial that we found here http://dnesscarkey.com/virtual-support/use-any-font.php

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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