Is it possible to use a google web font in a css file by it's name modified(italic, font-weight)?

1
votes

For example I want to use Monsterrat font-family. I import it to my css file like this:

 @import url('https://fonts.googleapis.com/css?family=Montserrat:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i');

Then I can use it like this:

font-family: 'Montserrat', sans-serif;

The url above has font-weight and italic modifiers and have their own names like, "Light Italic", "Italic Medium" etc... My problem with that, I can simply adjust font weight: 300, and font-style: italic without the url. I want to use the name "Italic Medium" INLINE, like the this.

font-family: 'Montserrat', Light Italic;

Is it possible to do?

1
cssgoogle-webfonts
Did you try it and it didn't work? - j08691
You mean you want to be able to use the explicit name of the font style, like font-family: 'Montserrat Light Italic'? No, that won't work, because the Google style sheet does not "register" them under that identifier, but uses the same one for all versions - and that is usually what you want, so that by just specifying that general font family, the browser can pick the appropriate style based on the font-style and font-weight. - CBroe
Why do you not want to use font-weight and font-style? That’s exactly what they’re for. - Ry-

1 Answers

1
votes

Yes and no,

Your example is:

font-family: 'Montserrat', Light Italic;

The Google font weight 'light' is weight 300 (for italic or normal font-style). And also in CSS font-weight: normal is equivelent to font-weight: 400, and bold is equivelent to 700.

So that allows us to get close using the font shorthand syntax which allows a number of font properties such as the font-style, font-weight and font-family you want to be declared in one go.

Unfortunately, the font-size value is a requirement of the font shorthand syntax so you'll need that in there too:

font: italic normal 1rem 'monserrat'

or

font: italic 300 1rem 'monserrat'

The second one there gets you the equivalent of the 'Light' font-weight but 'Light' isn't a valid CSS font-weight - 'normal' and 'bold' are along with a few relative terms as well such as 'lighter' or 'bolder'.

You could also use initial or inherit as possible values for the font-size.

You can use that style inline.

<p style="font: italic 300 1rem 'monserrat'">...</p>

Not quite what you were after? But as close as you will get :)

More about font shorthand:

https://css-tricks.com/snippets/css/font-shorthand/

https://www.impressivewebs.com/css-font-shorthand-property-cheat-sheet/

And an additional point - each of the styles you include in your import rule add to the load time and bulk of your page, it's probably a good idea to identify which you will use and only include those. For example, if you don't need a 700 weight italic font, don't include the 700i in your import