var Component=(()=>{var d=Object.create;var i=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var k=Object.getOwnPropertyNames;var y=Object.getPrototypeOf,v=Object.prototype.hasOwnProperty;var x=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),f=(r,e)=>{for(var o in e)i(r,o,{get:e[o],enumerable:!0})},s=(r,e,o,t)=>{if(e&&typeof e=="object"||typeof e=="function")for(let l of k(e))!v.call(r,l)&&l!==o&&i(r,l,{get:()=>e[l],enumerable:!(t=p(e,l))||t.enumerable});return r};var u=(r,e,o)=>(o=r!=null?d(y(r)):{},s(e||!r||!r.__esModule?i(o,"default",{value:r,enumerable:!0}):o,r)),g=r=>s(i({},"__esModule",{value:!0}),r);var c=x((C,a)=>{a.exports=_jsx_runtime});var S={};f(S,{default:()=>b,frontmatter:()=>m});var n=u(c()),m={title:"How to optimize custom fonts with next/font",intro:"Next.js 13 introduced the next/font package which allows for optimized self-hosting for any font file. This means you can serve your own fonts or fonts from Google Fonts, use them with CSS variables and achieve zero layout shift.",datePublished:"05-11-2022",dateUpdated:"09-03-2023",isFeatured:!0,description:"next/font enables optimized self-hosting for any font file",headerImage:{src:"/images/blog/header-how-to-optimize-custom-fonts-with-next-font.svg",width:1440,height:1024,alt:"Three A characters increasing in size and intensity"},categories:["Frontend","CSS","React","Next.js"],meta:{keywords:["@next/font","next/font","Next.js","Performance","CSS","React","Web vitals"]}};function h(r){let e=Object.assign({nav:"nav",details:"details",summary:"summary",span:"span",ol:"ol",li:"li",a:"a",p:"p",code:"code",h2:"h2",div:"div",pre:"pre",em:"em",ul:"ul",h3:"h3"},r.components),{Alert:o}=e;return o||_("Alert",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.nav,{"aria-labelledby":"on-this-page",children:(0,n.jsxs)(e.details,{className:"details",children:[(0,n.jsx)(e.summary,{className:"details__summary",children:(0,n.jsx)(e.span,{id:"on-this-page",children:"On this page"})}),(0,n.jsxs)(e.ol,{className:"toc details__list details__list-1",children:[(0,n.jsx)(e.li,{className:"details__item details__item-h2",children:(0,n.jsx)(e.a,{className:"toc-link toc-link-h2",href:"#how-to-install-nextfont",children:"How to install @next/font"})}),(0,n.jsx)(e.li,{className:"details__item details__item-h2",children:(0,n.jsx)(e.a,{className:"toc-link toc-link-h2",href:"#goal-self-host-multiple-font-families-and-use-them-globally-with-css-variables",children:"Goal: self-host multiple font families and use them globally with CSS variables"})}),(0,n.jsx)(e.li,{className:"details__item details__item-h2",children:(0,n.jsx)(e.a,{className:"toc-link toc-link-h2",href:"#verifying-that-your-fonts-load-and-optimizations-work",children:"Verifying that your fonts load and optimizations work"})})]})]})}),` `,(0,n.jsx)(o,{type:"success",children:(0,n.jsxs)(e.p,{children:["You can now migrate to the built-in ",(0,n.jsx)(e.code,{children:"next/font"}),` by running `,(0,n.jsx)("br",{})," ",(0,n.jsx)(e.code,{children:"npx @next/codemod@latest built-in-next-font ."}),` \u{1F389} `,(0,n.jsx)("br",{})," ",(0,n.jsxs)(e.a,{href:"https://nextjs.org/docs/messages/built-in-next-font",className:"link-code",children:["The ",(0,n.jsx)(e.code,{children:"@next/font"}),` package will be removed in Next.js 14. `]})]})}),` `,(0,n.jsxs)(e.p,{children:["Of the many ",(0,n.jsx)(e.a,{href:"https://nextjs.org/blog/next-13",children:"exciting features announced in Next.js 13"}),", the new\xA0",(0,n.jsx)(e.a,{href:"https://nextjs.org/docs/basic-features/font-optimization",className:"link-code",children:(0,n.jsx)(e.code,{children:"@next/font"})}),"\xA0module is a humble yet powerful addition that significantly simplifies font optimization."]}),` `,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:"next/font"})," automatically optimizes your fonts and removes external network requests for improved privacy and performance. In addition, it generates fallback fonts with best-practices values for ",(0,n.jsx)(e.a,{href:"https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display",className:"link-code",children:(0,n.jsx)(e.code,{children:"font-display"})}),", ",(0,n.jsx)(e.a,{href:"https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/size-adjust",className:"link-code",children:(0,n.jsx)(e.code,{children:"size-adjust"})})," (and more) to achieve zero layout shift as your app loads."]}),` `,(0,n.jsxs)(e.p,{children:["Zero layout shift is important as it ensures that your app is ",(0,n.jsx)(e.a,{href:"https://web.dev/user-centric-performance-metrics/#types-of-metrics",children:"visually stable"}),", which is a ",(0,n.jsx)(e.a,{href:"https://web.dev/cls/",children:"web vitals metric (CLS)"})," relevant to how users perceive performance on the web. In short, web pages with less shifting and interference in the layout as the page loads are perceived as more performant."]}),` `,(0,n.jsxs)(e.h2,{id:"how-to-install-nextfont",children:["How to install ",(0,n.jsx)(e.code,{children:"@next/font"}),(0,n.jsx)(e.a,{"aria-hidden":"true",tabIndex:"-1",href:"#how-to-install-nextfont",children:(0,n.jsx)(e.span,{className:"icon icon-link"})})]}),` `,(0,n.jsx)(o,{children:(0,n.jsxs)(e.p,{children:["In Next.js 13.2 and later, ",(0,n.jsx)(e.code,{children:"next/font"}),` is built-in to Next.js and no longer needs to be installed.`]})}),` `,(0,n.jsx)(e.p,{children:"Add the package as a dependency to begin:"}),` `,(0,n.jsx)(e.div,{"data-rehype-pretty-code-fragment":"",children:(0,n.jsx)(e.pre,{style:{backgroundColor:"var(--shiki-color-background)"},tabIndex:"0","data-language":"sh","data-theme":"default",children:(0,n.jsxs)(e.code,{"data-language":"sh","data-theme":"default",children:[(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"yarn"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string)"},children:"add"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string)"},children:"@next/font"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:"# or"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"npm"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string)"},children:"i"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string)"},children:"@next/font"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:"# or"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"pnpm"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string)"},children:"i"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string)"},children:"@next/font"})]})]})})}),` `,(0,n.jsxs)(e.h2,{id:"goal-self-host-multiple-font-families-and-use-them-globally-with-css-variables",children:["Goal: self-host multiple font families and use them globally with CSS variables",(0,n.jsx)(e.a,{"aria-hidden":"true",tabIndex:"-1",href:"#goal-self-host-multiple-font-families-and-use-them-globally-with-css-variables",children:(0,n.jsx)(e.span,{className:"icon icon-link"})})]}),` `,(0,n.jsxs)(e.p,{children:["Defining CSS variables on ",(0,n.jsx)(e.code,{children:":root"})," or ",(0,n.jsx)(e.code,{children:"html"})," allows you to use that variable anywhere in your app. This is particularly useful when defining app-wide styling like fonts and colours."]}),` `,(0,n.jsx)(e.p,{children:"Take this contrived example:"}),` `,(0,n.jsxs)(e.div,{"data-rehype-pretty-code-fragment":"",children:[(0,n.jsx)(e.div,{"data-rehype-pretty-code-title":"","data-language":"html","data-theme":"default",children:"index.html"}),(0,n.jsx)(e.pre,{style:{backgroundColor:"var(--shiki-color-background)"},tabIndex:"0","data-language":"html","data-theme":"default",children:(0,n.jsxs)(e.code,{"data-language":"html","data-theme":"default",children:[(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"<"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"html"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"head"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"style"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:":root"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" {"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" --font-base"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'myFont'"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" }"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"body"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" {"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"font-family"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"var"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"(--font-base)"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" }"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"body"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"h1"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">G'day cobba \u{1F998}"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:""})]})]})})]}),` `,(0,n.jsxs)(e.p,{children:["With this approach, you can easily change your app's font by only changing one line of CSS. Additionally, your CSS is now far more robust as there's only one source of truth that defines exactly ",(0,n.jsx)(e.em,{children:"what"})," ",(0,n.jsx)(e.code,{children:"--font-base"})," actually is."]}),` `,(0,n.jsxs)(e.p,{children:["When using ",(0,n.jsx)(e.code,{children:"localFont"})," from ",(0,n.jsx)(e.code,{children:"next/font/local"})," you can load multiple font-families or font weights by passing in an array of items to ",(0,n.jsx)(e.code,{children:"src"}),"."]}),` `,(0,n.jsx)(e.div,{"data-rehype-pretty-code-fragment":"",children:(0,n.jsx)(e.pre,{style:{backgroundColor:"var(--shiki-color-background)"},tabIndex:"0","data-language":"tsx","data-theme":"default",children:(0,n.jsxs)(e.code,{"data-language":"tsx","data-theme":"default",children:[(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"myFont"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"localFont"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"({"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" src"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" ["})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" {"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" path"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'../assets/fonts/my-font-regular.woff2'"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" weight"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'300'"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" }"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" {"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" path"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'../assets/fonts/my-font-bold.woff2'"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" weight"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'600'"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" }"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" ]"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"})"})})]})})}),` `,(0,n.jsxs)(e.p,{children:["However, the approach in the ",(0,n.jsx)(e.a,{href:"https://nextjs.org/docs/api-reference/next/font#css-variables",children:"Next.js docs"})," doesn't cater to cases where you want to use the CSS variable on ",(0,n.jsx)(e.code,{children:"body"}),". In addition, using ",(0,n.jsx)(e.code,{children:"next/font"})," in ",(0,n.jsx)(e.code,{children:"_document.tsx"})," where the ",(0,n.jsx)(e.code,{children:"body"})," tag is rendered is also not supported."]}),` `,(0,n.jsx)(e.div,{"data-rehype-pretty-code-fragment":"",children:(0,n.jsx)(e.pre,{style:{backgroundColor:"var(--shiki-color-background)"},tabIndex:"0","data-language":"sh","data-theme":"default",children:(0,n.jsxs)(e.code,{"data-language":"sh","data-theme":"default",children:[(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"error"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string)"},children:"-"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string)"},children:"Font"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string)"},children:"loader"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string)"},children:"error:"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"Font"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string)"},children:"loaders"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string)"},children:"cannot"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string)"},children:"be"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string)"},children:"used"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string)"},children:"within"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string)"},children:"pages/_document.js."})]})]})})}),` `,(0,n.jsxs)(e.p,{children:["Working around this constraint is luckily straightforward by using ",(0,n.jsx)(e.code,{children:"

Popular posts