Fonts

Google Fonts connection

The easiest way to insert Google Fonts is using the VS Code plugin Google Fonts. It can generate either a <link> for HTML or a CSS @import for your styles.

Fast workflow (VS Code)

Press F1 → type Google Fonts → choose the insert method → pick font → pick weights → Ok.

Insert as `<link>` in HTML

Press F1 → search Google Fonts
Choose Google Fonts: insert <link>
Pick a font + variations (weights)
Paste into your HTML page (usually inside <head>)

Insert as CSS `@import`

Press F1 → search Google Fonts
Choose Google Fonts: insert CSS @import
Usually paste into src/styles/style.scss

Example (Montserrat with variations):

Google Fonts — @import example

@import url("https://fonts.googleapis.com/css?family=Montserrat:regular,600,700&display=swap");

Important

Fonts connected from Google Fonts are loaded from Google servers and normally do not go into dist/. If you want remote fonts to be downloaded and connected locally, enable: fonts → download: true.

You can also get the import/link code directly on the Google Fonts website — plugin is just faster.

Connecting local fonts

In Animmaster Vite Template, local fonts connection is highly automated. You drop font files into the correct folder, run dev/build, and the system: converts formats (when needed) and generates @font-face rules automatically.

Folder

Put your font files here: src/assets/fonts

File naming rule

Because the template detects font family + weight from the filename, follow this format: Family-Variation.

Naming example

KoPubBatang-Bold.ttf
// font-family: KoPubBatang
// font-weight: 700

Step-by-step

Get fonts from designer/client in .ttf, .otf, or .woff2
Put files into src/assets/fonts
Check naming (Family-Variation)
Run dev mode: npm run dev
Set default font family in src/styles/settings.scss via $fontFamily (and set other families/variations in your project styles if needed)

How the template processes fonts

On any build/dev start, the system checks src/assets/fonts for .otf, .ttf, and .woff2. Then it runs a short pipeline:

OTF → TTF (if .otf exists)
TTF → WOFF2 (if .ttf exists)
WOFF2 scan (existing .woff2 are used as final sources)
Cleanup: generated .otf/.ttf intermediates are removed
Auto-generate @font-face rules into: src/styles/fonts/fonts.css
fonts.css is automatically connected to every HTML page

Heads up

During first conversion, you may see conversion logs in the terminal. It’s normal — just wait for the process to finish.

Icon font from SVG

You can generate an icon font from SVG icons. This is useful when you want fast icons via CSS classes.

Icons folder

Put SVG icons here: src/assets/svgicons

Setup

Place SVG icons into src/assets/svgicons
Enable: fonts → iconsfont: true
Run dev mode: npm run dev
Use the generated classes in HTML (full list is available via developer panel link if it is enabled)

Usage examples:

Icon font classes — examples

<button class="button --icon-some">Some text</button>

<button class="button button--icon-some">Some text</button>

How it works

After adding the icon class, a ::before pseudo-element is created and outputs the icon glyph.

Build settings for fonts

In template.config.js the fonts section contains the main toggles:

`fonts → iconsfont`

Enables generating and connecting an icon font from SVG icons. Values: true/false.

`fonts → download`

Downloads remote fonts (for example Google Fonts) and connects them locally. Values: true/false.

Tip

If you build for strict offline usage or a corporate environment, enable fonts → download: true so everything becomes local.

Download

Every project you start without a solid foundation costs you time. Download Animmaster Vite Template and start your next project with a structure that already works.

Download Animmaster Vite Template Save your time — start now

Working with fonts Local fonts, icon fonts, and Google Fonts