Set LESS font variable using multiple font fields - css

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