Can't Upload Woff or Woff2 files

[Nuera]

Hi there, I’m trying to upload a custom font. I have my Woff/Woff2 files, but no matter what I try (including allowing the mime type) wordpress refuses to allow me to upload these font types.

Screencap:

Thanks in advance for your help
~G

[jade]

Hi Nuera,

It would be best to have the font files uploaded in the child theme files instead of the wordpress media library as it is blocked by default by wordpress.

To do that, you will need to install and activate the child theme.

Once you have the child theme activated, login through FTP them go to wp-content/themes/pro-child then create a fonts directory there and upload the font files there.

Then to reference the font files, the link should be:

http://example.com/wp-content/themes/pro-child/font.woff

Please change http://example.com to your domain and font.woff to the font name.

Hope this helps.

[Nuera]

Hey Jade - thanks for the quick reply.

Will this method allow me to use the fonts in the Custom Font section of the Font Manager then?

[jade]

Hi Nuera,

Ah, my apologies for that. If you aim to make it work for the Font Manager, please add this code in the child theme’s functions.php file to allow wordpress to accept font files in the media section:

  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 this helps.

[Nuera]

Thanks Jade!

So that seemed to fix the upload issue for the Woff file, but after uploading I don’t get any additional options in the custom font section.

Let me know if there’s something else I can try here. Thanks!

[thai]

Hi There,

The custom fonts option is not support the WOFF or WOFF2 file types.

Please convert them to TFF instead:

Convert otf to ttf | Everything Fonts

Hope it helps

[Nuera]

Oh really? The uploader literally says to only upload Woff or Woff2. And ttf files really aren’t supported by web - is there some kind of built-in converter or something?

[rad]

Hi @Nuera,

Sorry for the confusion, TTF font also works with HTML5 (https://caniuse.com/#feat=ttf), but yes, you should upload WOFF and WOFF2 too. For the meantime, please try this ( this works on my installation )

function font_mime_types($mimes) {
  $mimes['svg'] = 'image/svg+xml';
  $mimes['woff'] = 'font/woff';
  $mimes['woff2'] = 'font/woff2';
  return $mimes;
}
add_filter('upload_mimes', 'font_mime_types');

Or merge the mime type to the existing codes that Jade provided. Then try and upload the font files again, then hit select font button.

Thanks!

[Nuera]

Thanks Rad!

I’m not entirely sure I got that correct, but after adding your code to Jade’s code, I am now able to upload both Woff and TTF files separately, so I suppose that works well enough

Thanks again!

[rad]

You’re most welcome!