Is there a better way to implement multiple @ font-faces?

Question

My code

@font-face { font-family: Affogato-Light; src: url("fonts/Affogato-Light.woff2") } @font-face { font-family: Affogato-Regular; src: url("fonts/Affogato-Regular.woff2") } @font-face { font-family: Affogato-Medium; src: url("fonts/Affogato-Medium.woff2") } @font-face { font-family: Affogato-Bold; src: url("fonts/Affogato-Bold.woff2") } @font-face { font-family: Affogato-Black; src: url("fonts/Affogato-Black.woff2") } 

Is there a short @font-face or { font-family } form for multiple sub-backgrounds, i.e. Light , Regular , etc.? Thanks!

Answer 1

Yes there is.

It is known as Style linking . You can learn more about it here.

In your case, the code will look like this:

 @font-face { font-family: Affogato; src: url("fonts/Affogato-Light.woff2"); font-weight: 200; font-style: normal; } @font-face { font-family: Affogato; src: url("fonts/Affogato-Regular.woff2"); font-weight: 400; font-style: normal; } @font-face { font-family: Affogato; src: url("fonts/Affogato-Medium.woff2"); font-weight: 600; font-style: normal; } @font-face { font-family: Affogato; src: url("fonts/Affogato-Bold.woff2"); font-weight: 800; font-style: normal; } @font-face { font-family: Affogato; src: url("fonts/Affogato-Black.woff2"); font-weight: 900; font-style: normal; } 

and then you can use it by applying the following classes to elements:

 .u200 { font-weight: 200; font-style: normal; } .u400 { font-weight: 200; font-style: normal; } .u600 { font-weight: 200; font-style: normal; } .u800 { font-weight: 200; font-style: normal; } .u900 { font-weight: 200; font-style: normal; } 

You will apply the font only once to the body :

 body { font-family: Affogato; } 

Answer 2

Impossible in CSS.

But you can use the Mixin function in SAAS.

https://gist.github.com/jonathantneal/d0460e5c2d5d7f9bc5e6