The New Way to Build! Introducing ReUI — the developer platform for agentic UI with shadcn/ui
Learn More
Light
Dark
System
Ask  Question

Vue Js template code font family change


Recently I have been constantly trying to change font family from style.bundle.css file in assets folder of Vue js template. How can I update my desired fonts in the template as when build is run it caches the default template font. Can you please help!


user
Cloud 1 year ago
3 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 (3)

user
Sean Author 1 year ago

Hi,

May I know which Metronic version you are using?

If you are using the recent Metronic 8 Vue you can change the font family globally from Google Fonts in the main HTML file: demo1/index.html and the new font family name into src/assets/sass/components/_variables.override.scss


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


Regards.


user
Cloud 1 year ago

Hello,

Thankyou for your switf reply

Yes I have the latest metronic 8 version, I will not take much of your time but could you please also let me know how can we change font family in laravel template as well.

This would help me a lot

Thanks
BR.


user
Lauris Stepanovs Author 1 year ago

Hi,

Sorry for the late reply.

You can override the default font-style in Larvael the same way by adding a new font family to the file starterkit/resources/_keenthemes/src/sass/components/_variables.override.scss.

After modifying the style file do not forget to rebuild metronic assets with the command npm run dev.

Regards,
Lauris Stepanovs,
Keenthemes Support Team


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