CSS GOOGLE FONTS

GOOGLE FONTS IN CSS---BEST WAY

The easiest way is to import a Google Font using @import:

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

body {
  font-family: 'Poppins', sans-serif;
}

BETTER METHOD: <link> in HTML

Put this inside your <head>:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">

Then in CSS:

body {
  font-family: 'Poppins', sans-serif;
}

Example with font sizes

body {
  font-family: 'Poppins', sans-serif;
  font-size: 1rem;
}

h1 {
  font-size: 2.5rem;
  font-weight: 700;
}

h2 {
  font-size: 2rem;
  font-weight: 600;
}

p {
  font-size: 1rem;
  font-weight: 400;
}

Recommendation: For a real website, use the <link> method in HTML rather than @import.