[Resolved] Uploading a Nongoogle font to GP Child theme

Home Forums Support Uploading a Nongoogle font to GP Child theme

Viewing 15 posts - 1 through 15 (of 27 total)
  • Author
    Posts
  • #1461075
    angelarose

    Hi!

    I am trying to upload a nongoogle font to my GP child theme. I read the GP documentation on adding https://docs.generatepress.com/article/adding-local-fonts/ and added the php code to my php folder in my child theme but unsure what to do next. I read also on another forum topic that I had to add a fonts folder but not confident in how to go about doing that. Thank you!

    #1461201
    Leo
    Staff
    Customer Support

    Hi there,

    Which step are you stuck on?

    It should work if you follow the exact steps in the linked article.

    #1461217
    angelarose

    So i added this code: https://ibb.co/T2NJxt9 to my child theme: https://ibb.co/3CQbzXw . It says its best to remove that code once done but I’m not sure exactly as to when to do that precisely? Also, In the CSS, I don’t see a field for the folder prefix to upload the url that I took from the previous step on the documentation. This is the CSS of my child theme: https://ibb.co/HFGqFc0 , https://ibb.co/vmQbCfm Thank you!

    #1461443
    Elvin
    Customer Support

    Hi,

    It says its best to remove that code once done but I’m not sure exactly as to when to do that precisely?

    You can remove it when you’ve already uploaded the font files on your media library. The codes purpose is to allow you to upload the font files since the default WordPress settings doesn’t allow you to upload font files on the media library.

    Also, In the CSS, I don’t see a field for the folder prefix to upload the url that I took from the previous step on the documentation.

    Is this the step you’re having troubles with? https://docs.generatepress.com/article/adding-local-fonts/#using-font-face

    You have to write the code and change the url() part to the url of the fonts you’ve uploaded. This step’s purpose for setting the import reference of fonts so we can use them on our CSS styling.

    That said, your child theme’s CSS should contain @font-face {...} codes.

    A wise man once said:
    "Have you cleared your cache?"

    #1461454
    angelarose

    @font-face is where I am getting stuck. My child theme’s CSS is empty. It does not contain the @font-face so I don’t know what to do then.

    #1461459
    Elvin
    Customer Support

    Perhaps you missed the tool on this part. https://docs.generatepress.com/article/adding-local-fonts/#downloading-our-font

    This is the tool link. – https://google-webfonts-helper.herokuapp.com/fonts

    The tool generates a @font-face code for you.

    The prefix asked on the tool is basically the font’s file url minus the file name as mentioned here.
    https://docs.generatepress.com/article/adding-local-fonts/#uploading-our-font

    A wise man once said:
    "Have you cleared your cache?"

    #1461474
    angelarose

    Thank you! I’m looking to upload the Vogue font https://www.fontmirror.com/vogue , but when I search it using the tool link I can’t find it to then generate the @font-face code.

    #1461477
    Elvin
    Customer Support

    Oh right, its not included as that font isn’t a Google font.

    I believe this is the same one? https://www.cufonfonts.com/font/vogue

    And this source may be better as its using web font format and it included a css code for you.

    @font-face {
    font-family: 'Vogue Regular';
    font-style: normal;
    font-weight: normal;
    src: local('Vogue Regular'), url('Vogue.woff') format('woff');
    }

    just change the url('') to the file URL of the font uploaded on your media library similar to the example shown here. Example: url('https://www.yoursite.com/uploads/2020/09/Vogue.woff')

    A wise man once said:
    "Have you cleared your cache?"

    #1461479
    angelarose

    yes that is thank yOU!Added that to the child css, would “vogue” then appear as a typography option when using generateblocks and also as a typography option when using the customizer? I tried changing the headline typography in the customizer but “Vogue” did not appear as an option.

    #1461480
    Elvin
    Customer Support

    yes that is thank yOU!! Will try it

    Let us know if it works.:)

    A wise man once said:
    "Have you cleared your cache?"

    #1461500
    angelarose

    Added that to the child css, would “vogue” then appear as a typography option when using generateblocks and also as a typography option when using the customizer? I tried changing the headline typography in the customizer but “Vogue” did not appear as an option.

    Also tried adding this font (from cufonfonts too) following the same steps. But when i click on typography, both of these fonts don’t appear. Here is the css folder: https://ibb.co/pPwXf7y

    Thanks 🙂

    #1461504
    Elvin
    Customer Support

    Your URL is incorrect. It doesn’t point to the file.

    To be 100% sure if you’re adding the correct URL, just search of the font file on the media library and copy its file url like in this example.

    copy url

    A wise man once said:
    "Have you cleared your cache?"

    #1461506
    angelarose

    THis is the media file I have https://ibb.co/7rY8c0d I copied where it says “Fire Url”

    #1461507
    angelarose

    https://helloangelarose.com/wp-content/uploads/2020/09/east-liberty-signature.woff Is this it? I thought I had read that I needed to cut the last part off from thedocumentation but do I just add the entire url without removing anything?

    #1461514
    Elvin
    Customer Support

    https://helloangelarose.com/wp-content/uploads/2020/09/east-liberty-signature.woff

    That file URL is for your East Liberty Signature font.

    You need the file url for your Vogue.woff font file which will probably look like https://helloangelarose.com/wp-content/uploads/2020/09/Vogue.woff

    Meaning the url() setting should be something like this.:
    url('https://helloangelarose.com/wp-content/uploads/2020/09/Vogue.woff')

    Is this it? I thought I had read that I needed to cut the last part off from thedocumentation but do I just add the entire url without removing anything?

    That’s for the google helper tool. Since we’re not using the helper tool because Vogue isn’t included there, we’ll have to manually paste the whole URL on our own.

    A wise man once said:
    "Have you cleared your cache?"

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