How to alias a google web font font-family/font-weight combination?

0
votes

TL;DR: DEMO

I'm using the google web font Poppins that has a semi bold style. To use it I have to add:

body {
  font-family: 'Poppins';
  font-weight: 600;
}

I want to know if there is a way (and if there is, how) to alias the combination of font-family and font-weight to a new font family, so that I can use it by just adding:

body {
  font-family: 'Poppins Semi Bold';
}

(I also added <link href="https://fonts.googleapis.com/css?family=Poppins:400,600" rel="stylesheet"> to import the fonts)

1
htmlcssfontsgoogle-webfonts

1 Answers

1
votes

Yes, create a class

.poppins-semi-bold {
    font-family: 'Poppins';
    font-weight: 600;
}

and use it like

<div class="poppins-semi-bold">This is poppins semi bold</div>