Search code examples
cssfont-facecascade

How can I update already exising @font-face delaration?

I have a case where I have already defined font-face declarations

@font-face {
  font-family: 'some font';
  src: url('somelink') format('woff');
  font-weight: 900;
  font-style: normal;
}

I have no ablilty to edit this code, but I need to add one more declaration(font-display: optional), is there a way to do that?

Currently what am I doing is that I am just overwriting this declaration in the stylesheet where I have control with something like this:

@font-face {
  font-family: 'some font';
  src: url('somelink') format('woff');
  font-weight: 900;
  font-style: normal;
  font-display: optional;
}

But I am not even sure if it works. How would you test that? Is there a better way to do it? Thanks in advance.

Solution

  • You can't override @font-face definitions.

    Common practice is to create a new @font-face with a different name and then use the new name in font-family:

    @font-face {
  font-family: 'some font 2';
  src: url('somelink') format('woff');
  font-weight: 900;
  font-style: normal;
  font-display: optional;
}

.item {
  font-family: 'some font 2`
}