Custom fonts

• Web fonts
• Custom fonts
  • Vite
  • Laravel Mix

Web fonts

If you'd like to use custom fonts, you can do that by simply importing the font in your resources/css/app.css file.

For example:

1@import url(https://fonts.bunny.net/css?family=raleway:400);

Say you want to use this font as your headings, you can add the following to resources/css/theme.css:

1@theme {
2    --font-display: "Raleway", "sans-serif";
3}

Whats left, is to use the resulting font-display class to apply the font to the disired element.

Custom fonts

Vite

Using font files is a little more involved. First, add your font using @font-face at-rule.

1@font-face {
2    font-family: 'Raleway';
3    font-style: normal;
4    font-weight: 400;
5    font-display: swap;
6    src: url("~fonts/raleway-v34-latin-500.woff2") format("woff2");
7}

Put the font files in the resources/fonts folder.

Then, add the following alias to your vite.config.mjs file.

1resolve: {
2    alias: {
3        '~fonts': isBuild ? path.resolve(__dirname, 'resources/fonts') : path.resolve(__dirname, 'wp-content/themes/your-theme-name/resources/fonts')
4    }
5},

Laravel Mix

If you opted to use Laravel Mix, you can add custom fonts using the following steps.

TODO