Set LESS font variable using multiple font fields

Question

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?

Answer 1

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

Answer 2

You can use parametric mixins. You can declare a style, say .font, which accept several parameters — in this case, it should accept font-family, font-weight and font-style. Of course you are free to add/remove other font- or text- related properties for further fine-tuning.

// Declare mixin
.font(@fontFamily: Arial, sans-serif; @fontWeight: normal; @fontStyle: normal) {
    font-family: @fontFamily;
    font-style: @fontStyle;
    font-weight: @fontWeight;
}

// Sample styles
.semibold {
    .font("Open Sans", sans-serif; 600; normal);
}
.semibold-italic {
    .font("Open Sans", sans-serif; 600; italic);
}
.light {
    .font("Open Sans", sans-serif; 300; normal);
}