Fonts
Changing the fonts on your site allows you to match the typography to your brand's identity.
1. Update the font link:
To use a different Google Font, update the <link>
tag in the <head>
section of your HTML. The current tag looks like this:
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
- Go to Google Fonts, select the fonts you want to use, and copy the provided tag.
- Replace the existing
<link>
tag with the new one you copied.
2. Update font families in SCSS:
After updating the font link, you need to add below variables in the _user-variables.scss
file to change font family.
$font-family-base: 'Inter', sans-serif;
$headings-font-family: 'Poppins', sans-serif;
If you want to use custom fonts, remove tags completely and visit Self Hosted Fonts