How to add a custom font in a theme

2 Views

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.

Post Views: 2

Related posts

Leave a Reply

4 comments

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

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

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