Renaming fonts (to use locally)

[Max]

Hi there,

I am using the latest GP Premium and WP.
I want to host fonts locally (I chose the media gallery option of the tutorial) and found this thread where Tom talks about renaming a google font in order to avoid issues:
https://generatepress.com/forums/topic/force-locally-hosted-fonts/page/2/?bbp_reply_to=841526&_wpnonce=abdcebdc6e

However, the thread does not explain how to rename the font. I looked around on the web but did not find a satisfying answer. Some people write you should simply change the file name before uploading the font. Others recommend a tool like fontforge. Can you tell me how to rename the font (in my case it is lato) in order to avoid mixups with the according font which is being called from google?

Or would would simply changing the name of the uploaded file (in the media gallery editor) from
lato-v16-latin-ext_latin-100italic
to
lato-custom-v16-latin-ext_latin-100italic
be enough?
The rest (changing the CSS and php entries) I know.

Thank you and best wishes

[Tom]

Hi there,

You don’t actually have to rename the file itself.

The important part is changing the name of the font-family in your @font-face CSS.

You can name that font-family whatever you want, and then match it in your filter you add to add the font to the Customizer.

Let me know if you need more info 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Max]

Hi Tom,

Ok, so I changed the font-family name into lato-custom both in the CSS and php filter. This is what it looks like now (for one variant) – I replaced the name of my web address with URL – just for this post:

@font-face {
  font-family: 'Lato-custom';
  font-style: normal;
  font-weight: 100;
  src: local('Lato Hairline'), local('Lato-Hairline'),
       url('URL/wp-content/uploads/2020/02/lato-v16-latin-ext_latin-100.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('URL/wp-content/uploads/2020/02/lato-v16-latin-ext_latin-100.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

“Lato-Custom” shows up as a system font but the first thing I noticed was that I am unable to choose the other variants unlike with the webfont lato. I also changed the local source to “Lato-Custom Hairline” (in this case). But that did not change anything either.
See the attached screenshots.
Lato web
Lato-custom local

The “variants” box is simply missing.
Edit: I changed it to “Latocustom” (thought the Hyphen might have been an issue) but no change.

[Tom]

The variants option is only for fonts hosted with Google. Basically, they tell Google to include extra @font-face calls for all of the selected variants.

In this case, you’re adding your own @font-face calls, so you need to manually add new ones for each and every variant you wish to include on the site.

Let me know if you need more info 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Max]

That and this thread explain a lot! Thank you.

I added the local fonts and things seem to work out well.
However, I noticed one issue:

I tried to upload the according ttf file. Already the last time I noticed that the php filter (for uploading files into the media gallery) you provided does not seem to work for ttf files (anymore). So, once I tried to upload the file I get the error message:

“source-serif-pro-v7-latin-ext_latin-regular.ttf” has failed to upload.
Sorry, this file type is not permitted for security reasons.

Also, would it be all right to keep this thread open until I made all of the local fonts work completely? There might be some followup questions.

[Tom]

Just to confirm, is this filter still active?: https://docs.generatepress.com/article/adding-local-fonts/#uploading-our-font

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Max]

Yes. I ticked the box “Run snippet everywhere”.

[Tom]

That’s strange, not sure what could cause that.. How did you create the ttf? Using the tool in the article?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Max]

Exactly – I used the google webfont helper. Just tried it with another font (freshly downloaded) but that did not work either. I could upload all of the other file types without any issues.

Oh and a followup question to my original topic: How do I actually confirm that no google fonts are being called from their web servers? David mentioned something about seeing cached google fonts in this post: https://generatepress.com/forums/topic/force-locally-hosted-fonts/?bbp_reply_to=841526&_wpnonce=abdcebdc6e
Basically I want to check whether and make sure that my whole website is only loading local fonts (including plugins).

[Tom]

You may need to upload the files manually using a File Manager provided by your hosting. You can just upload them into a fonts folder in your child theme.

You could view your site source and search for googleapis to see if a request to Google exists.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Max]

Hi Tom!
In case it is needed I will upload them manually.
I checked every search box in the inspector I could find but googleapis did not pop up anywhere. Could you tell me what you meant with “source” precisely?

[Tom]

If Google your browser name + View Source, you should find specific instructions. It’s a page full of code you can ctrl + F to look through 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Max]

Thank you – that was a very useful hint.
So there is no googleapis but there are still fonts being shown which can only be loaded via googleapis, namely and only Lato and Source Serif Pro. They were formerly used by a plugin but the devs tweaked it in order for the plugin to not call fonts from google anymore.
Is there a chance that this is just some residue CSS code or do those fonts in the source code mean that they are still being called from Google’s servers?

As an example: On the homepage and frontend (using the inspector): The title of the entity of the plugin which shows the “old” font Source Serif Pro in the source code is being displayed correctly in the local font (Source Serif Pro600). However, the original (old) font is still there but crossed. Underneath the correct local font (Source Serif Pro600) is being displayed. I reckon that this is responsible for the respective font to pop up in the source code.

Here is a screenshot of the inspector window.
And here one of the part in the source code.

[Tom]

It could be cached? Or maybe the CSS is coming from another source? It’s hard to tell, unfortunately.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Max]

Ok. It should not be a cache problem – I double-checked that. But can you say for certain that fonts from the google servers are not being called if no googleapis entry can be found in the source code?

[Author]

Posts