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