Add fonts to your website

How to add Own fonts

The CSS @font-face Rule

Web fonts allow Web designers to use fonts that are not installed on the user’s computer.

When you have found/bought the font you wish to use, just include the font file on your web server, and it will be automatically downloaded to the user when needed.

Your “own” fonts are defined within the CSS @font-face rule.

@font-face {
  font-family: myFirstFont;
  src: url(sansation_light.woff);
  /*font-weight: bold;*/
}

div {
  font-family: myFirstFont;
}

Poppins Font

Add Poppins font

Add to index.html

<link href='https://fonts.googleapis.com/css?family=Poppins' rel='stylesheet'>

Or link directly into css

@import url('https://fonts.googleapis.com/css?family=Poppins');

Include in css

font-family: 'Poppins', sans-serif;

Adding local font to Nextjs

Link local font