This topic has 3 replies, 2 voices, and was last updated 9 years by Radu.

  • Author
  • #82312
     fullworksmedia
    Participant

    hey there,

    I’d like to add a custom font which I have it as a ttf file. Is that possible? How can I do that?

     

    Thanks,

    Adam

     

    #82470
     Radu
    Moderator

    Hi,

    You have to create a webfont library from that ttf file and you will also manually include that library in the theme. After that you will also need to create all the custom styling rules to change font in the desired elements.

    Tutorial : http://wpsites.net/web-design/custom-fonts-wordpress-font-face-generator/

    Cheers

    Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution
    #82775
     fullworksmedia
    Participant

    hey Radu,
    I’ve created a webfont, but the rest of your message doesn’t give me any concrete answers.

    Let me comment your answers:

    1. manually include that library in the there – HOW TO DO THAT?
    2. After that you will also need to create all the custom styling rules – HOW DO I DO THAT? COULD YOU THROW AN EXAMPLE? HOW CAN I DO IT ON THE CHILD THEME?

    Many thanks,
    Adam

    #83214
     Radu
    Moderator

    Hi,

    Just look at the tutorial to understand the logic. ( https://www.youtube.com/watch?v=y9EYPmJRIAM )

    After you upload your custom font to http://www.fontsquirrel.com/tools/webfont-generator then press download your kit.

    Unzip that package then put the content of the unzipped pack to a folder named customfonts, then
    upload the entire director ( customfonts ) to wp-content/themes/kleo-child/

    Then you need load the stylesheet in the theme

    Add this code to your kleo-child/functions.php

    COPY CODE
    
    function theme_name_scripts() {
    	wp_enqueue_style( 'style-name', get_stylesheet_uri(). '/customfonts/stylesheet.css' );
    }
    add_action( 'wp_enqueue_scripts', 'theme_name_scripts' );
    

    Then you need to set in CSS the font family for your font.

    COPY CODE
    
    h1 {font-family:'YourFontFamilyName';}
    

    Hope it helps

    Cheers

    Radu

    Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution
Viewing 4 posts - 1 through 4 (of 4 total)

The forum ‘Bugs & Issues’ is closed to new topics and replies.

Log in with your credentials

Forgot your details?