@danielroe

It seems the preload-tag is not generated for fonts, that are defined in tailwind.config.ts.

I define my font in tailwind-config like this:

	theme: {
		fontFamily: {
			body: ['"Felipa"', ...defaultTheme.fontFamily.sans],
		},
	},

And then set this css inside assets/css/tailwind.css:

  html {
    @apply font-body;
  }

Basically, nuxt/fonts is correctly picking up and downloading this font with everything seemingly working correctly, but it does not create the preload-tag.

Here is a stackblitz:
https://stackblitz.com/edit/nuxt-starter-xrzkqs?file=app.vue

If you add this to app.vue, the preload-tag gets added correctly:

<style scoped>
div {
  font-family: Felipa, serif;
}
</style>

Originally posted by @codeflorist in #24 (comment)

Is it possible to specify the priority of downloading files by their extension (woff 2, woff, tff)? Now, if a folder contains both ttf and woff2 at the same time, then the module loads tff. Or do I only need to store fonts in woff2 format?

Hi :)
I define my font families using CSS variables / tokens, and it seems the module won't parse it.

Given:

:root {
  --font-family-base: Lexend, sans-serif;
  --font-family-heading: Quicksand, sans-serif;
}

and usage:

html,
body {
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-regular);
  line-height: 1.6;
}

fonts are not loaded. However, if i add lets say Lexend to the font-family before the variable, everything works.

I have no idea of the "doability" of this, just wanted to point that out as it doesnt seem someone did already.

I'll stay with fontaine only for now 😄 cheers

I'm encounting an error when using google fonts provider and multiple font weights. Nuxt reports a 400 bad request error. Looks like Google enforces a sorted tuple for requests.

Request link: https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,100;1,100;0,200;1,200;0,300;1,300;0,400;1,400;0,500;1,500;0,600;1,600;0,700;1,700

Error from Google:

400: Invalid selector
Tuples must be sorted
IBM Plex Mono:ital,wght@0,100;1,100;0,200;1,200;0,300;1,300;0,400;1,400;0,500;1,500;0,600;1,600;0,700;1,700

My config:

fonts: {
  families: [
    { name: 'IBM Plex Mono', provider: 'google' },
  ],
  defaults: {
    weights: [100, 200, 300, 400, 500, 600, 700, 800, 900],
    styles: ['normal', 'italic'],
    subsets: [
      'latin-ext',
      'latin',
    ],
  },
  assets: {
    prefix: '/_fonts',
  },
},

Hi @danielroe

• Should we deprecate the @nuxtjs/google-fonts module in favor of this module?
• It is a widely used module, do I continue to support it?
• Should I add a note indicating the use of nuxt/fonts?

With google fonts you can specify which characters you need and by that reducing the size.
This is already possible with the module google-fonts but I'm not seeing an option in this module.
Be aware there's a issue/PR currently on the google fonts repo regarding the text option per font family
nuxt-modules/google-fonts#106

When the weights are defined string arrays in the config, the fontshare provider would fail to match the correct weights because of the type mismatch.

My config:

export default defineNuxtConfig({
  modules: ['@nuxt/fonts', '@nuxtjs/tailwindcss', '@unocss/nuxt'],
  unocss: {
    disableNuxtInlineStyle: false,
  },
  fonts: {
    providers: {
      custom: '~/providers/custom'
    },
    families: [
      { name: 'Abel', provider: 'bunny' },
      { name: 'Satoshi', provider: 'fontshare' },
      { name: 'Kode Mono', provider: 'none' },
      { name: 'MyCustom', src: '/custom-font.woff2' },
      { name: 'CustomGlobal', global: true, src: '/font-global.woff2' },
      { name: 'Oswald', fallbacks: ['Times New Roman'] },
    ],
    defaults: {
      weights: ['400', '700'],
      fallbacks: {
        monospace: ['Tahoma']
      }
    }
  },
})

This might be more of a question type issue due to missing knowledge on my end.

I tried setting up the module to replace our current google font dependency:
@import url("https://fonts.googleapis.com/css2?family=Encode+Sans:wght@100;200;300;400;500;600;700;800;900&display=swap")

However when comparing the font output I noticed that google downloads a single 27kb woff2 file while nuxt/fonts creates 5 distinct woff files, ~40kb each -> 200kb.
After a bit of searching I learned about variable fonts and Encode Sans seems to be one of them.

So the question would be whether there is some sort of special config needed to make variable font's work properly? That is assuming the cause for the discrepancy is variable fonts of course.

Thanks!

This is the config used:

fonts: {
	families: [{ name: "Encode Sans", provider: "google" }],
	defaults: {
		weights: [100, 200, 300, 400, 500, 600, 700, 800, 900],
		styles: ["normal"],
		subsets: ["cyrillic-ext", "cyrillic", "greek-ext", "greek", "vietnamese", "latin-ext", "latin"],
	},

	assets: {
		prefix: "/_fonts",
	},
},

Anyone can insight how to use it with Unocss ?

When I set the nuxt baseURL (I set it at run time via the NUXT_APP_BASE_URL env var), nuxt/fonts can no longer access its cached fonts.

It appears that it always sets the font url to start with /_fonts no matter what, rather than /_fonts. While I didn't try I assume cdnURL will also not work with nuxt fonts.

While I need to set the NUXT_APP_BASE_URL at runtime, as a test I tried rebuilding the app with the fonts.assets.prefix setting hard coded to /prefix/_fonts and running it with NUXT_APP_BASE_URL=/prefix/, but fonts.assets.prefix changed the path of the fonts within the public directory, not the URL through which the fonts are accessed.

Is there any way to use nuxt fonts with a baseUrl set to anything but '/'?

https://developers.cloudflare.com/speed/optimization/content/fonts/

It's strange, but if the nuxt.config file contains @nuxt/devtools inside modules, the font panel doesn't work.

https://github.com/dungsil/issues/blob/0f11e1fcd386b289835d8d19c6b9199f66aa748c/nuxt-fonts-106/nuxt.config.ts#L6

ERROR [nuxt-devtools] RPC error on executing "nuxt-devtools-fonts:getFonts":
[birpc] function "nuxt-devtools-fonts:getFonts" not found

Reproduction link: https://github.com/dungsil/issues/tree/main/nuxt-fonts-106

Tailwind v4 moves configuration into CSS instead of tailwind.config.js. https://tailwindcss.com/blog/tailwindcss-v4-alpha

For example in v4 to specify a custom font, you'd just do this and then you can use .font-display within your HTML. (example from their blog post)

/* main.css */
@import "tailwindcss";

@theme {
  --font-family-display: "Satoshi", "sans-serif";
}

Workaround

Currently the workaround to use Tailwind CSS v4 with Nuxt Fonts is simply to specify using font-family in the CSS so it's loaded in.

@import "tailwindcss";

@theme {
  --font-family-marker: "Permanent Marker", cursive;
}

.nuxt-fonts-permanent-marker {
  font-family: "Permanent Marker", cursive;
}

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• chore(deps): update all non-major dependencies (@nuxthq/studio, @unocss/nuxt, eslint, sass, unocss)

Detected dependencies

• Check this box to trigger a request for Renovate to run again on this repository

So, there's fonts like Cal Sans and Geist, which are installed usually as packages and imported, what's the best way to use these?

We've stumbled on an issue, Roboto font was registered in Font Book, so only Safari loaded the font on the browser properly. All other browsers (Chrome, Firefox) fell back to Arial.

Here is my config code

families: [
      {
        name: 'Display',
        src: '/fonts/Display/',
        weights: ['200', '300', '400', '500', '700', '900'],
        display: 'swap',
      },
      {
        name: 'Narr',
        src: '/fonts/Narr/',
        weights: ['100', '300', '400', '500', '700', '900'],
        display: 'swap',
      },
    ],

and this structure of my font file

The Narr font is already readable, and the display font not readable like this.

Thought this issue was related to my project, but I was able to reproduce it, sounds weird but this font won't work on a production build - https://fonts.google.com/specimen/DM+Serif+Display

I am using the font by mentioning it in my tailwind config

import type { Config } from "tailwindcss";

export default <Partial<Config>>{
  theme: {
    fontFamily: {
      sans: [
        "DM Sans",
        "Avenir Next",
        "Roboto",
        "-apple-system",
        "BlinkMacSystemFont",
        '"Segoe UI"',
        "Ubuntu",
        '"Helvetica Neue"',
        "Arial",
        '"Noto Sans"',
        "sans-serif",
        '"Apple Color Emoji"',
        '"Segoe UI Emoji"',
        '"Segoe UI Symbol"',
        '"Noto Color Emoji"',
      ],
      mono: [
        "Cascadia Code",
        "ui-monospace",
        "SFMono-Regular",
        "Menlo",
        "Monaco",
        "Consolas",
        "Liberation Mono",
        "Courier New",
        "monospace",
      ],
      display: ["DM Serif Display", "Inter", "sans-serif"],
    },
  },
  plugins: [require("@tailwindcss/typography")],
};

The first font DM Sans is loads correctly, but the display font wont, throws a 404 in production.

Here's a reproduction - https://github.com/fayazara/nuxt-font-repro

Dev environment screenshot

Production screenshot

each provider supports some very interesting things, including axes for variable fonts, that we are not always taking advantage of.

would be nice to:

• support passing options to a provider (e.g. google can accept a text option to refine the subset)
• look at and improve google, fontshare, bunny providers

Currently it is not possible to use google as a provider for Material Symbols.

Looking at the current implementation of the google provider it seems it's only looking at the meta data for fonts found at: https://fonts.google.com/metadata/fonts

Metadata for googles Material Symbols can be found at https://fonts.google.com/metadata/icons

When ttf, woff, woff2 files are used, in the resulting css woff2 files should be generated in the first place. Now they are generated for the last. example
@font-face{font-family:Mont;src:url(../fonts/Mont/Mont-100.ttf) format(truetype),url(../fonts/Mont/Mont-100.woff) format(woff),url(../fonts/Mont/Mont-100.woff2) format(woff2);font-display:swap;font-weight:100;font-style:normal}

Does this module support variable fonts? It works with the google-fonts module, but I would be interested in switching to this module at some point if variable font support is added.

I can't see it mentioned in the README how this use case would be handled, so I thought I'd open an issue to get it clarified, then I can submit a PR for the docs.

For font faces that have the same name but multiple font-weights, how would we handle the configuration for this?

E.G.

@font-face {
    font-display: swap;
    font-style: normal;
    font-weight: 400;
    font-family: 'Tenon';
    src:
        local('Tenon Regular'),
        local('Tenon-Regular'),
        local('TenonRegular'),
        url('/fonts/tenon_regular.woff2') format('woff2'),
        url('/fonts/tenon_regular.woff') format('woff');
}

/* Tenon */
/* Font weight: Medium */
@font-face {
    font-display: swap;
    font-style: normal;
    font-weight: 500;
    font-family: 'Tenon';
    src:
        local('Tenon Medium'),
        local('Tenon-Medium'),
        local('TenonMedium'),
        url('/fonts/tenon_medium.woff2') format('woff2'),
        url('/fonts/tenon_medium.woff') format('woff');
}

/* Tenon */
/* Font weight: Bold */
@font-face {
    font-display: swap;
    font-style: normal;
    font-weight: 700;
    font-family: 'Tenon';
    src:
        local('Tenon Bold'),
        local('Tenon-Bold'),
        local('TenonBold'),
        url('/fonts/tenon_bold.woff2') format('woff2'),
        url('/fonts/tenon_bold.woff') format('woff');
}

This has 3 font files for Tenon, but all under the font-family: 'Tenon'. Changing the font-weight lets the browser choose the right font file automatically.

Just wondering how we'd set this up, as well as get the local fallbacks.

Out of the box I just get the 400 weight font files, and no local fallback

@nuxt/font is fetching CSS files from Adobe Typekit. However, for fonts with East Asian languages, it is unable to fetch the CSS extensions.

Below is the difference in the Adobe fonts screen:

Inter Variable ( css file include )

Pretendard ( javascript file include )

East Asian characters (especially CJK) seem to have a large size, so Adobe can't import the entire font by default or all characters.

If you look at the actual API being called, you'll see that East Asian languages don't come with css files.

• dpj7fny.js - a js file is output
• dpj7fny.css - 412 precondition failed

Can you add support for these areas?
If not, you can update the documentation to avoid confusing Asian users.

In the logs, it looks like this, making it difficult to determine the cause.

Reference:

1. Adobe fonts docs: https://helpx.adobe.com/kr/fonts/using/dynamic-subsetting.html
2. Test font (Pretendard): https://fonts.adobe.com/fonts/pretendard

I think @Nuxt/fonts unable to download font meta data behind proxy server. All other tools (npm, pnpm) work fine.

Error:

[@nuxt/fonts]  ERROR  Could not download google font metadata. @nuxt/fonts will not be able to inject @font-face rules for google.


[@nuxt/fonts]  ERROR  Could not download bunny font metadata. @nuxt/fonts will not be able to inject @font-face rules for bunny.


[@nuxt/fonts]  ERROR  Could not download fontshare font metadata. @nuxt/fonts will not be able to inject @font-face rules for fontshare.

System info:

Nuxt project info:

------------------------------
- Operating System: Windows_NT
- Node Version:     v21.6.2
- Nuxt Version:     3.11.1
- CLI Version:      3.11.0
- Nitro Version:    2.9.4
- Package Manager:  [email protected]
- Builder:          -
- User Config:      build, content, css, devtools, experimental, fonts, image, imports, lodash, modules, nitro, notivue, pinia, postcss, router, routeRules, runtimeConfig, security, seo, ssr, studio, telemetry, typescript, vite, vuetify, vueuse, vue
- Runtime Modules:  @nuxt/[email protected], @nuxt/[email protected], @nuxt/[email protected], @nuxt/test-utils/[email protected], @nuxthq/[email protected], @nuxtjs/[email protected], @pinia/[email protected], @sidebase/[email protected], @vue-email/[email protected], @vueuse/[email protected], notivue/nuxt, [email protected], [email protected], [email protected], [email protected]
- Build Modules:    -
------------------------------

would be nice to display information on what fonts that have been detected, and which provider they come from

Hey 👋

Recently I have set up new Nuxt project with fonts module and based on v 0.2 I am receiving regular errors in console:

 ERROR  [unhandledRejection] [birpc] timeout on calling "nuxt-devtools-fonts:exposeFonts"  11:08:21  

  at Timeout._onTimeout (/C:/Users/zanfr/Work/Code/SmartCity/web-next/node_modules/birpc/dist/index.mjs:42:23)
  at listOnTimeout (node:internal/timers:573:17)
  at process.processTimers (node:internal/timers:514:7)

The errors seems to be displayed on regular interval on it own after dev server is running for some time. Can't really say.
If needed I will try to give reproduction, altho, its fresh Nuxt project.

Hi, this is the module I was waiting the most for nuxt especially the preload links injection and to handle fonts easilly.
I am facing one issue, I am working on a current project using the famous Helvetica Neue Pro fonts. The problem is I am using the Extented version of the font and so I use the css property font-stretch: expanded;.
Is it possible to add the support of font-stretch and have the same replica of what I have currenlty: I don't want to change my font-weight/font-family/font-stretch since the project is soon ready to be deployed.

My current font face:

@font-face {
 font-family: 'Helvetica Neue';
 src: url('/fonts/HelveticaNeue-Roman.woff2') format('woff2');
 font-weight: 400;
 font-style: normal;
 font-display: swap;
}

@font-face {
  font-family: 'Helvetica Neue';
  src: url('/fonts/HelveticaNeue-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
 }

// Expanded/Extended

@font-face {
  font-family: 'Helvetica Neue';
  src: url('/fonts/HelveticaNeue-ExtendedOblique.woff2') format('woff2');
  font-weight: 400;
  font-stretch: expanded;
  font-style: italic;
  font-display: swap;
 }

@font-face {
  font-family: 'Helvetica Neue';
  src: url('/fonts/HelveticaNeue-HeavyExtendedOblique.woff2') format('woff2');
  font-weight: 900;
  font-stretch: expanded;
  font-style: italic;
  font-display: swap;
 }

Hey,

First, that package is incredible. Nothing to do and works perfectly out of the box.

But I see in my build code that the font rules are not minified. Is that wanted? (see Tailwind at the end that is correctly minified)

SEO- and performance-wise it makes sense to add a <link rel="preload" head-tag for the fonts used by the site.

Since font-file-names and -locations can change (e.g. because of version/hashes), it would be great, if nuxt/fonts does that automatically. Ideally it could be enabled by family, like e.g.:

{ name: 'My Font Family', provider: 'google', preload: true },

Environment

• Operating System: Darwin
• Node Version: v18.17.1
• Nuxt Version: 3.11.2
• CLI Version: 3.11.1
• Nitro Version: 2.9.6
• Package Manager: [email protected]
• Builder: -
• User Config: devtools, modules, hub, nitro
• Runtime Modules: @nuxthub/[email protected], @nuxt/[email protected], [email protected], @nuxtjs/[email protected], @nuxt/[email protected]
• Build Modules: -

Version

v0.7.0

Reproduction

https://stackblitz.com/~/github.com/larrasu/frontend-mentor

cd solutions/invoice-app
pnpm dev

Description

I've been experiencing this error in various projects. I'm not sure why I can't reproduce the error on Stackblitz. It's the same repo and branch. The error is still showing up on my end as of now. The only way to get rid of this error is by removing @nuxt/fonts from the nuxt.config.ts. So I figured there is a conflict between@nuxt/fonts and @nuxt/devtools?

Logs

 ERROR  Cannot start nuxt:  Failed to get devtools context.                         12:09:04 AM

  at extendServerRpc (node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@nuxt/devtools-kit/dist/index.mjs:96:11)
  at node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@nuxt/fonts/dist/module.mjs:1137:11
  at node_modules/.pnpm/[email protected]/node_modules/hookable/dist/index.mjs:48:66
  at Object.run (node_modules/.pnpm/[email protected]/node_modules/hookable/dist/index.mjs:41:43)
  at node_modules/.pnpm/[email protected]/node_modules/hookable/dist/index.mjs:48:56
  at async enableModule (/Users/larrasu/.nvm/versions/node/v16.15.1/lib/node_modules/@nuxt/devtools/dist/chunks/module-main.mjs:8466:3)
  at async normalizedModule (/Users/larrasu/.nvm/versions/node/v16.15.1/lib/node_modules/@nuxt/devtools/node_modules/@nuxt/kit/dist/index.mjs:169:17)
  at async installModule (node_modules/.pnpm/@[email protected]/node_modules/@nuxt/kit/dist/index.mjs:2415:95)
  at async initNuxt (node_modules/.pnpm/[email protected]_@[email protected]_@[email protected][email protected][email protected]_fl_br3acc34oknouixgtiqiyrhd6y/node_modules/nuxt/dist/index.mjs:4233:7)
  at async NuxtDevServer._load (node_modules/.pnpm/[email protected]/node_modules/nuxi/dist/chunks/dev2.mjs:6879:5)

seems somewhat higher than with old @nuxtjs/fontaine-based sites ...

comparison: https://nuxt.com/ vs https://nuxt-website-5dj3js9mv-nuxt-js.vercel.app/

discovered in #7

this is a tracker issue for migrating from existing nuxt font solutions to @nuxt/fonts (and thereby discovering issues with it, hopefully!)

I'd like to suggest specifying

• if subdirectories of the public directories are scanned for font files as well or if only the root directories are scanned
• if integration with TailwindCSS works right away (many people use it I think, so many might wonder if additional configuration is necessary)

in the README

It would be nice to offer to customize baseUrl for Google Fonts provider in the config. My use case is that there's a high latency to Google Fonts in China, so many of us use mirrors.

I've explored other font providers, looks like fontsource is also quite promising.

Currently most of its fonts are from Google Fonts, along with some icons and some other fonts. It's also the service that Cloudflare Fonts is fetching from.

@danielroe Would you like to include this font provider? If so, I'd like to work on it.

Docs: https://fontsource.org/docs

Hello guys!

I followed the documentation and tried a couple of settings/scenarios, but cannot make it work in some of my Nuxt projects - the font is not loaded.
There's used tailwindcss, so the font family is specified there;

export default {
  ...
  theme: {
    extend: {
      fontFamily: {
        sans: ['Inter', ...defaultTheme.fontFamily.sans],
      },
      ...
    },
  },
}

but the font is not loaded and just used system default.

I also tried to specify it within my main.scss file (that is specified in nuxt.config.ts, of course):

...
body {
  font-family: Inter, sans-serif;
}

But that doesn't help.
As well as trying some fine-grained settings in the Nuxt config file:

export default defineNuxtConfig({
  ...
  fonts: {
    families: [{ name: 'Inter', provider: 'google' }],
    defaults: {
      weights: [400, 500, 600, 700],
      styles: ['normal', 'italic'],
      subsets: ['latin-ext', 'latin'],
    },
  },
  ...
})

as well as this:

export default defineNuxtConfig({
  ...
  fonts: {
    families: [
      {
        name: 'Inter',
        provider: 'google',
        weights: [400, 500, 600, 700],
        styles: ['normal', 'italic'],
        subsets: ['latin-ext', 'latin'],
      },
    ],
  },
  ...
})

I see there are a few other issues that mention some problems with the variable font (and I'm trying to use Inter which is variable), so I'm not sure if it's related to some variable font support issue (if any) or there is something else.
I would be grateful if you could point this out to me.

fontshare, for example, exposes this metadata which we can use to create font fallback metrics

Hello,

Nuxt baseURL is ignored in production.

Given app.baseURL: '/myapp/':

Actual behavior: fonts are dumped in .output/public/_fonts/ but resolved as https://domain.com/_fonts/

Expected behavior: fonts should indeed be dumped in .output/public/_fonts/ but font urls should point to https://domain.com/myapp/_fonts/

It works fine in development when path assets.prefix is set to /myapp/_fonts. However if this path is set to production, fonts are dumped in .output/public/myapp/_fonts/ and resolved to https://domain.com/myapp/_fonts/ which doesn't exist as it's now https://domain.com/myapp/myapp/_fonts/.

Nuxt fonts: 0.5.1
Nuxt: 3.11.1

Minimal reproduction: https://stackblitz.com/edit/github-4bvlvu?file=nuxt.config.ts (then manually navigate to /myapp in the preview)