Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • December 12, 2013 at 8:12 pm #199586
    jaroljmek

    Hi!

    Sorry to ask this – I should know.

    How can I install a font into the theme. I want to install both a Google Web Font and a non-Google Font, i.e. Century Gothic.

    I guess I upload to a directory then change a style sheet somewhere….

    I can’t find direct instructions.

    Thanks very much!!

    December 12, 2013 at 9:40 pm #199628
    Yigit

    Hey jaroljmek!

    Please refer to Ismael’s post here https://kriesi.at/support/topic/best-way-to-call-new-google-font-stylesheet/#post-195682
    and here http://premium.wpmudev.org/blog/adding-custom-fonts-to-wordpress-with-font-face-and-css/

    Regards,
    Yigit

    December 16, 2013 at 6:43 pm #200740
    jaroljmek

    Hey there!

    Thanks for that. It’s all making sense:

    1. I guess I need a clean copy of the font that has the correct .ttf or .otf extension

    2. I’m a bit unclear about the correct URL. It’s the beginning bit. If I’ve installed the font file via FTP among my WP files, should the URL start?

    http://www.mysite.com/wp-content/theme/etc….

    Thanks!

    December 16, 2013 at 11:28 pm #200833
    jaroljmek

    Hi again!

    I’ve tried with a couple of different fonts but I can’t seem to call them up.

    Here is my CSS:

    @font-face{
    font-family: ‘Arvo-Regular’;
    src:url(‘http://www.celadonsamui.com/wp-content/themes/enfold/fonts/Arvo-Regular.ttf’) format (“truetype”);
    }
    .h2 {font-family: ‘Arvo-Regular’;}

    I have uploaded the font file via ftp Transmit into a file called fonts in this location /wp-content/themes/enfold/fonts/Arvo-Regular.ttf

    Can you help? Is my url incorrect or my css?

    Thanks very much!

    December 17, 2013 at 2:38 am #200908
    Ismael

    Hi!

    Arvo is a google font. You can actually add this on your functions.php to add the font:

    add_filter( 'avf_google_heading_font',  'avia_add_heading_font');
function avia_add_heading_font($fonts)
{
$fonts['Arvo'] = 'Arvo';
return $fonts;
}

add_filter( 'avf_google_content_font',  'avia_add_content_font');
function avia_add_content_font($fonts)
{
$fonts['Arvo'] = 'Arvo';
return $fonts;
}

    Use this:

    h2 { font-family: ‘Arvo’, serif; }

    Cheers!
    Ismael

    December 20, 2013 at 1:01 am #202324
    jaroljmek

    Oh hi Ismael!

    Thanks for the reply – I thought I’d sent another reply.

    I’m actually planning to use a non-google font. I was just trying Arvo as a random font test.

    Whichever font I upload I can’t get a result. Currently I’m trying Garamond:

    @font-face{
    font-family: ‘Garamond Premier Pro’;
    src:url(‘http://www.celadonsamui.com/wp-content/themes/enfold/fonts/GaramondPremrPro.otf’) format (“opentype”);
    }
    h2 {font-family: ‘Garamond Premier Pro’;}

    Is it my CSS or my URL that’s incorrect? I’ve uploaded the font file via Transmit into the Enfold theme folder. Must be doing something wrong.

    Thanks very much!!

    December 20, 2013 at 6:20 am #202437
    Ismael

    Hey!

    Please use this on your custom.css or Quick CSS:

    @font-face{
font-family: Garamond Premier Pro;
src: url('http://www.celadonsamui.com/wp-content/themes/enfold/fonts/GaramondPremrPro.otf') format ('opentype');
}

h2 {font-family: Garamond Premier Pro;}

    Best regards,
    Ismael

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)
  • The topic ‘How to install fonts’ is closed to new replies.