Install google font 'Lato' locally

Hi David,

I did and yes, it’s not working. I also installed 3 debug bar plugins to confirm adn troubleshoot and foud that WOFF and WOFF2 are already allowed by executing get_allowed_mime_types();. It could be that there is a part of your site or host that blocks those files that even Wordpress can’t override. Is there any? This works fine on my installations.

For the meantime, please upgrade your PHP version to 7.2, it’s now the recommended version for Wordpress since you have updated it to 5.0.2. I recommend contacting your hosting and request for PHP upgrade.

Thanks!

Hi there,

thanks for your replys! I updated my PHP version to 7.2 as you said. I still have this problem. I don’t think that my host is blocking the uploads, because they are even being uploaded to the file system, although they don’t show up in the list of selectable files after uploading them. By the way, I had to deactivate those 3 debug plugins because I could not access the customizer anymore. If you need to access my wordpress, feel free to activate them again.

Hey David,

SVG is not supported and blocked by WordPress for security reasons. There are third party plugins that will allow you to use SVG like SVG Support. Please just note that we do not have support for third party plugins and custom code. They they don’t work, please forward the issue to the plugin author or consult with a third party developer.

Hope that helps and thank you for understanding.

For me it is OK if I don’t use SVG files. I just need to at least be able to use the woff and woff2 files. Any ideas on what could be going on there? Is there a workaround? can I upload the files via FTP and register them manually somewhere in order to use them within the Font Manager?

Hi There,

That’s not possible. Please try with the alternate solution:

Hope it helps :slight_smile:

All right, so I uploaded the font files via FTP and added a bunch of @font-face specifications to my global CSS. Is there a way now to show up that custom font family in the font manager or in the drop down box of the typography section of the customizer?
It would be a real pain to specify the font family each time I use a text element.

Hello David,

Thanks for updating the thread.

You can use font manager option. For more information, please take a look at the solution mentioned in following thread.

To learn more, please take a look at the Changelog page and scroll down to Custom Fonts section. .

https://theme.co/changelog/#theme-pro-2-3-0-theme-x-6-3-0-cornerstone-3-3-0

Thanks.

Hi there,

so, I am leaving the Font Manager behind me, because I just cannot install other files than .ttf there.
I am trying the other option that is described here:

So my I uploaded the ‘Lato’ files that I have downloaded from Google (https://google-webfonts-helper.herokuapp.com/fonts/lato?subsets=latin) to /x-child/fonts, copied the generated css with the font faces to the customizer’s global CSS, then added
body {
font-family:‘Lato’;
}
to the bottom of the custom CSS. Now the font is falling back to Times New Roman, as if it cannot find my custom font. I also tried defining diffefent names to the font in the font faces to avoid collision with the web font ‘Lato’, but it also does not work. Could you please have a look at my customizer and see what might be going on? I have already passed the credentials.

Cheers

Hey David,

I checked your page and your Custom Lato font works.

The Font Manager Custom Fonts recommends woff or woff2 so that means you can install them if your server only allows it. Most web hosts do.

If you can’t upload woff or woff2, it is a problem with your web host. If uploading a woff font is important, you will need to move to a host that supports uploading woff.

Thanks.

Hi,

Yes, it works, but I was just able to select ttf files, not woff and woff2 files. When I upload them using the font manager, they are uploaded but are not listed in the list of selectable files. So it can’t be a host problem, can it? You can try installing a woff file and you can see what happens on my customizer.

Sorry for the confusion. I tried different web hosts and found that it’s WordPress that won’t accept woff just like SVG. I’ll post this in our issue tracker to remove woff and woff2 recommendation to avoid confusion.

I’m sorry It turns out that you currently could only use TTF in the Font Manager. If you need to use woff, the @font-face method would be the current solution. Regretfully, you will need to use custom CSS everytime you’ll set a font-family with V2 Elements.

Thanks.

UPDATE: It looks like it’s a combination of server and WordPress setup that permits a file format to be uploaded. In one of my test sites for instance, even TTF was not accepted.

I was able to use WOFF and WOFF2 in my test site via the method below.

  1. Upload the font files in your web server preferably the uploads folder.
  2. Install the Add From Server
  3. Add the font files to your Media Gallery
  4. Once available in the Media Gallery, you will be able to choose the woff and woff2 font formats.

Hope that helps.

Hi, thank you very much for your helpful reply. I added the font files to the media library using “Add From Server” (eot, woff and woff2 files), but I only could see ttf and (finally!) woff2 files. I could not see woff and eot listed. Do you think ttf and woff2 is enough for cross browser compatibility?

woff2 won’t work in IE. See https://caniuse.com/#search=woff2

woff will. See https://caniuse.com/#search=woff

ttf is better than woff2. See https://caniuse.com/#search=ttf

I’m not sure why it’s not listed though. There could be a conflict somewhere specific in your setup. You can try reloading or repeat the whole process again. If it will not work, I’d recommend that you test out other web hosts.

Thanks.

Hi,

OK, now I can install woff2, woff and ttf.
There was a reply above that said I should add a function called add_custom_upload_mimes() to my child theme’s functions.php. It was still there, so I removed it and I can now use woff as well.
Thank you very much for all your replys!

Just in case someone accesses my site from a really old browser, because eot and svg are missing, can I set a fallback font somewhere in the customizer? What is the default fallback font in x theme? Something sans serif?
If it is not possible, it is allright as well. I am happy now.

Hi David,

Yes, the fall back will be the combination of these Helvetica,Arial,sans-serif. The fall back should always be a system font since the custom one needs a download time before it can render.

Thanks!

All right! Many thanks!

You’re welcome! :slight_smile:

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