0

I am trying to use an OpenTypeFont font, AXIS Basic ProN. This font is working well on Chrome:

chrome

but not on Firefox and Safari:

firefox

On Firefox, I can observe the following warnings on the console:

warnings

It seems to explain that OpenTypeFont is not supported on Firefox and Safari whereas https://caniuse.com/ttf is telling otherwise

I created a sandbox in order to properly illustrate my issue: https://codesandbox.io/s/kind-panini-ew9ie

I only got the .otf files available for that font.

Any thoughts on that?

Florian Ldt
  • 1,125
  • 3
  • 13
  • 31
  • 1
    protip: [never use ttf or otf as webfont](https://stackoverflow.com/a/36110385/740553), convert it to a webfont and use that. If legal, because fonts have licenses, and you're almost _certainly_ not allowed to use the universal ttf/otf source as a webfont, because you'd be literally freely distributing a licensed font. And looking at https://typeproject.com/en/fonts/axisfont it's pretty clear you are _very much not allowed_ to use the regular Axis font as a webfont, and you'll have to sign up for https://typeproject.com/en/service/webfont instead. – Mike 'Pomax' Kamermans Jul 30 '21 at 03:47

1 Answers1

1

You're using format("otf"), but "otf" is not a valid format value in an @font-face rule. Check the CSS Fonts Module spec. You should be using "opentype".

Peter Constable
  • 2,707
  • 10
  • 23
  • Indeed that was it. Not sure why I didn't realize it sooner but thanks a bunch for that. – Florian Ldt Jul 26 '21 at 16:35
  • However, not that Axis is not free to use _in the slightest_ and even if you have a license for the .otf file, you do _not_ have a license to use it as a webfont. Welcome to the wonderful world of "you could get sued for an incredible amount of money because fonts are expensive, and you have it on public record that you're trying to violate the license". – Mike 'Pomax' Kamermans Jul 30 '21 at 03:53