"upload_mimes" filter not working. Need to allow WOFF and WOFF2

Question

I'm working on a theme settings page and I need to allow uploading WOFF and WOFF2 files. Getting the

Sorry, this file type is not permitted for security reasons.

message at this time.

My code:

  function my_mime_types($mimes = array()) {
    // $mimes['svg']   = 'image/svg+xml'; // insecure; do not use!
    // Try https://wordpress.org/plugins/safe-svg/ if you need to upload SVGs
    $mimes['webp']  = 'image/webp';
    $mimes['ogg']   = 'audio/ogg';
    $mimes['woff']  = 'font/woff';
    $mimes['woff2'] = 'font/woff2';
    return $mimes;
  }

  add_filter( 'upload_mimes', 'my_mime_types' );

I ran file --mime-type -b /path/to/fonts/font.woff, which returned application/octet-stream so I updated the code but that still didn't work. I've also tried application/x-font-woff unsuccessfully.

I also get the error with a .webp file. The mime type matches; confirmed by running mime-type.

I understand that the most recent Wordpress versions employ strict mime type checking. Could that be the culprit? Is there a solution to this?

UPDATE: Working code based on Ram Ratan Maurya's answer:

add_filter( 'wp_check_filetype_and_ext', 'my_file_and_ext_webp', 10, 4 );
function my_file_and_ext_webp( $types, $file, $filename, $mimes ) {
    if ( false !== strpos( $filename, '.webp' ) ) {
        $types['ext']  = 'webp';
        $types['type'] = 'image/webp';
    }
    if ( false !== strpos( $filename, '.ogg' ) ) {
        $types['ext']  = 'ogg';
        $types['type'] = 'audio/ogg';
    }
    if ( false !== strpos( $filename, '.woff' ) ) {
        $types['ext']  = 'woff';
        $types['type'] = 'font/woff|application/font-woff|application/x-font-woff|application/octet-stream';
    }
    if ( false !== strpos( $filename, '.woff2' ) ) {
        $types['ext']  = 'woff2';
        $types['type'] = 'font/woff2|application/octet-stream|font/x-woff2';
    }

    return $types;
}

function my_mime_types($mimes) {
  // $mimes['svg']   = 'image/svg+xml'; // insecure; do not use! Try https://wordpress.org/plugins/safe-svg/ if you need to upload SVGs
  $mimes['webp']  = 'image/webp';
  $mimes['ogg']   = 'audio/ogg';
  $mimes['woff']  = 'font/woff|application/font-woff|application/x-font-woff|application/octet-stream';
  $mimes['woff2'] = 'font/woff2|application/octet-stream|font/x-woff2';
  return $mimes;
}

add_filter( 'upload_mimes', 'my_mime_types' );

Answer 1

I see a correct implementation at https://wordpress.stackexchange.com/a/323226/24756. Technically, you need to pass down the extension down to filter wp_check_filetype_and_ext as well.

And for WOFF/WOFF2, I'd suggest using the following format:

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

For .webp, it can simply be image/webp.

Hope it helps.