Search code examples
cssfontslessgoogle-font-api

Set LESS font variable using multiple font fields

I have a list of fonts that I'm pulling in from Google's CDN. They list documentation here but I'm having issues setting up the semibold italic styles. Is there a way to make this work?

<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,600italic,400,300,600' rel='stylesheet' type='text/css'>

@semibold: "Open Sans:600", sans-serif;
@semibold-italic: "Open Sans:600italic", sans-serif;
@light: "Open Sans:300", sans-serif;

I know that I can set the font-weight and style in font-face.

How can I include everything in my variable declaration?

Solution

  • I'm not too familiar with how Google Fonts works, but maybe a mixin would be a decent alternative for you.

    .semibold {
    font-family: 'Font', 'Font B', 'Font C';
    font-weight: 500;
    font-style: normal;
}

div {
    .semibold;
}