Super Sale Limited Time 50% OFF for All-Access Plans
Save 50% Now
Light
Dark
System
Ask  Question

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:

    <!--begin::Fonts-->
    
<link rel="stylesheet" href=" />
    
<!--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:

    // 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.
user
Sean Author 4 years ago
Metronic Bootstrap 5 HTML
1 Answers
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (1)

user
veluvip 3 2 years ago

hiii


Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(