archive/rsnext
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Remove experimental fontLoaders option from next.config.js (#46886)

Browse source 
Currently there's an experimental option in `next.config.js` that lets you define default subset(s) to preload for all your fonts. [docs](https://nextjs.org/docs/basic-features/font-optimization#specifying-a-subset)

Over time we haven't seen much use of this option, and we are defining the subsets in the font function call in all our examples/docs. Imo it would be fine to drop this option.

This PR removes that experimental option. If you happen to use it you'll get a build error with [a link](f67af163cd/errors/google-fonts-missing-subsets.md).

Next step (breaking change for next major) would probably be to remove the preload and subsets properties from `next/font/google` calls, and just have something like [`preloadSubsets´](https://vercel.slack.com/archives/C8EAN8A94/p1674868993169559?thread_ts=1674707555.461809&cid=C8EAN8A94) that is required.
This commit is contained in:
Hannes Bornö 2023-03-13 22:34:43 +01:00 committed by GitHub
parent 49e8f2bbbf
commit cb729c1087
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
34 changed files with 129 additions and 276 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
docs/basic-features/font-optimization.md
View file

@ -117,29 +117,10 @@ export default function Home() {
Google Fonts are automatically [subset](https://fonts.google.com/knowledge/glossary/subsetting). This reduces the size of the font file and improves performance. You'll need to define which of these subsets you want to preload. Failing to specify any subsets while [`preload`](/docs/api-reference/next/font.md#preload) is true will result in a warning.
This can be done in 2 ways:
- On a font per font basis by adding it to the function call
```js
// pages/_app.js
const inter = Inter({ subsets: ['latin'] })
```
- Globally for all your fonts in your `next.config.js`
```js
// next.config.js
module.exports = {
experimental: {
fontLoaders: [
{ loader: 'next/font/google', options: { subsets: ['latin'] } },
],
},
}
```
- If both are configured, the subset in the function call is used.
```js
// pages/_app.js
const inter = Inter({ subsets: ['latin'] })
```
View the [Font API Reference](/docs/api-reference/next/font.md#nextfontgoogle) for more information.

17
errors/google-fonts-missing-subsets.md
View file

@ -8,26 +8,11 @@ Preload is enabled for a font that is missing a specified subset.
##### Specify which subsets to preload for that font.
- On a font per font basis by adding it to the function call
```js
const inter = Inter({ subsets: ['latin'] })
```
- Globally for all your fonts
```js
// next.config.js
module.exports = {
experimental: {
fontLoaders: [
{ loader: 'next/font/google', options: { subsets: ['latin'] } },
],
},
}
```
If both are configured, the subset in the function call is used.
Note: previously it was possible to specify default subsets in your `next.config.js` with the `experimental.fontLoaders` option, but this is no longer supported.
##### Disable preloading for that font

9
packages/font/src/google/loader.test.ts
View file

@ -126,8 +126,13 @@ describe('next/font/google loader', () => {
})
const { css } = await nextFontGoogleFontLoader({
functionName,
data: [{ adjustFontFallback: false, ...fontFunctionArguments }],
config: { subsets: [] },
data: [
{
adjustFontFallback: false,
subsets: [],
...fontFunctionArguments,
},
],
emitFontFile: jest.fn(),
resolve: jest.fn(),
loaderContext: {} as any,

3
packages/font/src/google/loader.ts
View file

@ -28,7 +28,6 @@ function escapeStringRegexp(str: string) {
const nextFontGoogleFontLoader: FontLoader = async ({
functionName,
data,
config,
emitFontFile,
isDev,
isServer,
@ -44,7 +43,7 @@ const nextFontGoogleFontLoader: FontLoader = async ({
adjustFontFallback,
variable,
subsets,
} = validateGoogleFontFunctionCall(functionName, data[0], config)
} = validateGoogleFontFunctionCall(functionName, data[0])
// Validate and get the font axes required to generated the URL
const fontAxes = getFontAxes(

99
packages/font/src/google/validate-google-font-function-call.test.ts
View file

@ -5,8 +5,7 @@ describe('validateFontFunctionCall errors', () => {
expect(() =>
validateGoogleFontFunctionCall(
'', // default import
undefined,
{ subsets: [] }
undefined
)
).toThrowErrorMatchingInlineSnapshot(
`"next/font/google has no default export"`
@ -15,19 +14,16 @@ describe('validateFontFunctionCall errors', () => {
test('Unknown font', () => {
expect(() =>
validateGoogleFontFunctionCall('Unknown_Font', undefined, { subsets: [] })
validateGoogleFontFunctionCall('Unknown_Font', undefined)
).toThrowErrorMatchingInlineSnapshot(`"Unknown font \`Unknown Font\`"`)
})
test('Unknown weight', () => {
expect(() =>
validateGoogleFontFunctionCall(
'Inter',
{ weight: '123' },
{
subsets: [],
}
)
validateGoogleFontFunctionCall('Inter', {
weight: '123',
subsets: ['latin'],
})
).toThrowErrorMatchingInlineSnapshot(`
"Unknown weight \`123\` for font \`Inter\`.
Available weights: \`100\`, \`200\`, \`300\`, \`400\`, \`500\`, \`600\`, \`700\`, \`800\`, \`900\`, \`variable\`"
@ -35,7 +31,7 @@ describe('validateFontFunctionCall errors', () => {
})
test('Missing weight for non variable font', () => {
expect(() => validateGoogleFontFunctionCall('Abel', {}, { subsets: [] }))
expect(() => validateGoogleFontFunctionCall('Abel', { subsets: ['latin'] }))
.toThrowErrorMatchingInlineSnapshot(`
"Missing weight for font \`Abel\`.
Available weights: \`400\`"
@ -44,13 +40,11 @@ describe('validateFontFunctionCall errors', () => {
test('Unknown style', () => {
expect(() =>
validateGoogleFontFunctionCall(
'Molle',
{ weight: '400', style: 'normal' },
{
subsets: [],
}
)
validateGoogleFontFunctionCall('Molle', {
weight: '400',
style: 'normal',
subsets: ['latin'],
})
).toThrowErrorMatchingInlineSnapshot(`
"Unknown style \`normal\` for font \`Molle\`.
Available styles: \`italic\`"
@ -59,13 +53,10 @@ describe('validateFontFunctionCall errors', () => {
test('Invalid display value', () => {
expect(() =>
validateGoogleFontFunctionCall(
'Inter',
{ display: 'Invalid' },
{
subsets: [],
}
)
validateGoogleFontFunctionCall('Inter', {
display: 'Invalid',
subsets: ['latin'],
})
).toThrowErrorMatchingInlineSnapshot(`
"Invalid display value \`Invalid\` for font \`Inter\`.
Available display values: \`auto\`, \`block\`, \`swap\`, \`fallback\`, \`optional\`"
@ -74,13 +65,10 @@ describe('validateFontFunctionCall errors', () => {
test('Variable in weight array', async () => {
expect(() =>
validateGoogleFontFunctionCall(
'Inter',
{ weight: ['100', 'variable'] },
{
subsets: [],
}
)
validateGoogleFontFunctionCall('Inter', {
weight: ['100', 'variable'],
subsets: ['latin'],
})
).toThrowErrorMatchingInlineSnapshot(
`"Unexpected \`variable\` in weight array for font \`Inter\`. You only need \`variable\`, it includes all available weights."`
)
@ -88,28 +76,7 @@ describe('validateFontFunctionCall errors', () => {
test('Invalid subset in call', async () => {
expect(() =>
validateGoogleFontFunctionCall(
'Inter',
{ subsets: ['latin', 'oops'] },
{
subsets: [],
}
)
).toThrowErrorMatchingInlineSnapshot(`
"Unknown subset \`oops\` for font \`Inter\`.
Available subsets: \`cyrillic\`, \`cyrillic-ext\`, \`greek\`, \`greek-ext\`, \`latin\`, \`latin-ext\`, \`vietnamese\`"
`)
})
test('Invalid subset in config', async () => {
expect(() =>
validateGoogleFontFunctionCall(
'Inter',
{},
{
subsets: ['latin', 'oops'],
}
)
validateGoogleFontFunctionCall('Inter', { subsets: ['latin', 'oops'] })
).toThrowErrorMatchingInlineSnapshot(`
"Unknown subset \`oops\` for font \`Inter\`.
Available subsets: \`cyrillic\`, \`cyrillic-ext\`, \`greek\`, \`greek-ext\`, \`latin\`, \`latin-ext\`, \`vietnamese\`"
@ -117,22 +84,22 @@ describe('validateFontFunctionCall errors', () => {
})
test('Missing subsets in config and call', async () => {
expect(() =>
validateGoogleFontFunctionCall('Inter', {}, {})
).toThrowErrorMatchingInlineSnapshot(
`"Missing selected subsets for font \`Inter\`. Please specify subsets in the function call or in your \`next.config.js\`. Read more: https://nextjs.org/docs/messages/google-fonts-missing-subsets"`
)
expect(() => validateGoogleFontFunctionCall('Inter', {}))
.toThrowErrorMatchingInlineSnapshot(`
"Preload is enabled but no subsets were specified for font \`Inter\`. Please specify subsets or disable preloading if your intended subset can't be preloaded.
Available subsets: \`cyrillic\`, \`cyrillic-ext\`, \`greek\`, \`greek-ext\`, \`latin\`, \`latin-ext\`, \`vietnamese\`
Read more: https://nextjs.org/docs/messages/google-fonts-missing-subsets"
`)
})
test('Setting axes on non variable font', async () => {
expect(() =>
validateGoogleFontFunctionCall(
'Abel',
{ weight: '400', axes: [] },
{
subsets: [],
}
)
validateGoogleFontFunctionCall('Abel', {
weight: '400',
axes: [],
subsets: ['latin'],
})
).toThrowErrorMatchingInlineSnapshot(
`"Axes can only be defined for variable fonts"`
)

16
packages/font/src/google/validate-google-font-function-call.ts
View file

@ -20,8 +20,7 @@ type FontOptions = {
*/
export function validateGoogleFontFunctionCall(
functionName: string,
fontFunctionArgument: any,
config: any
fontFunctionArgument: any
): FontOptions {
let {
weight,
@ -32,11 +31,8 @@ export function validateGoogleFontFunctionCall(
fallback,
adjustFontFallback = true,
variable,
subsets: callSubsets,
subsets,
} = fontFunctionArgument || ({} as any)
// Get the subsets defined for the font from either next.config.js or the function call. If both are present, pick the function call subsets.
const subsets = callSubsets ?? config?.subsets ?? []
if (functionName === '') {
nextFontError(`next/font/google has no default export`)
}
@ -52,10 +48,12 @@ export function validateGoogleFontFunctionCall(
if (availableSubsets.length === 0) {
// If the font doesn't have any preloadeable subsets, disable preload
preload = false
} else {
if (preload && !callSubsets && !config?.subsets) {
} else if (preload) {
if (!subsets) {
nextFontError(
`Missing selected subsets for font \`${fontFamily}\`. Please specify subsets in the function call or in your \`next.config.js\`. Read more: https://nextjs.org/docs/messages/google-fonts-missing-subsets`
`Preload is enabled but no subsets were specified for font \`${fontFamily}\`. Please specify subsets or disable preloading if your intended subset can't be preloaded.\nAvailable subsets: ${formatAvailableValues(
availableSubsets
)}\n\nRead more: https://nextjs.org/docs/messages/google-fonts-missing-subsets`
)
}
subsets.forEach((subset: string) => {

5
packages/font/src/local/loader.test.ts
View file

@ -6,7 +6,6 @@ describe('next/font/local loader', () => {
const { css } = await nextFontLocalFontLoader({
functionName: '',
data: [{ src: './my-font.woff2' }],
config: {},
emitFontFile: () => '/_next/static/media/my-font.woff2',
resolve: jest.fn(),
isDev: false,
@ -33,7 +32,6 @@ describe('next/font/local loader', () => {
const { css } = await nextFontLocalFontLoader({
functionName: '',
data: [{ src: './my-font.woff2', weight: '100 900', style: 'italic' }],
config: {},
emitFontFile: () => '/_next/static/media/my-font.woff2',
resolve: jest.fn(),
isDev: false,
@ -70,7 +68,6 @@ describe('next/font/local loader', () => {
],
},
],
config: {},
emitFontFile: () => '/_next/static/media/my-font.woff2',
resolve: jest.fn(),
isDev: false,
@ -123,7 +120,6 @@ describe('next/font/local loader', () => {
adjustFontFallback: false,
},
],
config: {},
emitFontFile: () => `/_next/static/media/my-font.woff2`,
resolve: jest.fn(),
isDev: false,
@ -195,7 +191,6 @@ describe('next/font/local loader', () => {
adjustFontFallback: false,
},
],
config: {},
emitFontFile: () => `/_next/static/media/my-font.woff2`,
resolve: jest.fn(),
isDev: false,

1
packages/next/font/index.d.ts vendored
View file

@ -10,7 +10,6 @@ export type FontLoader = (options: {
functionName: string
variableName: string
data: any[]
config: any
emitFontFile: (
content: Buffer,
ext: string,

56
packages/next/src/build/webpack/config/blocks/css/index.ts
View file

@ -186,50 +186,28 @@ export const css = curry(async function css(
const localLoader = require.resolve(
'next/dist/compiled/@next/font/local/loader'
)
const googleLoaderOptions =
ctx.experimental?.fontLoaders?.find(
(loaderConfig) =>
loaderConfig.loader === '@next/font/google' ||
loaderConfig.loader === 'next/font/google'
)?.options ?? {}
const fontLoaders: Array<[string | RegExp, string, any?]> = [
[
require.resolve('next/font/google/target.css'),
googleLoader,
googleLoaderOptions,
],
const nextFontLoaders: Array<[string | RegExp, string, any?]> = [
[require.resolve('next/font/google/target.css'), googleLoader],
[require.resolve('next/font/local/target.css'), localLoader],
// TODO: remove this in the next major version
[
/node_modules[\\/]@next[\\/]font[\\/]google[\\/]target.css/,
googleLoader,
googleLoaderOptions,
],
[/node_modules[\\/]@next[\\/]font[\\/]google[\\/]target.css/, googleLoader],
[/node_modules[\\/]@next[\\/]font[\\/]local[\\/]target.css/, localLoader],
]
fontLoaders.forEach(
([fontLoaderTarget, fontLoaderPath, fontLoaderOptions]) => {
// Matches the resolved font loaders noop files to run next-font-loader
fns.push(
loader({
oneOf: [
markRemovable({
sideEffects: false,
test: fontLoaderTarget,
use: getNextFontLoader(
ctx,
lazyPostCSSInitializer,
fontLoaderPath,
fontLoaderOptions
),
}),
],
})
)
}
)
nextFontLoaders.forEach(([fontLoaderTarget, fontLoaderPath]) => {
// Matches the resolved font loaders noop files to run next-font-loader
fns.push(
loader({
oneOf: [
markRemovable({
sideEffects: false,
test: fontLoaderTarget,
use: getNextFontLoader(ctx, lazyPostCSSInitializer, fontLoaderPath),
}),
],
})
)
})
// CSS cannot be imported in _document. This comes before everything because
// global CSS nor CSS modules work in said file.

4
packages/next/src/build/webpack/config/blocks/css/loaders/next-font.ts
View file

@ -6,8 +6,7 @@ import { cssFileResolve } from './file-resolve'
export function getNextFontLoader(
ctx: ConfigurationContext,
postcss: any,
fontLoaderPath: string,
fontLoaderOptions: any
fontLoaderPath: string
): webpack.RuleSetUseItem[] {
const loaders: webpack.RuleSetUseItem[] = []
@ -64,7 +63,6 @@ export function getNextFontLoader(
isServer: ctx.isServer,
assetPrefix: ctx.assetPrefix,
fontLoaderPath,
fontLoaderOptions,
postcss,
},
})

27
packages/next/src/build/webpack/loaders/next-font-loader/index.ts
View file

@ -1,16 +1,15 @@
import type { FontLoader } from '../../../../../font'
import { promises as fs } from 'fs'
import path from 'path'
import chalk from 'next/dist/compiled/chalk'
import loaderUtils from 'next/dist/compiled/loader-utils3'
import postcssNextFontPlugin from './postcss-next-font'
import { promisify } from 'util'
import { CONFIG_FILES } from '../../../../shared/lib/constants'
export default async function nextFontLoader(this: any) {
const fontLoaderSpan = this.currentTraceSpan.traceChild('next-font-loader')
return fontLoaderSpan.traceAsyncFn(async () => {
const nextFontLoaderSpan =
this.currentTraceSpan.traceChild('next-font-loader')
return nextFontLoaderSpan.traceAsyncFn(async () => {
const callback = this.async()
/**
@ -47,28 +46,9 @@ export default async function nextFontLoader(this: any) {
isServer,
assetPrefix,
fontLoaderPath,
fontLoaderOptions,
postcss: getPostcss,
} = this.getOptions()
const nextConfigPaths = CONFIG_FILES.map((config) =>
path.join(this.rootContext, config)
)
// Add next.config.js as a dependency, loaders must rerun in case options changed
await Promise.all(
nextConfigPaths.map(async (configPath) => {
const hasConfig = await fs.access(configPath).then(
() => true,
() => false
)
if (hasConfig) {
this.addDependency(configPath)
} else {
this.addMissingDependency(configPath)
}
})
)
/**
* Emit font files to .next/static/media as [hash].[ext].
*
@ -111,7 +91,6 @@ export default async function nextFontLoader(this: any) {
functionName,
variableName,
data,
config: fontLoaderOptions,
emitFontFile,
resolve: (src: string) =>
promisify(this.resolve)(

14
packages/next/src/server/config-schema.ts
View file

@ -420,20 +420,6 @@ const configSchema = {
workerThreads: {
type: 'boolean',
},
fontLoaders: {
items: {
additionalProperties: false,
properties: {
loader: {
type: 'string',
},
options: {},
},
type: 'object',
required: ['loader'],
},
type: 'array',
} as any,
webVitalsAttribution: {
type: 'array',
items: {

2
packages/next/src/server/config-shared.ts
View file

@ -194,8 +194,6 @@ export interface ExperimentalConfig {
*/
serverComponentsExternalPackages?: string[]
fontLoaders?: Array<{ loader: string; options?: any }>
webVitalsAttribution?: Array<typeof WEB_VITALS[number]>
turbo?: ExperimentalTurboOptions

1
test/e2e/app-dir/next-font/next.config.js
View file

@ -1,6 +1,5 @@
module.exports = {
experimental: {
appDir: true,
fontLoaders: [],
},
}

7
test/e2e/next-font/app-old/components/CompWithFonts.js
View file

@ -1,5 +1,10 @@
import { Inter, Roboto } from '@next/font/google'
const inter = Inter({ weight: '900', display: 'swap', preload: false })
const inter = Inter({
weight: '900',
display: 'swap',
preload: false,
subsets: ['latin'],
})
const roboto = Roboto({
weight: '100',
style: 'italic',

10
test/e2e/next-font/app-old/next.config.js
View file

@ -1,10 +0,0 @@
module.exports = {
experimental: {
fontLoaders: [
{
loader: '@next/font/google',
options: { subsets: ['latin'] },
},
],
},
}

2
test/e2e/next-font/app-old/pages/_app.js
View file

@ -1,5 +1,5 @@
import { Open_Sans } from '@next/font/google'
const openSans = Open_Sans({ variable: '--open-sans' })
const openSans = Open_Sans({ variable: '--open-sans', subsets: ['latin'] })
function MyApp({ Component, pageProps }) {
return (

2
test/e2e/next-font/app-old/pages/variable-font-without-weight-range.js
View file

@ -1,6 +1,6 @@
import { Nabla } from '@next/font/google'
const nabla = Nabla()
const nabla = Nabla({ subsets: ['latin'] })
export default function VariableFontWithoutWeightRange() {
return (

4
test/e2e/next-font/app-old/pages/variables.js
View file

@ -1,18 +1,20 @@
import { Fira_Code, Roboto } from '@next/font/google'
import localFont from '@next/font/local'
const firaCode = Fira_Code({ variable: '--fira-code' })
const firaCode = Fira_Code({ variable: '--fira-code', subsets: ['latin'] })
const roboto = Roboto({
weight: '100',
style: 'italic',
display: 'swap',
preload: true,
variable: '--roboto-100-italic',
subsets: ['latin'],
})
const myFont = localFont({
src: '../fonts/my-font.woff2',
preload: false,
variable: '--my-font',
subsets: ['latin'],
})
export default function WithFonts() {

1
test/e2e/next-font/app-old/pages/with-fallback.js
View file

@ -4,6 +4,7 @@ const openSans = Open_Sans({
fallback: ['system-ui', 'Arial'],
variable: '--open-sans',
adjustFontFallback: false,
subsets: ['latin'],
})
const myFont = localFont({

15
test/e2e/next-font/app-old/pages/with-google-fonts.js
View file

@ -1,18 +1,27 @@
import { Fraunces, Indie_Flower, Roboto } from '@next/font/google'
const indieFlower = Indie_Flower({ weight: '400', preload: false })
const fraunces = Fraunces({ weight: '400', preload: false })
const indieFlower = Indie_Flower({
weight: '400',
preload: false,
subsets: ['latin'],
})
const fraunces = Fraunces({ weight: '400', preload: false, subsets: ['latin'] })
const robotoMultiple = Roboto({
weight: ['900', '100'],
style: ['normal', 'italic'],
subsets: ['latin'],
})
const frauncesMultiple = Fraunces({
style: ['italic', 'normal'],
axes: ['SOFT', 'WONK', 'opsz'],
subsets: ['latin'],
})
const frauncesMultipleWeights = Fraunces({ weight: ['100', '400', '900'] })
const frauncesMultipleWeights = Fraunces({
weight: ['100', '400', '900'],
subsets: ['latin'],
})
export default function WithFonts() {
return (

7
test/e2e/next-font/app/components/CompWithFonts.js
View file

@ -1,5 +1,10 @@
import { Inter, Roboto } from 'next/font/google'
const inter = Inter({ weight: '900', display: 'swap', preload: false })
const inter = Inter({
weight: '900',
display: 'swap',
preload: false,
subsets: ['latin'],
})
const roboto = Roboto({
weight: '100',
style: 'italic',

10
test/e2e/next-font/app/next.config.js
View file

@ -1,10 +0,0 @@
module.exports = {
experimental: {
fontLoaders: [
{
loader: 'next/font/google',
options: { subsets: ['latin'] },
},
],
},
}

2
test/e2e/next-font/app/pages/_app.js
View file

@ -1,5 +1,5 @@
import { Open_Sans } from 'next/font/google'
const openSans = Open_Sans({ variable: '--open-sans' })
const openSans = Open_Sans({ variable: '--open-sans', subsets: ['latin'] })
function MyApp({ Component, pageProps }) {
return (

2
test/e2e/next-font/app/pages/variable-font-without-weight-range.js
View file

@ -1,6 +1,6 @@
import { Nabla } from 'next/font/google'
const nabla = Nabla()
const nabla = Nabla({ subsets: ['latin'] })
export default function VariableFontWithoutWeightRange() {
return (

3
test/e2e/next-font/app/pages/variables.js
View file

@ -1,13 +1,14 @@
import { Fira_Code, Roboto } from 'next/font/google'
import localFont from 'next/font/local'
const firaCode = Fira_Code({ variable: '--fira-code' })
const firaCode = Fira_Code({ variable: '--fira-code', subsets: ['latin'] })
const roboto = Roboto({
weight: '100',
style: 'italic',
display: 'swap',
preload: true,
variable: '--roboto-100-italic',
subsets: ['latin'],
})
const myFont = localFont({
src: '../fonts/my-font.woff2',

2
test/e2e/next-font/app/pages/with-fallback.js
View file

@ -4,12 +4,14 @@ const openSans = Open_Sans({
fallback: ['system-ui', 'Arial'],
variable: '--open-sans',
adjustFontFallback: false,
subsets: ['latin'],
})
const myFont = localFont({
fallback: ['system-ui', 'Arial'],
src: '../fonts/my-font.woff2',
adjustFontFallback: false,
subsets: ['latin'],
})
export default function WithFonts() {

15
test/e2e/next-font/app/pages/with-google-fonts.js
View file

@ -1,18 +1,27 @@
import { Fraunces, Indie_Flower, Roboto } from 'next/font/google'
const indieFlower = Indie_Flower({ weight: '400', preload: false })
const fraunces = Fraunces({ weight: '400', preload: false })
const indieFlower = Indie_Flower({
weight: '400',
preload: false,
subsets: ['latin'],
})
const fraunces = Fraunces({ weight: '400', preload: false, subsets: ['latin'] })
const robotoMultiple = Roboto({
weight: ['900', '100'],
style: ['normal', 'italic'],
subsets: ['latin'],
})
const frauncesMultiple = Fraunces({
style: ['italic', 'normal'],
axes: ['SOFT', 'WONK', 'opsz'],
subsets: ['latin'],
})
const frauncesMultipleWeights = Fraunces({ weight: ['100', '400', '900'] })
const frauncesMultipleWeights = Fraunces({
weight: ['100', '400', '900'],
subsets: ['latin'],
})
export default function WithFonts() {
return (

3
test/e2e/next-font/index.test.ts
View file

@ -31,9 +31,6 @@ describe('next/font', () => {
pages: new FileRef(join(__dirname, `${fixture}/pages`)),
components: new FileRef(join(__dirname, `${fixture}/components`)),
fonts: new FileRef(join(__dirname, `${fixture}/fonts`)),
'next.config.js': new FileRef(
join(__dirname, `${fixture}/next.config.js`)
),
},
dependencies: {
'@next/font': 'canary',

3
test/e2e/next-font/with-font-declarations-file.test.ts
View file

@ -33,9 +33,6 @@ describe('next/font/google with-font-declarations-file', () => {
'my-font.woff2': new FileRef(
join(__dirname, 'with-font-declarations-file/my-font.woff2')
),
'next.config.js': new FileRef(
join(__dirname, 'with-font-declarations-file/next.config.js')
),
},
env: {
NEXT_FONT_GOOGLE_MOCKED_RESPONSES: mockedGoogleFontResponses,

10
test/e2e/next-font/with-font-declarations-file/fonts.js
View file

@ -7,12 +7,16 @@ import {
Roboto,
} from 'next/font/google'
const openSans = Open_Sans()
const openSans = Open_Sans({ subsets: ['latin'] })
const sourceCodePro = Source_Code_Pro({ display: 'swap', preload: false })
const abel = Abel({ weight: '400', display: 'optional', preload: false })
export const inter = Inter({ display: 'block', preload: true })
export const roboto = Roboto({ weight: '400' })
export const inter = Inter({
display: 'block',
preload: true,
subsets: ['latin'],
})
export const roboto = Roboto({ weight: '400', subsets: ['latin'] })
export const myLocalFont = localFont({
src: './my-font.woff2',

10
test/e2e/next-font/with-font-declarations-file/next.config.js
View file

@ -1,10 +0,0 @@
module.exports = {
experimental: {
fontLoaders: [
{
loader: '@next/font/google',
options: { subsets: ['latin'] },
},
],
},
}

6
test/e2e/next-font/without-preloaded-fonts.test.ts
View file

@ -25,9 +25,6 @@ describe('next/font/google without-preloaded-fonts without _app', () => {
'pages/without-fonts.js': new FileRef(
join(__dirname, 'without-preloaded-fonts/pages/without-fonts.js')
),
'next.config.js': new FileRef(
join(__dirname, 'without-preloaded-fonts/next.config.js')
),
},
env: {
NEXT_FONT_GOOGLE_MOCKED_RESPONSES: mockedGoogleFontResponses,
@ -82,9 +79,6 @@ describe('next/font/google no preloads with _app', () => {
'pages/without-fonts.js': new FileRef(
join(__dirname, 'without-preloaded-fonts/pages/without-fonts.js')
),
'next.config.js': new FileRef(
join(__dirname, 'without-preloaded-fonts/next.config.js')
),
},
env: {
NEXT_FONT_GOOGLE_MOCKED_RESPONSES: mockedGoogleFontResponses,

10
test/e2e/next-font/without-preloaded-fonts/next.config.js
View file

@ -1,10 +0,0 @@
module.exports = {
experimental: {
fontLoaders: [
{
loader: '@next/font/google',
options: { subsets: ['latin'] },
},
],
},
}