I am using a web-font that is declared with @font-face in an external css file. The font service is setup such that I source the external css file and then just use the font in my css. I cannot source the font file itself in my own @font-face definition.
Every time I use the web-font on my site, I add the same two style definitions to it. So, my font use always looks something like this:
h2{
font-family: 'Knockout 26 A';
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
Adding the antialiasing and grayscale EVERY TIME I use the font seems unnecessarily redundant. Is there a way for me to extend the @font-face declaration from the external file in my own css?
Thanks!
It's not possible to extend a @font-face declaration. According to the current W3C recommendation for fonts (3 Oct 2013) @font-face requires the font-family and src descriptors or the declaration is invalid. Additionally, the descriptors are limited to:
so you wouldn't be able to use webkit-font-smoothing or moz-osx-font-smoothing anyway.
I recommend using a CSS preprocessor like Sass, Less or Stylus to cut down on the verbosity of CSS. But if you can't use those you'll just have to keep writing your CSS declarations as you currently are.