How to globally change font family for Metronic HTML ?

To change Metronic's font family please follow below quick steps:

1. Go to Google Fonts and choose your font family.
   


2. In your HTML's head section replace the default font URL with the new one:
   
   copy

   <!--begin::Fonts-->
   <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700" />
   <!--end::Fonts-->

   
   


3. Go to the custom SASS variables file src/sass/components/_variables.custom.scss and override the default font family to apply the new font family globally:
   
   copy

   // Typography
   // Font family
   $font-family-sans-serif: Poppins, Helvetica, "sans-serif";

   
   Poppins is the font family name while Helvetica, "sans-serif" alternative system font familiy names in case the main font name is not available.
   


4. Run Gulp or Webpack build task to compile the changes to the assets folder.
   

For more info about using Metronic please check the Theme Documentation
and Video Tutorials.