CODEWITHSUNDEEP
htmlcssgoogle-font-api
Wasivis
Wasivis

Reputation: 81

Select all styles from Google Fonts

This might be a stupid question, but I wanted to know if there's a way to select all styles of any given font with one click, without having to click each individual style (Thin 100, Thin 100 Italic, and so on). I can't find a "Select all" option or something like that, so I wanted to know if it's just not there or if I'm not seeing it.

Just to be clear: this is for importing into a .css, I don't want to download the family!

Thanks a lot!

Upvotes: 1

Views: 6104

Answers (4)

S. B.
S. B.

Reputation: 11

Search the font you want -> just go straight to button "Get font" -> "Get embed code" -> On left side you will find table with different styles just choose all you want it will show you in life previev css code.

Upvotes: 1

Michael L
Michael L

Reputation: 55

The answer from Steven G doesn't seem to work, or it doesn't any longer.

In my testing, if you remove all the individual weights then you only get a normal and bold version of the font. To get all the weights you'll need to add them individually.

In other words, you should just use the code the way Google provides it when you select the font styles from their webpage.

Upvotes: 0

Steven Giguère
Steven Giguère

Reputation: 49

I think google removed the possibility to add an entire family (They don't want you to overload your project), but there still a way.

Simply add a style or two of the family, then remove all the style in the code by hand.

So here I have
family=Montserrat:ital,wght@0,100;0,200;1,100;1,200

Simply remove everything after the column like this
family=Montserrat

You can do the same no matter how many families you have.

i.e.:
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;1,100;1,200&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap" rel="stylesheet">

I'll write :

<link href="https://fonts.googleapis.com/css2?family=Montserrat&family=Ubuntu&display=swap" rel="stylesheet">

Hope this helps. :)

Upvotes: 4

Sarah
Sarah

Reputation: 66

Firstly you go to Google Fonts and find the font you want. Then you select "Type Tester". Roll down the screen and select all the styles you want. At the side table, select import, copy the code and paste to your css sheet.

Here's an image to try and help. enter image description here

Upvotes: 1

Related Questions