[Resolved] Adding a non-google font

Home Forums Support Adding a non-google font

Viewing 15 posts - 1 through 15 (of 20 total)
  • Author
    Posts
  • #1309511
    Troy

    Hi guys,

    Last month you helped me out with adding a Google Font to a website. Your advice worked perfectly.
    Today I am working on another website and unfortunately I have to use a font which is not a Google Fong. The font is called is called ‘caviar-dreams’.

    I have followed the same method as last time and added the fonts to my Child theme in a fonts folder. However, as the font is not a Google Font, I cannot use the handy Google websfonts helper tool to create the code I need.

    How do I add this font?

    The IP address for your hostfile is 103.27.34.47

    #1309618
    David
    Staff
    Customer Support
    #1310532
    Troy

    Hey David,

    Thanks, all working fine now.

    #1310817
    David
    Staff
    Customer Support
    #1328048
    Troy

    Hi guys,

    Really sorry about this, but strange things are happening with these fonts. I thought this was all fixed as from my computer, I see the fonts as I want to see them.
    However, when I look at the website from any other computer, the font is not the one I have selected.

    I am thinking this is some kind of caching issue and what I am seeing is incorrect. If that is the case, why is the new font not showing to the rest of the world?
    Here is what I see;
    https://www.thepetparcel.com.au/wp-content/uploads/2020/06/Fonts-how-I-see-them-1.png
    https://www.thepetparcel.com.au/wp-content/uploads/2020/06/Fonts-how-i-see-them-2.png

    What I believe you will see is this;
    https://www.thepetparcel.com.au/wp-content/uploads/2020/06/Wrong-Font-as-world-sees.jpeg

    Another issue that I feel is probably related, is the responsiveness of the Image Gallery on the Home page. When I look on a lap top, in full screen, I only see two columns.

    Again, I feel caching is at play here, so how do I make my font appear to the world and gallery respond as it should?

    Thanks

    #1328238
    David
    Staff
    Customer Support

    Did you follow all of this method ( aside from the Google bit ) to add your font ?

    https://docs.generatepress.com/article/adding-local-fonts/

    #1329206
    Troy

    This is so confusing. I think I have, but the process fro non-Google fonts appears to be completely different. The instructions that have come down with the Fontface kit are completely useless and make no reference to where things are supposed to go?
    https://www.thepetparcel.com.au/wp-content/uploads/2020/06/How_to_use_webfonts.html

    #1329242
    Troy

    So I have started all over again and still no luck.
    Where I think I am messing this up is in part 2 and 3 of Font Squirell’s rubbish instructions. This is what is baffling me;

    We’ve already gone ahead and generated the code for you. All you have to do is link to the stylesheet in your HTML, like this:

    <link rel=”stylesheet” href=”stylesheet.css” type=”text/css” charset=”utf-8″ />

    What is this, do I need to edit it this and where does it go?

    Then there is this;
    3. Modify your own stylesheet
    To take advantage of your new fonts, you must tell your stylesheet to use them. Look at the original @font-face declaration above and find the property called “font-family.” The name linked there will be what you use to reference the font. Prepend that webfont name to the font stack in the “font-family” property, inside the selector you want to change. For example:

    p { font-family: ‘MyWebFont’, Arial, sans-serif; }

    Again, what and where does this go?

    Here is a link to the complete FontFace Kit I am using.
    https://www.thepetparcel.com.au/wp-content/uploads/2020/06/webfontkit-20200615-205501.zip
    I used the ‘Optimal’ setting which gave me woff2 and woff formats. Do I also need to add TTF’s

    When I look at my source code I see this;
    <link rel=’stylesheet’ id=’generate-fonts-css’ href=’//fonts.googleapis.com/css?family=caviar-dreams
    But this is not in my style sheet, so where is it getting this from?

    Thanks

    #1329388
    Troy

    Some additional information that may help.

    Today I have also been trying to find answers in the many forums that are out there and came across this
    https://stackoverflow.com/questions/11183154/font-not-working-from-fontsquirrel

    Based on their suggestions, I have tried every configuration I can think of for the ‘url’ but none have been successful. Here is how it has been left now on the style.css;

    @font-face {
    font-family: ‘caviar_dreamsbold’;
    src: url(‘wp-content/themes/generatepress_child/Fonts/caviar_dreams_bold-webfont.woff2’) format(‘woff2’),
    url(‘wp-content/themes/generatepress_child/Fonts/caviar_dreams_bold-webfont.woff’) format(‘woff’);
    font-weight: normal;
    font-style: normal;

    }
    @font-face {
    font-family: ‘caviar_dreamsbold_italic’;
    src: url(‘wp-content/themes/generatepress_child/Fonts/caviardreams_bolditalic-webfont.woff2’) format(‘woff2’),
    url(‘wp-content/themes/generatepress_child/Fonts/caviardreams_bolditalic-webfont.woff’) format(‘woff’);
    font-weight: normal;
    font-style: normal;

    }
    @font-face {
    font-family: ‘caviar_dreamsitalic’;
    src: url(‘wp-content/themes/generatepress_child/Fonts/caviardreams_italic-webfont.woff2’) format(‘woff2’),
    url(‘wp-content/themes/generatepress_child/Fonts/caviardreams_italic-webfont.woff’) format(‘woff’);
    font-weight: normal;
    font-style: normal;

    }
    @font-face {
    font-family: ‘caviar_dreamsregular’;
    src: url(‘wp-content/themes/generatepress_child/Fonts/caviardreams-webfont.woff2’) format(‘woff2’),
    url(‘wp-content/themes/generatepress_child/Fonts/caviardreams-webfont.woff’) format(‘woff’);
    font-weight: normal;
    font-style: normal;

    }

    #1329576
    David
    Staff
    Customer Support

    Looking at your site here is an example of the @font-face CSS:

    @font-face {
        font-family: 'caviar_dreamsbold';
        src: url('wp-content/themes/generatepress_child/Fonts/caviar_dreams_bold-webfont.woff2') format('woff2'),
             url('wp-content/themes/generatepress_child/Fonts/caviar_dreams_bold-webfont.woff') format('woff');
    	     url('wp-content/themes/generatepress_child/Fonts/Caviar_Dreams_Bold-webfont.ttf') format('ttf');
        font-weight: normal;
        font-style: normal;
    
    }

    The second URL for the woff is ending with a ; it needs to be a ,.
    This is the same for every @font-face rule.

    #1329583
    Troy

    Hey David,

    Just corrected that and still no go?
    When you say ‘@fontface Rule, do you mean replace all of the ; with ,

    @font-face {
    font-family: ‘caviar_dreamsregular’,
    src: url(‘wp-content/themes/generatepress_child/Fonts/caviardreams-webfont.woff2’) format(‘woff2’),
    url(‘wp-content/themes/generatepress_child/Fonts/caviardreams-webfont.woff’) format(‘woff’),
    url(‘wp-content/themes/generatepress_child/Fonts/CaviarDreams-webfont.ttf’) format(‘ttf’),
    font-weight: normal,
    font-style: normal,

    }

    Also, I have added the .ttf files as well. Do I need these?

    #1329671
    David
    Staff
    Customer Support

    No – only the second URL so this is how it should look:

    @font-face {
        font-family: 'caviar_dreamsbold';
        src: url('wp-content/themes/generatepress_child/Fonts/caviar_dreams_bold-webfont.woff2') format('woff2'),
             url('wp-content/themes/generatepress_child/Fonts/caviar_dreams_bold-webfont.woff') format('woff'),
    	 url('wp-content/themes/generatepress_child/Fonts/Caviar_Dreams_Bold-webfont.ttf') format('ttf');
        font-weight: normal;
        font-style: normal;
    }
    #1329715
    Troy

    Hey David,
    Done that and still not working. Could something be overriding it?

    @font-face {
    font-family: ‘caviar_dreamsregular’;
    src: url(‘wp-content/themes/generatepress_child/Fonts/caviardreams-webfont.woff2’) format(‘woff2’),
    url(‘wp-content/themes/generatepress_child/Fonts/caviardreams-webfont.woff’) format(‘woff’),
    url(‘wp-content/themes/generatepress_child/Fonts/CaviarDreams-webfont.ttf’) format(‘ttf’);
    font-weight: normal;
    font-style: normal;

    #1329739
    David
    Staff
    Customer Support

    Ok – think we’re almost there.
    Make them the full URLs now. eg.

    @font-face {
        font-family: 'caviar_dreamsbold';
        src: url('https://www.thepetparcel.com.au/wp-content/themes/generatepress_child/Fonts/caviar_dreams_bold-webfont.woff2') format('woff2'),
             url('https://www.thepetparcel.com.au/wp-content/themes/generatepress_child/Fonts/caviar_dreams_bold-webfont.woff') format('woff'),
    	 url('https://www.thepetparcel.com.au/wp-content/themes/generatepress_child/Fonts/Caviar_Dreams_Bold-webfont.ttf') format('ttf');
        font-weight: normal;
        font-style: normal;
    
    }
    #1329765
    Troy

    Hey David,

    I tried that trick earlier, but had no luck. Nevertheless, I have added it again to them all, but still not working?

    @font-face {
    font-family: ‘caviar_dreamsregular’;
    src: url(‘https://www.thepetparcel.com.au/wp-content/themes/generatepress_child/Fonts/caviardreams-webfont.woff2&#8217;) format(‘woff2’),
    url(‘https://www.thepetparcel.com.au/wp-content/themes/generatepress_child/Fonts/caviardreams-webfont.woff&#8217;) format(‘woff’),
    url(‘https://www.thepetparcel.com.au/wp-content/themes/generatepress_child/Fonts/CaviarDreams-webfont.ttf&#8217;) format(‘ttf’);
    font-weight: normal;
    font-style: normal;

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