NextJS font optimization
Last modified on Wed 18 May 2022


Applications often need custom fonts which cannot be found within the system fonts of all the operating systems. Because of that you either have the fonts locally in the project or use them via CDN (mostly used from Google Fonts). Both approaches have their pros and cons, so NextJS took pros from each and implemented a good optimization.

Additionally, and related to the fonts, there were reports of issues with NextJS in some browsers where blank screens appeared when opening applications, even if the content is loaded (reference). The issues were related to the fonts and how NextJS handled them when using them via CDN. So the optimization also tackles this.

Disclaimer - Font optimization currently supports only Google Fonts and Typekit (no self-hosted fonts can be optimized yet).


Since version 10.2, NextJS has built-in web font optimization. In the optimization the fonts will be downloaded and inlined at the build time (as the <style> tag).

To support this add the following link tag to _document.js:

// pages/_document.js

import Document, { Html, Head, Main, NextScript } from 'next/document';

class MyDocument extends Document {
    render() {
        return (

                    <Main />
                    <NextScript />

export default MyDocument;

You can also opt-out of the optimization:

// next.config.js

module.exports = {
  optimizeFonts: false,

More details can be found in the NextJS Font Optimization documentation.


In case you are using custom fonts coming from a CDN, NextJS will (by default) download the font files and serve them from the project directory, the same way it would be done if you manually added the custom font files yourself.