Add Font

The 'Inter' typeface serves as the default font family for Pixel. Choose one of this tutorial below into your project:

WARNING

You don't need to add Inter font manually since Pixel Vue 3 version 0.4.0

1. Mekari CDN

By default Pixel Vue 3 not shipping with Inter font, you can add manually in pixel.css file via CDN.

@layer pixel_reset, pixel_base, pixel_tokens, pixel_recipes, pixel_utilities;

@font-face {
  font-family: 'inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src:
    url('https://cdn.mekari.design/fonts/Inter/Inter-Regular.woff2') format('woff2'),
    url('https://cdn.mekari.design/fonts/Inter/Inter-Regular.ttf') format('truetype');
}

@font-face {
  font-family: 'inter';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src:
    url('https://cdn.mekari.design/fonts/Inter/Inter-Italic.woff2') format('woff2'),
    url('https://cdn.mekari.design/fonts/Inter/Inter-Italic.ttf') format('truetype');
}

@font-face {
  font-family: 'inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src:
    url('https://cdn.mekari.design/fonts/Inter/Inter-SemiBold.woff2') format('woff2'),
    url('https://cdn.mekari.design/fonts/Inter/Inter-SemiBold.ttf') format('truetype');
}

@font-face {
  font-family: 'inter';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src:
    url('https://cdn.mekari.design/fonts/Inter/Inter-SemiBoldItalic.woff2') format('woff2'),
    url('https://cdn.mekari.design/fonts/Inter/Inter-SemiBoldItalic.ttf') format('truetype');
}

2. Font Source

Use third party library if you prefer to load font from within your apps.

npm install @fontsource/inter

Then import the font in your project.

import '@fontsource/inter/400.css'
import '@fontsource/inter/400-italic.css'
import '@fontsource/inter/600.css'
import '@fontsource/inter/600-italic.css'