CSS Font Groups - css

Question

Can I group font's in my CSS file like this:
#font-group {
font-family: custom-group;
fonts: custom_font1, custom_font2, fallback1, fallback2;
}
At the moment, I've copied font-family: custom_font1, custom_font2, fal... onto many element's which is a pain to maintain and also bugs me how bad practice it is.

Answer 1

No, I don't think you can. However, with SCSS, you can use #extend feature to do this, which will only output a list of selectors that use this font.
%fonts {
font-family: helvetica, arial, sans-serif;
}
.abc {
#extend %fonts;
}
.xyz {
#extend %fonts;
}
Check out this example:
http://codepen.io/anon/pen/Zpoxap
The output of the CSS is:
.abc, .xyz {
font-family: helvetica, arial, sans-serif;
}
The %fonts is what's called a silent class or placeholder. It is only output if it is used. Placeholder's get a lot of criticism, because if you nest selectors, it can get very bloated in your output. I feel this example is a good use-case.
With regard to #font-face, you only need give it a name, like "GT-Pressura" and then it will become available throughout your CSS under that name.
#font-face{
font-family: "GT-Pressura";
font-style: normal;
font-weight: normal;
src:
url("../fonts/GT-Pressura-Regular.eot?#iefix") format("embedded-opentype"),
url("../fonts/GT-Pressura-Regular.woff") format("woff"),
url("../fonts/GT-Pressura-Regular.ttf") format("truetype"),
url("../fonts/GT-Pressura-Regular.svg#GT-Pressura") format("svg")
}
Then you can simply do what I have shown above in SCSS:
%fonts {
font-family: "GT-Pressura", helvetica, arial, sans-serif;
}
.abc {
#extend %fonts;
}
If you are not using SCSS, I recommend it because it's easy to port an existing CSS codebase to use it, as any valid CSS file is also valid SCSS. You could run everything through SCSS and only patch in the bits you need.
Extra special bonus addition:
If you do end up using SCSS, I very much recommend a SASS mixin library like Bourbon which makes writing #font-face rules that little bit nicer.
For example, you can simply do:
#include font-face("GT-Pressura", "../fonts/GT-Pressura-Regular", $file-formats: eot woff ttf svg);
Which is exactly what I use to output the above.