CSS: How to transform into a css class the stylesheet link from fonts.google.com to my file.css (from external to internal?

user_2036464 0
Viewed 41

I have this 2 option copy from fonts.google.com

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@200;300;400&display=swap" rel="stylesheet">

<style>
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@200;300;400&display=swap');
</style>

I want to keep this font, but also to copy into my file.css in order to make a class, such as this one?

.doneazab {font-family: sans-serif;color: #343434;}

So, how can I transform that google font style link into a class?

windows-10 fonts css html
1 Answers

You’ll want to set the font-family, like this:

.doneazab {
  font-family: "Source Sans Pro", sans-serif;
  color: #343434;
}

If you visit the URL you’re loading from Google Fonts, you’ll see that it’s a CSS file with @font-face declarations. All those declarations define the font-family name as Source Sans Pro, which make it possible for you to reference that name elsewhere in your CSS.

This is also shown underneath the other code snippet for link or @import on Google Fonts, ex:

Screenshot of the Google Fonts code snippet interface

user_8647990
Related