Changing fonts

This theme uses the Kanit font from Google Fonts. You can customize the fonts by using other Google Fonts or even your own custom fonts. See the guide below for using your fonts:

Download the fonts source files like .woff2 files:
- Go to the Google Fonts website. Then search for your desired font. Click on the font you like.
- You’ll see a page with a Get Font button. Click it.
- On the next page, click Download all or the download icon to download the Google font source files.
- After downloading the zip file, extract it. You’ll see font files. Copy the fonts you want and paste them in src/fonts/typography-font/.
```
   Kanit-Black.ttf
   Kanit-Bold.ttf
   Kanit-ExtraBold.ttf
   Kanit-ExtraLight.ttf
   Kanit-Light.ttf
   Kanit-Medium.ttf
   Kanit-Regular.ttf
   Kanit-SemiBold.ttf
   Kanit-Thin.ttf
   OFL.txt
```

Change font name & update font files path:

In the _variables.scss file located at src/scss/base/, update the font-primary value and font-primary-serif if needed.

// -----------------------------------------------------------------
// 01. Variables
// -----------------------------------------------------------------

// Fonts
$fonts: (
  "font-base-size": 16px,
  "font-body-size": 16px,
  "font-primary": "Kanit",
  "font-primary-serif": sans-serif,
  "font-icon": "Material Symbols Rounded",
  // Google Material Icons - https://fonts.google.com/icons?icon.style=Rounded
  "font-scale": 1.258,
);

Change the @font-face src value. You should only change the file names since the fonts are already added to that path. Add or remove @font-face rules to include or exclude font weights.

// Google Fonts
// ---------------------------------
@font-face {
  font-family: font("font-primary");
  src: url("../fonts/typography-font/kanit-light.woff2") format("woff2");
  font-weight: 300;
  font-display: swap;
  font-style: normal;
}

@font-face {
  font-family: font("font-primary");
  src: url("../fonts/typography-font/kanit-regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
  font-style: normal;
}

@font-face {
  font-family: font("font-primary");
  src: url("../fonts/typography-font/kanit-medium.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
  font-style: normal;
}

@font-face {
  font-family: font("font-primary");
  src: url("../fonts/typography-font/kanit-semibold.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
  font-style: normal;
}

@font-face {
  font-family: font("font-primary");
  src: url("../fonts/typography-font/kanit-bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
  font-style: normal;
}