Unable to use WOFF font on my site, please help

[ip79]

I am trying to use “Big Noodle Titling” on my site using custom fonts in the font manager.

I’ve also tried with Flash Rogers Straight Expanded, same outcome.

However, when I upload the file and add it to the font selection, if appears as a serif font.

Please see attached images to clarify the problem;

(This image shows the font being incorrectly read / displayed)

(This image shows what should be “Big Noodle Titling” being displayed as Serif (using WhatFont)

This is driving me nuts, please help

Login info provided in next message.

Thanks,
Paul.

[ip79]

Login info in secure note

[rad]

Hi @ip79,

Thanks for reaching out.

Please try adding this to your child theme’s functions.php

add_filter( 'upload_mimes',  'cs_fix_upload_mimes', 999999 );

function cs_fix_upload_mimes ( $mimes ) {

    $mime_types = array(
      'woff2' => 'application/octet-stream',
      'woff' => 'application/font-woff',
      'ttf' => 'application/x-font-ttf'
    );

    if ( apply_filters('cs_font_manager_add_legacy_mime_types', false) ) {
      $mime_types['svg'] = 'image/svg+xml';
      $mime_types['eot'] = 'application/vnd.ms-fontobject';
    }

    return apply_filters( 'cs_font_manager_mime_types', $mime_types );

}

If you have existing customization related to font mime-type fix, I recommend removing it and replacing it with that code. If there is none then you can just add that code. Then please test it again.

Thanks!

[ip79]

Rad you absolute - it’s working now thanks

[christian]

You’re welcome. Glad we’re able to help.

[ip79]

Sorry guys, spoke too soon

Please watch this video;

[rad]

Hi @ip79,

Looks like it has multiple issues, the code that was provided is a fix for font upload issue which still happens based on your video. But I couldn’t confirm what’s causing this as I need to check the actual code, would you mind providing your FTP login credentials as well? Template editing is not allowed from your Wordpress admin hence I can’t check it there, let’s check the issues one at a time

Thanks!

[ip79]

I’ve enabled theme editing, should be good to go now to edit via the WP dashboard.

[rad]

Hi @ip79,

Looks like the fix doesn’t work on the child theme, instead please edit this file

\themes\pro\cornerstone\includes\classes\styling\class-font-manager.php

Then replace this block

    $mime_types = array(
      'woff2' => 'application/octet-stream',
      'woff' => 'application/font/woff',
      'ttf' => 'application/x-font-ttf'
    );

with this

    $mime_types = array(
      'woff2' => 'application/octet-stream',
      'woff' => 'application/font-woff',
      'ttf' => 'application/x-font-ttf'
    );

I couldn’t do it in the admin since not all files are listed.

As for the headlines, you shouldn’t add <h1> if your headline already has it, example,

It’s either removing <h1></h1> from your text content, or change your Base Font Tag option to span instead of h1. Doubled wrapped headline must be avoided because the layout will break, similar issue when you add <p> within <p>.

Thanks!

[rad]

Hi @ip79,

I noticed that you bumped the thread, please let us know if the fix works.

Thanks!

[ip79]

Hi guys, just spent most of the day chasing an error, see below;

Turns out the edits added to the child theme and main theme blocked PNG, JPG etc. from being added.

I added the code as directed but clearly something went wrong.

I’ve reinstalled X Pro and enabled the main theme for now.

Please help me fix the child theme so I can get my site design back on track, thanks.

Paul.

[friech]

Hi Paul,

If it seems everything works fine on your site now? I can upload an image and see your custom font both on Content builder and frontend (see screenshots below).

Please clarify,
Thanks,

[ip79]

Hi @Friech,

It’s working as I’ve disabled the child theme with the custom code provided a few days ago.

The end goal is to have the child theme activated BUT the code provided stopped files from being uploaded except for WOFF, WOFF2 and TTF.

Please review previous advice and assist, thanks

Paul.

[ruenel]

Hello Paul,

Please activate the child theme and use this PHP code instead:

add_filter( 'upload_mimes',  'cs_fix_upload_mimes', 999999 );

function cs_fix_upload_mimes ( $mimes ) {

    $mime_types['woff2'] = 'application/octet-stream';
    $mime_types['woff'] = 'application/font-woff';
    $mime_types['ttf'] = 'application/x-font-ttf';

    if ( apply_filters('cs_font_manager_add_legacy_mime_types', false) ) {
      $mime_types['svg'] = 'image/svg+xml';
      $mime_types['eot'] = 'application/vnd.ms-fontobject';
    }

    return apply_filters( 'cs_font_manager_mime_types', $mime_types );

}

We would love to know if this has worked for you. Thank you.

[ip79]

Hi @ruenel,

Well, I removed the previous code, i.e.;
add_filter( ‘upload_mimes’, ‘cs_fix_upload_mimes’, 999999 );

function cs_fix_upload_mimes ( $mimes ) {

$mime_types = array(
  'woff2' => 'application/octet-stream',
  'woff' => 'application/font-woff',
  'ttf' => 'application/x-font-ttf'
);

if ( apply_filters('cs_font_manager_add_legacy_mime_types', false) ) {
  $mime_types['svg'] = 'image/svg+xml';
  $mime_types['eot'] = 'application/vnd.ms-fontobject';
}

return apply_filters( 'cs_font_manager_mime_types', $mime_types );

}

And replaced it with your new code, i.e.;
add_filter( ‘upload_mimes’, ‘cs_fix_upload_mimes’, 999999 );

function cs_fix_upload_mimes ( $mimes ) {

$mime_types['woff2'] = 'application/octet-stream';
$mime_types['woff'] = 'application/font-woff';
$mime_types['ttf'] = 'application/x-font-ttf';

if ( apply_filters('cs_font_manager_add_legacy_mime_types', false) ) {
  $mime_types['svg'] = 'image/svg+xml';
  $mime_types['eot'] = 'application/vnd.ms-fontobject';
}

return apply_filters( 'cs_font_manager_mime_types', $mime_types );

}

And it still gave the security permissions error when I tried to upload a jpg, see image below;

I’m really struggling to understand what is causing the problem now

Thank you for your continued assistance resolving this.

Paul.

[ip79]

Actually this ticket can be closed now, I spoke to my coder who instantly worked out the issue.

For future reference (if it helps at all) the code that fixed this was;

add_filter( 'upload_mimes',  'cs_fix_upload_mimes', 999999 );

function cs_fix_upload_mimes ( $mimes ) {

$mimes['woff2'] = 'application/octet-stream';
$mimes['woff'] = 'application/font-woff';
$mimes['ttf'] = 'application/x-font-ttf';

if ( apply_filters('cs_font_manager_add_legacy_mime_types', false) ) {
  $mimes['svg'] = 'image/svg+xml';
  $mimes['eot'] = 'application/vnd.ms-fontobject';
}

return apply_filters( 'cs_font_manager_mime_types', $mimes );
}

Ticket can now be closed.

[ruenel]

Hey @ip79,

It’s good to know that the code helps and that your issue has been resolved already.
Don’t hesitate to open another thread if you need anything else we can help you with.

Regards.