1. Linking your Local and Google font in HTML

To include your local font, add your local fonts in app/fonts/typography-font/ directory and link the local font styles containing file (in our case typo.css) in your HTML

In the same manner, copy your google font linking url and link it in the HTML code.

  <!-- Linking Google Font -->
  <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Poppins:300,400,500,600,700">

    

Import (Alternate way of linking)

Alternately, you can import your google fonts in both SCSS and CSS.

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

2. Calling the font family:

The final step of adding or changing your typeface is calling the font family in your stylesheet.

Calling the font family in CSS:

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