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

How can I change the font style in Angular Metronic?


Hello there, dear devs! I hope this message finds you in good health and high spirits. I have a question about Angular Metronic that I was hoping you could help me with. I have been working with Angular Metronic and I was wondering if it is possible to change the font style in the application. Specifically, I would like to know how I can change the font style to match my project's design requirements. If it is possible to change the font style in Angular Metronic, could you please guide me on how to do so? I would be grateful for any help or advice you can provide me with. Thank you very much in advance, and I look forward to hearing from you soon. Best regards,


user
savio jose 3 years ago
Angular Bootstrap Metronic
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
Faizal Author 3 years ago

Hi Savio,

Sorry for the delay. The default font that we use is Inter from google font. You can change the values here. Get a new google font link and replace it in this file: demo1/src/index.html


<link rel="stylesheet" href="


Then change the font family variable in the style file.

$font-family-sans-serif: Inter, Helvetica, "sans-serif" !default;


Thanks


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  :(