unjs/fontaine

Automatic font fallback based on font metrics

fontaine's Issues

Gatsby instructions

📚 Is your documentation request related to a problem?

I would like to see guidance on how to use fontaine with Gatsby.

We're using a pretty standard set up of Gatsby and Sass. I've installed fontaine using the below code in gatsby-node.js. However the override font-face rules aren't created and the font-family isn't being changed.

exports.onCreateWebpackConfig = ({ stage, actions, getConfig }) => {
  const config = getConfig();
  config.plugins.push(
    FontaineTransform.webpack({
      fallbacks: ['BlinkMacSystemFont', 'Segoe UI', 'Helvetica Neue', 'Arial', 'Noto Sans']
    })
  );
  actions.replaceWebpackConfig(config);
};

🔍 Where should you find it?

Ideally README.md

ℹ️ Additional context

No response

Need help configuring vite.config.mjs

📚 Is your documentation request related to a problem?

Hello, first of all, thank you for this project! I am getting started and was wondering if you could help me get off the ground.

I have a webpage that uses a custom font, GraphikCondensed, and it has significant CLS on Chrome for Android.

The fallback font is Roboto, but I am on a Mac, so Roboto has been installed on the Mac. The woff2 file for the custom font, GraphikCondensed, has been placed under the fonts directory in the playground.

In vite.config.mjs, I am not sure about what needs to be in the options.

This is what index.css looks like...

@font-face {
  font-family: 'GraphikCondensed';
  src: local('GraphikCondensed'), url(/fonts/GraphikXXCondensed-Bold-Web.992f2cf.woff2)
      format('woff2');
  font-display: swap;
  font-weight: 400;
  font-style: normal;
}

h1 {
  font-family: 'GraphikCondensed';
  font-size: 3rem;
  line-height: 1.1;
}

What should the configuration for vite.config.mjs be? This is what I currently have...

import { defineConfig } from 'vite'
import { FontaineTransform } from 'fontaine'

export default defineConfig({
  plugins: [
    FontaineTransform.vite({
      fallbacks: ['Roboto'],
      // resolve absolute URL -> file
      resolvePath: (id) => 'file:///Library/fonts/Roboto-Regular.ttf',
    }),
  ],
})

Also, these changes were made in the /playground directory, then pnpm demo:dev was run. However, when opening the css file, the file has not been changed, and the font metrics for the override are not present. I do not see any error messages, so am wondering if I should be running another command.

🔍 Where should you find it?

readme

ℹ️ Additional context

No response

Fontaine does not process fonts attached via Fontsource

🐛 The bug

When attaching fonts via Fontsource (4k stars on Github), a fallback font is added to font-family, but @font-face is not created for it.

🛠️ To reproduce

https://stackblitz.com/edit/github-xyllwv?file=index.css

🌈 Expected behaviour

The Roboto font in the demo should have a fallback font, but it doesn't.

ℹ️ Additional context

https://github.com/Serator/fontaine-with-fontsource - additional example with SvelteKit.

enable `size-adjust` metric calculation

Currently we can use metrics to adjust vertical height accurately. There's still a horizontal mismatch though, even if slight, and we can likely solve this by applying the right metrics to size-adjust.

CLI/programmatic usage

Any way of using this in a CLI? Maybe analyzing a URL and returning the generated font overrides? I guess you'd also need to provide the local files.

Upvote & Fund

• We're using Polar.sh so you can upvote and help fund this issue.
• We receive the funding once the issue is completed & confirmed by you.
• Thank you in advance for helping prioritize & fund our backlog.

Maige Usage

Thanks for trying Maige.

Running GPT-based services is pricey. At this point, we ask you to add payment info to continue using Maige.

Add payment info

Feel free to close this issue.

expose as postcss plugin

For platforms supporting postcss, it would be reasonable to benefit from postcss parsing rather than the current regexp based solution (which could remain fallback)

getMetricsForFamily returns null for font families containing multiple spaces (e.g., "IBM Plex Mono")

🐛 The bug

I'm trying to read the font metrics for IBM Plex Mono (this issue is actually reproducible with any typeface that has more than one space in its family name), but getMetricsForFamily is returning null. This is because of the following line of code:

https://github.com/danielroe/fontaine/blob/e7391ee7593f4e67dbdcb8fdfd045c5fcc3f9e62/src/metrics.ts#L15

Which should do a global replacement for spaces:

const name = camelCase(family).replace(/ /g, '')

🛠️ To reproduce

N/A (invoke getMetricsForFamily with IBM Plex Mono or any other font family with multiple spaces in its name)

🌈 Expected behaviour

Current behavior: IBM Plex Mono becomes iBMPlex Mono

Expected behavior: IBM Plex Mono becomes iBMPlexMono, allowing us to key in here correctly:

https://github.com/seek-oss/capsize/blob/42d6dc39d58247bc6b9e013a4b1c4463bf287dca/packages/metrics/src/entireMetricsCollection.json#L5842-L5852

ℹ️ Additional context

No response

Maige Usage

Thanks for trying Maige.

Running GPT-based services is pricey. At this point, we ask you to add payment info to continue using Maige.

Add payment info

Feel free to close this issue.

Usage with tailwind

🆒 Your use case

Update README to show usage with tailwind.

🆕 The solution you'd like

This is how I got it to work. The module adds the fallback fonts correctly but we need to tell tailwind the fallback font family name in order to actually use it.

// tailwind.config
module.exports = {
  theme: {
    extend: {
      fontFamily: {
		// For every font, provide another string in `${fontName} fallback` format
        plex: ["IBM Plex Sans Arabic", "IBM Plex Sans Arabic fallback"],
      },
    },
  },
};

🔍 Alternatives you've considered

No response

ℹ️ Additional info

I'd make a PR if the solution sounds good

Customize the font overridden name

🆒 Your use case

Probably in some case, we won't have that override name in the font name.

🆕 The solution you'd like

I would like to suggest to customize the overridden name.

🔍 Alternatives you've considered

I probably not understand well, so let me know if I'm wrong.

ℹ️ Additional info

No response

offer 'minimal' installation

Currently we include metrics for lots of fonts, which adds to install size. This is only in development, of course, but for users who know their font metrics it would be nice to offer a minimal option.

Parse font faces and consider font weight

🆒 Your use case

Sometimes we have this setup:

@font-face {
    font-family: 'Biennale';
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    src: url('~/assets/fonts/Biennale-Book.woff2') format('woff2'),
    url('~/assets/fonts/Biennale-Book.woff') format('woff');
}

@font-face {
    font-family: 'Biennale';
    font-weight: 500;
    font-display: swap;
    src: url('~/assets/fonts/Biennale-Medium.woff2') format('woff2'),
    url('~/assets/fonts/Biennale-Medium.woff') format('woff');
}

When fontaine is parsing the font-face it creates the override/fallback font-face without accounting for the weight.

@font-face {
  font-family: "Biennale override";
  src: local("BlinkMacSystemFont"),local("Segoe UI"),local("Roboto"),local("Helvetica Neue"),local("Arial"),local("Noto Sans");
  ascent-override: 94.4%;
  descent-override: 24.5%;
  line-gap-override: 0%;
}
@font-face {
    font-family: 'Biennale';
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    src: url('/_nuxt/assets/fonts/Biennale-Book.woff2') format('woff2'),
    url('/_nuxt/assets/fonts/Biennale-Book.woff') format('woff');
}
@font-face {
  font-family: "Biennale override";
  src: local("BlinkMacSystemFont"),local("Segoe UI"),local("Roboto"),local("Helvetica Neue"),local("Arial"),local("Noto Sans");
  ascent-override: 96.7%;
  descent-override: 26.5%;
  line-gap-override: 0%;
}
@font-face {
    font-family: 'Biennale';
    font-weight: 500;
    font-display: swap;
    src: url('/_nuxt/assets/fonts/Biennale-Medium.woff2') format('woff2'),
    url('/_nuxt/assets/fonts/Biennale-Medium.woff') format('woff');
}

🆕 The solution you'd like

We should probably add weight parsing, we should just probably parse it with regexp and add it on the created weight/override.

Expected result would be:

@font-face {
    font-family: "Biennale override";
    font-weight: 400;
    font-style: normal;
    src: local("BlinkMacSystemFont"),local("Segoe UI"),local("Roboto"),local("Helvetica Neue"),local("Arial"),local("Noto Sans");
    ascent-override: 94.4%;
    descent-override: 24.5%;
    line-gap-override: 0%;
}
@font-face {
    font-family: 'Biennale';
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    src: url('/_nuxt/assets/fonts/Biennale-Book.woff2') format('woff2'),
    url('/_nuxt/assets/fonts/Biennale-Book.woff') format('woff');
}
@font-face {
    font-family: "Biennale override";
    font-weight: 500;
    font-display: swap;
    src: local("BlinkMacSystemFont"),local("Segoe UI"),local("Roboto"),local("Helvetica Neue"),local("Arial"),local("Noto Sans");
    ascent-override: 96.7%;
    descent-override: 26.5%;
    line-gap-override: 0%;
}
@font-face {
    font-family: 'Biennale';
    font-weight: 500;
    font-display: swap;
    src: url('/_nuxt/assets/fonts/Biennale-Medium.woff2') format('woff2'),
    url('/_nuxt/assets/fonts/Biennale-Medium.woff') format('woff');
}

🔍 Alternatives you've considered

No response

ℹ️ Additional info

No response

getMetricsForFamily returns null for all fonts on 0.3.0

🐛 The bug

Only reproducible on [email protected]. May have regressed with the changes in c0f6483. To reproduce, clone the repo I created below, run npm install, and then node index.js.

Invoking getMetricsForFamily returns null for any legitimate font. Only reproducible in other packages that install fontaine, but not in fontaine itself in the test environment.

🛠️ To reproduce

https://github.com/AleksandrHovhannisyan/fontaine-131

🌈 Expected behaviour

The function should not return null. It's unclear why tests pass locally, but when I tried using [email protected] locally in my project, I was getting null no matter what I tried.

ℹ️ Additional context

No response

Dependency Dashboard

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

Awaiting Schedule

These updates are awaiting their schedule. Click on a checkbox to get an update now.

• chore(deps): pin dependencies (@antfu/eslint-config, simple-git-hooks)
• chore(deps): lock file maintenance

Pending Status Checks

These updates await pending status checks. To force their creation now, click the checkbox below.

• chore(deps): update dependency @capsizecss/metrics to v2.2.0
• chore(deps): update dependency @capsizecss/unpack to v2.1.0

Detected dependencies

github-actions

.github/workflows/ci.yml

• actions/checkout v4
• actions/setup-node v4
• actions/checkout v4
• actions/setup-node v4
• codecov/codecov-action v4

.github/workflows/release.yml

• actions/checkout v4
• actions/setup-node v4

npm

package.json

• @capsizecss/metrics ^2.1.1
• @capsizecss/unpack ^2.0.1
• magic-regexp ^0.8.0
• magic-string ^0.30.8
• pathe ^1.1.2
• ufo ^1.4.0
• unplugin ^1.8.3
• @antfu/eslint-config ^2.8.0
• @types/node 20.11.25
• @types/serve-handler 6.1.4
• @typescript-eslint/eslint-plugin 7.1.1
• @typescript-eslint/parser 7.1.1
• @vitest/coverage-v8 1.3.1
• bumpp 9.4.0
• eslint 8.57.0
• eslint-config-prettier 9.1.0
• execa 8.0.1
• get-port-please 3.1.2
• lint-staged 15.2.2
• serve-handler 6.1.5
• simple-git-hooks ^2.10.0
• typescript 5.4.2
• vite 5.1.5
• vitest 1.3.1
• pnpm 8.15.4

playground/package.json

• vite ^5.1.5

---

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

Doesn't seem to work with Webpack

🐛 The bug

Added as a regular webpack plugin in my config, when building (with or without the watch flag) the bundle, the font faces and the font-family are all untouched.

🛠️ To reproduce

https://stackblitz.com/edit/webpack-webpack-js-org-7bs3qn?file=webpack.config.js

🌈 Expected behaviour

It should apply the expected transformation per font.

ℹ️ Additional context

The config uses the following loaders for SCSS and CSS:

• MiniCssExtractPlugin
• css-loader
• postcss-loader
• sass-loader

It also uses stylelint to lint the files.

The postcss config is pretty straight forward as it consists of the default configurations of the following plugins:

• autoprefixer
• postcss-preset-env
• cssnano

Fonts are processed using Webpack 5's asset/module system (instead of file-loader for instance). "Static" fonts that aren't meant to change are not touched by webpack, but referenced in URLs (pointing to the correct file from the main css file's perspective).

NB: I've also tried with file-loader instead, the result is the same

Action Required: Fix Renovate Configuration

There is an error with this repository's Renovate configuration that needs to be fixed. As a precaution, Renovate will stop PRs until it is resolved.

Error type: Cannot find preset's package (:automergeEarlyMondays). Note: this is a nested preset so please contact the preset author if you are unable to fix it yourself.

The URL_RE doesn't work if the font URL contains a ")" close paren character

🐛 The bug

There are some packages, for example, the inter-ui NPM package (which is recommended by the official inter GH readme for NPM) which, very unfortunately, have parens in some of the folder names.

For example from the inter-ui package the fonts are under folders with parens in their names.

Example font file: inter-ui/Inter (web)/Inter-Regular.woff2

The URL_RE that fontaine is using is defined as

const URL_RE = createRegExp(
  exactly("url(").and(charNotIn(")").times.any().as("url")).and(")"),
  ["g"]
);

So no matter what it breaks with these URLs.

The problem is that source URL would get regex'd out as inter-ui/Inter (web and then the next check is to see if the source ends with one of the supported extensions (and since the regex mangled the URL, the extension was lost).

🛠️ To reproduce

https://stackblitz.com/edit/github-hdufeg?file=index.css

🌈 Expected behaviour

Parsing of the source url should support any valid URL characters

ℹ️ Additional context

No response

add framework examples

It would be good to add some sandboxes or example configurations so it's easy for people to get up-and-running with (at least):

• Angular
• Laravel
• Vite
• Next.js