Install google font 'Lato' locally

Support
#1

Hi there,

I would like to be able to use the google font ‘Lato’ on my server. I have downloaded the font files from google and tried to add a custom font in the font section of the customizer. Once I have selected the woff files of all the different weights and types, I get an error message. The files cannot be uploaded because of security reasons. Do you have any idea what I could be doing wrong?

Cheers

#2

Hi there,

Please convert the font files to ttf file instead and you should be able to upload the font files to your site.

Hope this helps.

#3

Hi, thanks for your reply.

OK, ttf worked wonderfully! I am just wondering, do I need to upload different file types in order to make the fonts cross platform compatible or compatible between different browsers? Or will x theme use the uploaded ttf files and convert them to different file types internally, like svg, eot, woff, woff2?

#4

Hi There,

You have to upload the svg, eot, woff, woff2 font types as well.

Please take a look at this solutions:

Hope ith elps :slight_smile:

#5

Hi,

sorry, I can’t upload vg, eot, woff and woff2 files, there is allways an error message that I cannot upload them for security reasons. I added that code above to the js window in the customizer and saved it, but still I can’t upload these files. Any thoughs on that?

#6

Hi There,

To make those file types uploadable, please add this custom code under functions.php file locates in your child theme:

add_filter('upload_mimes', 'add_custom_upload_mimes');
function add_custom_upload_mimes($existing_mimes) {
	$existing_mimes['otf'] = 'application/x-font-otf';
	$existing_mimes['woff'] = 'application/x-font-woff';
	$existing_mimes['ttf'] = 'application/x-font-ttf';
	$existing_mimes['svg'] = 'image/svg+xml';
	$existing_mimes['eot'] = 'application/vnd.ms-fontobject';
	return $existing_mimes;
}

Hope it helps :slight_smile:

#7

Hi,

I put the code above in my child theme’s functions.php file now and uploaded one woff file. Now I am not getting the error message, it seems to have uploaded it, as it shows the url, the tille and the option to delete the file. The weird thing is, that it does not show up in the list of uploaded files. I cannot select that file. The button “Select Font File(s)” is enabled even though nothing isselected. When I click on this button, the “Upload Fonts” screen closes but my woff file does not appear in the list of imported font files.

#8

Hi David,

Please change the above code to this

add_filter('upload_mimes', 'add_custom_upload_mimes');
function add_custom_upload_mimes($existing_mimes) {
	$existing_mimes['otf'] = 'application/x-font-otf';
	$existing_mimes['ttf'] = 'application/x-font-ttf';
	$existing_mimes['eot'] = 'application/vnd.ms-fontobject';
        $existing_mimes['woff'] = 'font/woff';
        $existing_mimes['woff2'] = 'font/woff2';
	return $existing_mimes;
}

Then please provide your admin login credentials in a secure note so we could check it as well. Another possible cause is, the restriction is in host level in which can’t be fixed by the above code.

Thanks!

#10

Hi David,

I checked and it seems to be working, the fonts are uploaded and listed.

May I know what you mean by that it does not show up in the list of uploaded file? Please provide a screenshot.

Thanks!

#11

Hi!

I have uploaded a bunch of ttf files and it worked. But I would also like to upload the svg, eot, woff and woff2 files. And that does not work, they do not show up when I upload them.

#12

Hi David,

I see it now, please add this line to your site’s wp-config.php just above the WP_DEBUG line.

define('ALLOW_UNFILTERED_UPLOADS', true);

Then test it again, and upload the woff file.

Thanks!

#13

Hi,

I added this line to the wp-config.php file, but unfortunately I still can’t upload svg, eot, woff and woff2 files…

#14

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!

#15

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.

#16

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.

#17

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?

#18

Hi There,

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

Hope it helps :slight_smile:

#19

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.

#20

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.

#21

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