Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #999016

    (I’m using Enfold v.4.4.1 and have imported the Enfold App demo.)

    1ST QUESTION
    Primarily, I would like to change the font subsets loaded by the “google webfont font replacement” script. Currently it loads using this Google API call:
    fonts.googleapis.com/css?family=Quicksand%7COpen+Sans:400,600
    but this doesn’t load the bold version of Quicksand and I would also like to use for Open Sans bold the version with weight 700.
    Q: How can I change the above call to:
    fonts.googleapis.com/css?family=Quicksand:300,500%7COpen+Sans:400,700

    2ND QUESTION
    The “google webfont font replacement” script checks if it is allowed to load fonts from Google based on the value of a cookie. If the user doesn’t accept the cookie, the website will render with other fonts which I don’t want to.
    Q: After importing Quicksand and Open Sans fonts, how can I make sure that the website will always use them and not something that the site might not be allowed to get from Google? For Open Sans in particular, there is an extra problem: after importing the font using a zip file from Google Fonts, the font-family is registered as “open-sans” which would make it unusable. How can I change this to “Open Sans” (which is used by CSS)?

    Thanks in advance for your help!

    • This topic was modified 6 years, 4 months ago by ykaralis.
    #999220

    Hey ykaralis,

    1) You can use this code to overwrite the default font configuration:

    
    add_filter( 'avf_google_heading_font',  'avia_add_content_font');
    add_filter( 'avf_google_content_font',  'avia_add_content_font');
    function avia_add_content_font($fonts)
    {
        $fonts['Open Sans'] = 'Open Sans:400,600';
        $fonts['Quicksand'] = 'Quicksand:300,400';
        return $fonts;
    }
    

    Replace the values (400,600 and 300,400) with your custom values; multiple values can be separated with a comma. You can add this code to your child theme functions.php.

    2)

    After importing Quicksand and Open Sans fonts, how can I make sure that the website will always use them and not something that the site might not be allowed to get from Google? For Open Sans in particular, there is an extra problem: after importing the font using a zip file from Google Fonts, the font-family is registered as “open-sans” which would make it unusable.

    As soon as you import a font file Enfold will only use the local font files (saved on your server) and won’t load the files from a google server. I.e. if you import the open sans font files Enfold generates following css code and adds it to the dynamical styleheet:

    
    @font-face{
    font-family:'open-sans';
    src:url('https://mywebite.com/wp-content/uploads/avia_fonts/type_fonts/open-sans/opensans-bold.ttf') format('truetype');
    font-style:normal;
    font-weight:700;
    }
    
    @font-face{
    font-family:'open-sans';
    src:url('https://mywebite.com/wp-content/uploads/avia_fonts/type_fonts/open-sans/opensans-bolditalic.ttf') format('truetype');
    font-style:italic;font-weight:700;
    }
    
    @font-face{
    font-family:'open-sans';
    src:url('https://mywebite.com/wp-content/uploads/avia_fonts/type_fonts/open-sans/opensans-extrabold.ttf') format('truetype');
    font-style:normal;
    font-weight:800}
    
    @font-face{
    font-family:'open-sans';
    src:url('https://mywebite.com/wp-content/uploads/avia_fonts/type_fonts/open-sans/opensans-extrabolditalic.ttf') format('truetype');
    font-style:italic;
    font-weight:800;
    }
    
    @font-face{
    font-family:'open-sans';
    src:url('https://mywebite.com/wp-content/uploads/avia_fonts/type_fonts/open-sans/opensans-italic.ttf') format('truetype');
    font-style:italic;
    font-weight:400;
    }
    
    @font-face{
    font-family:'open-sans';
    src:url('https://mywebite.com/wp-content/uploads/avia_fonts/type_fonts/open-sans/opensans-light.ttf') format('truetype');
    font-style:normal;
    font-weight:300;
    }
    
    @font-face{
    font-family:'open-sans';
    src:url('https://mywebite.com/wp-content/uploads/avia_fonts/type_fonts/open-sans/opensans-lightitalic.ttf') format('truetype');
    font-style:italic;
    font-weight:300;
    }
    
    @font-face{
    font-family:'open-sans';
    src:url('https://mywebite.com/wp-content/uploads/avia_fonts/type_fonts/open-sans/opensans-regular.ttf') format('truetype');
    font-style:normal;
    font-weight:400;
    }
    
    @font-face{
    font-family:'open-sans';
    src:url('https://mywebite.com/wp-content/uploads/avia_fonts/type_fonts/open-sans/opensans-semibold.ttf') format('truetype');
    font-style:normal;
    font-weight:600;
    }
    
    @font-face{
    font-family:'open-sans';
    src:url('https://mywebite.com/wp-content/uploads/avia_fonts/type_fonts/open-sans/opensans-semibolditalic.ttf') format('truetype');
    font-style:italic;
    font-weight:600;
    }
    

    This code is generated automatically based on the google fonts zip file you uploaded. You can’t modify the code but you could overwrite it with custom css code.

    Best regards,
    Dude

Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.