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="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:
    // 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.
S
Sean Author1 year ago
HTML Bootstrap 5 Metronic
0 Answers
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (0)

Metronic

Go to MetronicDownloadsPurchase MetronicRefunds

React Dev Vacancy

KeenThemes is looking for a Junior React or Vue developer to build awesome apps.
Apply
keenthemes mega bundle