[Resolved] Adding a non-google font

[Bob]

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

[David]

Hi there,

simplest way is to use a service like either of these:

https://www.fontsquirrel.com/tools/webfont-generator
https://transfonter.org

[Bob]

Hey David,

Thanks, all working fine now.

[David]

You’re welcome

[Bob]

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

[David]

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

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

[Bob]

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

[Bob]

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

[Bob]

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;

}

[David]

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.

[Bob]

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?

[David]

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

[Bob]

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;

[David]

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;

}

[Bob]

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;

[Author]

Posts