Set LESS font variable using multiple font fields

css fonts less google-font-api
itsclarke picture itsclarke · Nov 17, 2014 · Viewed 8.5k times · Source

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

TheLeggett picture TheLeggett · Nov 17, 2014

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

Related questions

How to add some non-standard font to a website?

Is there a way to add some custom font on a website without using images, Flash or some other graphics? For example, I was working on a wedding website, and I found a lot of nice fonts for that subject. …

Read More
CSS Font Border?

With all the new CSS3 border stuff going on (-webkit, ...) is it now possible to add a border to your font? (Like the solid white border around the blue Twitter logo). If not, are there any not-too-ugly hacks that will …

Read More
How to import Google Web Font in CSS file?

I'm working with a CMS which I only have access to the CSS file. So, I can't include anything thing in the HEAD of the document. I was wondering if there was a way to import the web font from …

Read More