Search code examples
cssgoogle-webfonts

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

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?

Solution

  • 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