[Resolved] Renaming fonts (to use locally)

Home Forums Support Renaming fonts (to use locally)

Viewing 15 posts - 1 through 15 (of 18 total)
  • Author
    Posts
  • #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=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

    #1161106
    Tom
    Lead Developer
    Lead Developer

    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 🙂

    #1161612
    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.

    #1162121
    Tom
    Lead Developer
    Lead Developer

    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 🙂

    #1162634
    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.

    #1163139
    Tom
    Lead Developer
    Lead Developer
    #1163335
    Max

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

    #1163606
    Tom
    Lead Developer
    Lead Developer

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

    #1163774
    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).

    #1164309
    Tom
    Lead Developer
    Lead Developer

    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.

    #1168472
    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?

    #1168683
    Tom
    Lead Developer
    Lead Developer

    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 🙂

    #1187129
    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.

    #1187508
    Tom
    Lead Developer
    Lead Developer

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

    #1188497
    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?

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