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

change Font-family in react


I want to change font family to Cairo


i try change $font-family-sans-serif in "_variables.scss"


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


and add this link to index.html

<link rel="preconnect" href="

<link rel="preconnect" href=" crossorigin>

<link href=" rel="stylesheet">


but it is not running sad


user
Ubad Balioğlu 2 years ago
SASS React HTML
5 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 (5)

user
Sean Author 2 years ago

Hi,

Sorry for the delayed reply.

May I know which Metronic version are you using ?

Can you retry it without !default ?


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


Regards.


user
Ubad Balioğlu 2 years ago

sad not work
user
Sean Author 2 years ago

Hi,

May I know which Metronic version are you using ?

Are you restarting your app after the changes to recompile the assets ?

Regards.


user
Ubad Balioğlu 2 years ago

VITE_APP_VERSION=v8.2.3


user
Sean Author 2 years ago

Hi,

Could you please put it in src/_metronic/assets/sass/components/_variables.custom.scss:


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


Regards.


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