Add next font package

package.json

@@ -62,6 +62,7 @@
     "@next/bundle-analyzer": "workspace:*",
     "@next/env": "workspace:*",
     "@next/eslint-plugin-next": "workspace:*",
+    "@next/font": "workspace:*",
     "@next/mdx": "workspace:*",
     "@next/plugin-storybook": "workspace:*",
     "@next/polyfill-module": "workspace:*",

packages/font/google/index.d.ts

@@ -0,0 +1 @@
+export * from '../dist/google'

packages/font/google/index.js

@@ -0,0 +1 @@
+module.exports = require('../dist/google')

packages/font/google/loader.d.ts

@@ -0,0 +1 @@
+export { default } from '../dist/google/loader'

packages/font/google/loader.js

@@ -0,0 +1 @@
+module.exports = require('../dist/google/loader')

packages/font/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "@next/font",
+  "version": "12.2.6-canary.9",
+  "repository": {
+    "url": "vercel/next.js",
+    "directory": "packages/font"
+  },
+  "files": [
+    "dist",
+    "google"
+  ],
+  "license": "MIT",
+  "scripts": {
+    "build": "rm -rf dist && tsc -d -p tsconfig.json",
+    "prepublishOnly": "cd ../../ && turbo run build",
+    "dev": "tsc -d -w -p tsconfig.json",
+    "typescript": "tsec --noEmit -p tsconfig.json"
+  }
+}

packages/font/scripts/update-google-fonts.js

@@ -0,0 +1,71 @@
+const fs = require('fs/promises')
+const path = require('path')
+
+;(async () => {
+  const { familyMetadataList } = await fetch(
+    'https://fonts.google.com/metadata/fonts'
+  ).then((r) => r.json())
+
+  let fontFunctions = `/* eslint-disable @typescript-eslint/no-unused-vars */
+  type Display = 'auto'|'block'|'swap'|'fallback'|'optional'
+  type FontModule = { className: string, variable: string, style: { fontFamily: string, fontWeight?: number, fontStyle?: string } }
+  function e():never { throw new Error('@next/font/google is not configured as a font loader') }
+  `
+  const fontData = {}
+  for (let { family, fonts, axes } of familyMetadataList) {
+    let hasItalic = false
+    const variants = Object.keys(fonts).map((variant) => {
+      if (variant.endsWith('i')) {
+        hasItalic = true
+        return `${variant.slice(0, 3)}-italic`
+      }
+      return variant
+    })
+
+    const hasVariableFont = axes.length > 0
+
+    let optionalAxes
+    if (hasVariableFont) {
+      variants.push('variable')
+      if (hasItalic) {
+        variants.push('variable-italic')
+      }
+
+      const nonWeightAxes = axes.filter(({ tag }) => tag !== 'wght')
+      if (nonWeightAxes.length > 0) {
+        optionalAxes = nonWeightAxes
+      }
+    }
+
+    fontData[family] = {
+      variants,
+      axes: hasVariableFont ? axes : undefined,
+    }
+    const optionalIfVariableFont = hasVariableFont ? '?' : ''
+    fontFunctions += `export function ${family.replaceAll(
+      ' ',
+      '_'
+    )}(options${optionalIfVariableFont}: {
+    variant${optionalIfVariableFont}:${variants
+      .map((variant) => `"${variant}"`)
+      .join('|')}
+    display?:Display,
+    preload?:boolean,
+    fallback?: string[]
+    ${
+      optionalAxes
+        ? `axes?:(${optionalAxes.map(({ tag }) => `'${tag}'`).join('|')})[]`
+        : ''
+    }
+    }):FontModule{e()}
+    `
+  }
+
+  await Promise.all([
+    fs.writeFile(path.join(__dirname, '../src/google/index.ts'), fontFunctions),
+    fs.writeFile(
+      path.join(__dirname, '../src/google/font-data.json'),
+      JSON.stringify(fontData, null, 2)
+    ),
+  ])
+})()