[Support request] Custom Font not working as described

[Sven]

Hello all together,

i tried to install a custom font to my Generatepress, es described here https://docs.generatepress.com/article/adding-local-fonts/

Unfortunately i want to use a font called “Yu Gothic UL light”. I downloaded the font from here https://www.wfonts.com/font/yu-gothic-light and got a File names yugothil.ttf. After uploading this file to WordPress (after Making the changes from the Youtube Video) i get the message that i am not allowed to upload the file yugothil.ttf

So i tried to download a Google Font and i’ve got these files (just for testing if i made a mistake somewhere):
zen-maru-gothic-v7-latin-regular.eot
zen-maru-gothic-v7-latin-regular.svg
zen-maru-gothic-v7-latin-regular.ttf
zen-maru-gothic-v7-latin-regular.woff
zen-maru-gothic-v7-latin-regular.woff2

I uploaded these files and this worked for all files but not for zen-maru-gothic-v7-latin-regular.ttf. Again i’ve got the message, that i am not allowed to upload this file format.

And my last try was to grad the Font Files from my Windows Directory and try to Upload the Files
YuGothR.ttc
YuGothM.ttc
YuGothL.ttc
YuGothB.ttc

This also did not work, because i am not allowed to upload these File Types.

Is this documentation https://docs.generatepress.com/article/adding-local-fonts/ still valid?

As far as i’ve seen, it should be possible to add other fonts beside from Google Fonts, right?

My Code Snipped looks original:

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

    return $mimes;
} );

Does anybody has an idea, how to get this “Yu Gothic UL light” Font into my WordPress?

Thank you and best regards.

[David]

Hi there,

with your files saved like this:

zen-maru-gothic-v7-latin-regular.eot
zen-maru-gothic-v7-latin-regular.svg
zen-maru-gothic-v7-latin-regular.ttf
zen-maru-gothic-v7-latin-regular.woff
zen-maru-gothic-v7-latin-regular.woff2

You need to add the @font-face CSS as described here:

https://docs.generatepress.com/article/adding-local-fonts/#using-font-face

Heres an example of that CSS:

@font-face {
    font-family: 'Your font name';
    src: url('the_full_url_to_the_font_file/font-name.eot'); /* IE9 Compat Modes */
    src: local(''),
         url('the_full_url_to_the_font_file/font-name.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('the_full_url_to_the_font_file/font-name.woff2') format('woff2'), /* Super Modern Browsers */
         url('the_full_url_to_the_font_file/font-name.woff') format('woff'), /* Modern Browsers */
         url('the_full_url_to_the_font_file/font-name.ttf') format('truetype'), /* Safari, Android, iOS */
         url('the_full_url_to_the_font_file/font-name.svg#Comfortaa') format('svg'); /* Legacy iOS */
}

you need to update the font-family and the URLs to where your fonts are located

[Sven]

Thank you David,

the 2 problems are.

a) When uploading the file zen-maru-gothic-v7-latin-regular.ttf i get the error message, that i am not allowed to upluad this filetype.

b) Isn’t it possible to use the Font “Yu Gothic UL light” just by uploading the file yugothil.ttf? Which is also denied with “not allowed Filetype” Errormessage.

I wonder why i cannot upload .ttf filetypes…

Best regards and thank you, Sven

[Ying]

I wonder why i cannot upload .ttf filetypes…

It’s not allowed by WP for security reason.

Check the Uploading our font section of the documentation:
https://docs.generatepress.com/article/adding-local-fonts/

If you want to upload the font file to media library, you’ll need to add the PHP code.
Adding PHP: https://docs.generatepress.com/article/adding-php/

[Sven]

Thank you Ying, but that is exactly what i did.

My Code Snipped looks like this:

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

    return $mimes;
} );

All files exept the ttf File can be uploaded.

Thats why i was wondering if the Documentation is still valid. I will try another font and try everything again and give a feedback.

Thank you for now, Sven

[Ying]

upload_mimes is a WP filter, GP doesn’t have the control on how this filter works.

As far as I can see, the code should work, but maybe WP changed something so ttf files are not allowed anymore?

For your reference: https://developer.wordpress.org/reference/hooks/upload_mimes/

[Jusung]

I am also trying to upload those file following the instruction
and I am having the exact same error.

There are 5 files, but after adding the code you told us, only one file is not allowed to upload, which is ttf file.

By adding code to php function, we are supposed to be allowed to upload those files, but for a reason, only the ttf file is not allowed.

I think in other file, there might be another code that doesn’t allow to upload ttf file. So, we need to find the code and remove the code and upload it and make the code again. But I don’t know what the code is and where the code is.

[Fernando]

Hi Jusung,

Try accessing your wp-config.php file through FTP then add define('ALLOW_UNFILTERED_UPLOADS', true); inside the file.

[Author]

Posts