How can I update already exising #font-face delaration? - css

Question

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.

Answer 1

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`
}