[Resolved] Uploading a Nongoogle font to GP Child theme

[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!

[Leo]

Hi there,

Which step are you stuck on?

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

[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!

[Elvin]

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.

[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.

[Elvin]

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

[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.

[Elvin]

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')

[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.

[Elvin]

yes that is thank yOU!! Will try it

Let us know if it works.:)

[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 🙂

[Elvin]

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.

[angelarose]

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

[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?

[Elvin]

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.

[Author]

Posts