Custom font type

How To
1

I’m trying to upload a custom font but I’m getting an error or it’s not recognised.
I have created a child theme and added code as the academy states. Still nothing.
Font type .otf
Code:
add_filter( ‘bricks/custom_fonts/mime_types’, function( $mime_types ) {
// Enable OTF font format for <IE9 browser support
array_unshift( $mime_types, [‘otf’ => ‘font/otf’] );
array_unshift( $mime_types, [‘eot’ => ‘font/eot’] );

return $mime_types;
} );

2

I thinkg you dont have to use OTF type.
It is huge sizes and IE are died. :slight_smile:
Every browsers are compatible with woff2, so you have to only use woff2.

You can download without any trouble (google fonts) from here, and after upload your server.

So, you dont have to use any custom codes too.

I hope it is the right answer for your problem. :slight_smile:

UPDATE: OTF format is not compatible, if you read the documentation. Woff, Woff2 TTF
But you can convert any other format your OTF if you want.

1 Like
3

Hey Jose,

Try this instead. The docs are wrong.

add_filter( 'bricks/custom_fonts/mime_types', function( $mime_types ) {
  // Enable EOT font format for <IE9 browser support
  $mime_types['otf'] = 'font/otf';
  $mime_types['eot'] = 'font/eot';
  
  return $mime_types;
} );

@timmse, if someone could update the font docs at some point with the proper method. The current method returns an array like this and that’s why it doesn’t work.

{
    "0": {
        "eot": "font\/eot"
    },
    "woff2": "font\/woff2",
    "woff": "font\/woff",
    "ttf": "font\/ttf"
}
2 Likes