Search code examples
cssfontscors

What are the allowed values for the `font-family` property inside the `@font-face` section?

Can I use a custom value for font-name property in @font-face section in CSS?

E.g. if I have the properly working CSS:

@font-face {
  font-family: "foo";
  src: url(foo.otf) format('otf');
}

Is the font-family: "foo" related to the contents of the foo.otf or will it be valid to change the above CSS to:

@font-face {
  font-family: "bar";
  src: url(foo.otf) format('otf');
}

given of course that I will update all the references to this font-family everywhere else. I.e. I will change font-family: "foo"; to font-family: "bar";.

Some context.

I come across the issue in the following scenario. I have a complex online website (website A). I am developing a microfrontend for that website. That website does not expect me to load any fonts and I do not want to load any fonts when microfrontend is run in context of that website.

But there is another website (website B), in context of which I want my microfrontend to load fonts. So, I need to have the @font-face section in my CSS.

Now the issue seems to be that website A somewhere in its CSS has font-family: "foo"; and also it loads my microfrontend before it loads its fonts, i.e. before it processes its own @font-face section. So, it seems to rely on my @font-face to load the "foo" font. And it fails due to CORS restrictions on the server which hosts my microfrontend. The CORS configruations can not be changed due to application domain, they are there as expected.

So, I am thinking to kind of scope my `@font-face' only to my microfrontend with the help of the custom font name and was worried to check if it is a sane approach.

Solution

  • https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-family:

    The value is used for name matching against a particular @font-face when styling elements using the font-family property. Any name may be used, and this overrides any name specified in the underlying font data.

    Basically, you can specify by which name you want to refer to the font. It doesn't need to match the "intrinsic" name of the font used.