Custom Font / Font Manager Issues

Hi,

Sorry in advance for the long post. I’ve noticed a few previous threads in regard to this, but im finding it hard to find clarification on the issue. Can someone explain the relationship/difference between setting fonts in theme options, font manager and on an elemental basis?

To clarify, hypothetically, let’s say I have a custom font that I am looking to utilize. Judging by the documentation - I would turn font manager on > set my fonts in the font manager for headings and body respectively > in theme options the fonts would be set to ‘body and content = body’ and ‘headings = headings’ > on an elemental basis I would choose the correct font type for that specific element (eg set heading for a heading). Would this be the correct way to set the fonts for this instance?

If so, how does leaving a font inherit come into play… If it was to be left inherit in theme options? If it was left inherit on an elemental basis?

If that is indeed the correct way to implement a custom font, Im experiencing an issue where the custom font is not being displayed.

I have installed my custom font:

Set it to its correct font type in the font manager:

Screen Shot 2021-03-08 at 8.06.51 PM
Screen Shot 2021-03-08 at 8.07.02 PM

In the theme options area I set each type to its corresponding font:

Then set the correct font type on the element. In this case it is a custom headline:

In this case, the page lists the correct font name under properties when inspected, but it is not displaying the correct font.

Screen Shot 2021-03-08 at 8.23.10 PM

This is what the font should be displaying as:

But this is what’s being output: Screen Shot 2021-03-08 at 8.25.49 PM

Is this an issue with how I setup the fonts in the various locations (font manager, theme options, on the element), or is this another issue in itself?

Thank for in advance!

Hi @Thomxnj,

Thanks for reaching out.
It seems that the URLs are not fully replaced while moving the site from staging to productions and that causes the Mixed Content issue [ HTTP and HTTPS ] blocking to load of the Font files.
I would suggest you replace the URL properly and check this again, there are many URL replacement Plugins available in WordPress which help you to replace the URL.
This article will be helpful in this:https://www.wpbeginner.com/plugins/how-to-update-urls-when-moving-your-wordpress-site/

Also, remember that the exact URL should be mentioned in Setting > General, WordPress Address and Site URL, including the protocol i.e HTTP/HTTPS.
If that does not help, please provide login credentials for your site in a secure note to examine it further, including:

– WordPress Site URL & Login URL
– WordPress Admin username/password

To create a secure note, click the key icon underneath any of your posts.

Thanks

Hi, thanks for responding. Im not sure why there would be URL issues, this was always a production site using HTTPS. I have changed the URL in the area that you have mentioned, but there is still an issue.

Hello @Thomxnj,

Your font should be working now. I have installed a Search and Replace plugin. I search for http://example.com/wp-content/uploads/ and replaced it with https://example.com/wp-content/uploads/

One thing to keep in mind, if you just use the “Inherit” value, it will inherit whatever settings you have for Body and Content.

Check your page now.

That worked!

Thanks for your help.

You’re welcome.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.