How to add a custom font in a theme

admin管理员组

文章数量:1391981

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.

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.

• add-theme-support

Share Improve this question edited Sep 5, 2014 at 17:13 Brad Dalton 6,98522 gold badges3636 silver badges4747 bronze badges asked Oct 6, 2012 at 4:53 user1666698user1666698 3544 silver badges1111 bronze badges 1

• Helps to add google web font on editor- kvcodes/2014/05/… – Kvvaradha Commented Oct 9, 2016 at 9:05

Add a comment  | 

4 Answers 4

Sorted by: Reset to default 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; }

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/css?family=Lato:300,700', array(), CHILD_THEME_VERSION );
}

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/css?family=Open+Sans" );}
add_action( 'wp_enqueue_scripts', 'your_fonts' );//trigger your_fonts

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/virtual-support/use-any-font.php

本文标签： How to add a custom font in a theme