How to add a font

FrontWing uses a single SCSS entry file (assets/scss/main.scss) to manage all global styles. You can easily add new fonts (e.g. from Google Fonts) and apply them across the entire site.

Where are fonts definied?

Fonts are imported directly at the top of main.scss using @import:

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

* {
  font-family: 'Inter', Arial, sans-serif;
}

This makes the Inter font the default across all elements.

How to use a different Google font

1. Get the import link from Google Fonts

For example, for Poppins:

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');

2. Replace the existing import in main.scss

At the top of the file, paste the new line:

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');

3. Update the global font-family

Below the import, change the font-family rule:

* {
  font-family: 'Poppins', sans-serif;
}

You can scope this more narrowly (e.g. body, h1, etc.) depending on your design.

📁 SCSS structure tips

Currently, styles live in a single entry file:

assets/
└── scss/
    └── main.scss

But you can expand this freely by creating additional folders and partials:

assets/
└── scss/
    ├── main.scss          ← entry point
    ├── _fonts.scss        ← font-related declarations
    ├── _variables.scss    ← Bootstrap or custom variables
    ├── _buttons.scss      ← custom button styles
    └── ...

Then inside main.scss:

@import './fonts';
@import './variables';
@import './buttons';

💡 Useful tips

• Google Fonts load automatically via CDN when @import is present.

• If the font does not appear, check your browser console for blocked resources (CSP, extensions, etc.).

• You can also use self-hosted fonts (.woff2, .ttf) via @font-face.