fonts,nuxt

Adobe font provider does not support dynamic subset

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

fonts/src/providers/adobe.ts

Line 109 in 22ae0b1

const css = await fontCSSAPI<string>(`${fonts.kits[kit]!.id}.css`)

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:

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

Add support for Google Material Symbols

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

feat: fontsource provider

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

Nuxt DevTools error

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.

Failure to match font weights for `fontshare` provider when the `weights` defined in the config is composed of strings.

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']
      }
    }
  },
})

devtools: If the module contains "@nuxt/devtools", an error occurs in the Fonts panel.

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

Dependency Dashboard

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

This repository currently has no open or pending branches.

Detected dependencies

github-actions

.github/workflows/changelogensets.yml

actions/checkout v4

actions/setup-node v4

.github/workflows/ci.yml

actions/checkout v4

actions/setup-node v4

actions/cache v4

codecov/codecov-action v4

.github/workflows/release.yml

actions/checkout v4.1.4@0ad4b8fadaa221de15dcec353f45205ec38ea70b

actions/setup-node v4.0.2@60edb5dd545a775178f52524783378180af0d1f8

.github/workflows/reproduction-close.yml

actions/stale v9.0.0@28ca1036281a5e5922ead5184a1bbf96e5fc984e

.github/workflows/reproduction.yml

actions/checkout v4.1.4@0ad4b8fadaa221de15dcec353f45205ec38ea70b

Hebilicious/reproduire v0.0.9@4b686ae9cbb72dad60f001d278b6e3b2ce40a9ac

npm

client/package.json

@iconify-json/carbon ^1.1.32

@nuxt/devtools-kit ^1.2.0

@nuxt/kit ^3.11.2

package.json

@nuxt/devtools-kit ^1.2.0

@nuxt/kit ^3.11.2

chalk ^5.3.0

css-tree ^2.3.1

defu ^6.1.4

esbuild ^0.20.2

fontaine ^0.5.0

globby ^14.0.1

h3 ^1.11.1

jiti ^1.21.0

magic-regexp ^0.8.0

magic-string ^0.30.10

node-fetch-native ^1.6.4

ohash ^1.1.3

pathe ^1.1.2

sirv ^2.0.4

ufo ^1.5.3

unplugin ^1.10.1

unstorage ^1.10.2

@iconify-json/carbon ^1.1.32

@nuxt/eslint-config ^0.3.10

@nuxt/module-builder ^0.6.0

@nuxt/schema ^3.11.2

@nuxt/test-utils ^3.12.1

@types/css-tree ^2.3.7

@types/splitpanes ^2.2.6

@vitest/coverage-v8 ^1.5.3

birpc ^0.2.17

changelogen ^0.5.5

consola ^3.2.3

eslint ^9.1.1

execa ^8.0.1

nitropack ^2.9.6

nuxt ^3.11.2

ofetch ^1.3.4

playwright-core ^1.43.1

semver ^7.6.0

shiki ^1.4.0

typescript ^5.4.5

unbuild ^2.0.0

vite ^5.2.11

vitest ^1.5.3

vue-bundle-renderer ^2.0.0

vue-tsc ^2.0.16

pnpm 9.0.6

playground/package.json

@unocss/nuxt ^0.59.4

tailwindcss ^3.4.3

unocss ^0.59.4

sass ^1.76.0

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

"Tuples must be sorted" error with google fonts provider and multiple font weights

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',
  },
},

Font is not loading if the same font is registered in Font Book.

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.

Support use of CSS variables for font-family names

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

docs(readme): suggestions

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

improve font providers

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

Future of @nuxtjs/google-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?

Support for automatic `link rel="preload"` elements for fonts

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 },

investigate layout shift

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

Support for custom Google Fonts baseUrl

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.

Variable Fonts?

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.

ERROR: Could not download font metadata

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:    -
------------------------------

Tasks

Beta Give feedback

basic information here on usage and how the module works
example of how to write a custom provider (+ register one in a module)
more examples on customisation and advanced usage
Options

allow providers to provide font metrics

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

testing out `@nuxt/fonts`

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

Tasks

Beta Give feedback

Allow specifying text for font families

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

This font won't work on production: DM Serif Display

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

An error occurred from the font module of @nuxtjs to using nuxt/fonts

variable fonts support

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",
	},
},

Nuxt baseURL ignored when resolving cached font path

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)

Font is not loading

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.

nuxt/fonts does not honour the nuxt baseUrl setting

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 '/'?

Doc unclear how to use it with Unocss

Anyone can insight how to use it with Unocss ?

devtools integration/panel

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

Styles are not minified at build time

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)

cloudflare font provider

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

Strategy to use fonts installed as npm packages

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?

Local fonts with multiple weights but same name

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

Add support for font-stretch

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;
 }

Support Tailwind CSS v4

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;
}

adobe fonts provider

Allow downloading priority by extensions

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?

nuxt / fonts Goto Github PK

fonts's People

Contributors

Stargazers

Watchers

Forkers

fonts's Issues

Detected dependencies

Tasks

Tasks

Workaround

Recommend Projects

Recommend Topics

Recommend Org