- This topic has 17 replies, 2 voices, and was last updated 2 years, 10 months ago by
Tom.
-
AuthorPosts
-
February 10, 2020 at 8:56 am #1160798
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=abdcebdc6eHowever, 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
February 10, 2020 at 3:13 pm #1161106Tom
Lead DeveloperLead DeveloperHi 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-developmentFebruary 11, 2020 at 4:27 am #1161612Max
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 localThe “variants” box is simply missing.
Edit: I changed it to “Latocustom” (thought the Hyphen might have been an issue) but no change.February 11, 2020 at 9:34 am #1162121Tom
Lead DeveloperLead DeveloperThe 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-developmentFebruary 12, 2020 at 2:28 am #1162634Max
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.
February 12, 2020 at 8:27 am #1163139Tom
Lead DeveloperLead DeveloperJust 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-developmentFebruary 12, 2020 at 10:58 am #1163335Max
Yes. I ticked the box “Run snippet everywhere”.
February 12, 2020 at 5:46 pm #1163606Tom
Lead DeveloperLead DeveloperThat’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-developmentFebruary 13, 2020 at 1:56 am #1163774Max
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).February 13, 2020 at 8:35 am #1164309Tom
Lead DeveloperLead DeveloperYou 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-developmentFebruary 17, 2020 at 12:35 pm #1168472Max
Hi Tom!
In case it is needed I will upload them manually.
I checked every search box in the inspector I could find butgoogleapis
did not pop up anywhere. Could you tell me what you meant with “source” precisely?February 17, 2020 at 7:45 pm #1168683Tom
Lead DeveloperLead DeveloperIf 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-developmentMarch 6, 2020 at 7:45 am #1187129Max
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 onlyLato
andSource 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.March 6, 2020 at 6:02 pm #1187508Tom
Lead DeveloperLead DeveloperIt 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-developmentMarch 8, 2020 at 5:03 am #1188497Max
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?
-
AuthorPosts
- You must be logged in to reply to this topic.