Sage 10 - Tailwind - Proper way to include custom fonts in Gutenberg editor

ierpe · October 10, 2022, 9:13am

Hi there, I cannot find in the documentation the proper way to load custom fonts within Gutenberg.

I’ve read this topic : How to add custom fonts in the editor and this topic : Absolute / domain-relative path for asset URLs in CSS - #5 by strarsis

I filled the theme.json file, it’s working for my font-icon but not for a regular font… And I find it unpractical.

Is there not a way to just use @import with relative path in app.css, then import app.css in editor.css and get it to work ?
A proper exemple with a font-icon and a regular custom web font would be much appreciated, cheers.

ben · October 10, 2022, 2:20pm

Why is it working for one and not the other? What is unpractical about using theme.json?

Have you already updated your Tailwind config with the fonts? What’s it look like?

ierpe · October 10, 2022, 8:09pm

Here is my Tailwind configuration :

module.exports = {
  content: ["./index.php", "./app/**/*.php", "./resources/**/*.{php,vue,js}"],
  theme: {
    extend: {
      fontFamily: {
        'TTFirsNeue': ['TT Firs Neue'],
        'icomoon': ['icomoon'],
      },
      colors: {
      },
      typography: (theme) => ({
        DEFAULT: {
          css: {
            h1: {
              'font-family': theme('fontFamily.TTFirsNeue'),
              'font-weight': '600',
              'text-transform': 'uppercase',
            },
            h2: {
              'font-family': theme('fontFamily.TTFirsNeue'),
              'font-size': '46px',
              'font-weight': '800',
              'text-transform': 'uppercase',
              'margin-top': '.5em',
              'margin-bottom': '.5em',
            },
            a: {
              '&:not(.go-to-next-section)': {
                'font-weight': 'bold',
                'text-decoration': 'underline',
                'color': '#AB8ED9',
                'font-style': 'italic'
              },
            },
            p: {
              'line-height': '1.5rem',
            },
          },
        },
      }),
    },
  },
  plugins: [
    require('@tailwindcss/typography'),
    require('@tailwindcss/forms'),
    function ({ addVariant }) {
      addVariant('child', '& > *');
      addVariant('child-hover', '& > *:hover');
    },
  ],
};

Within my app.css, I declared the fonts like this (then I import app.css in editor.css) :

@font-face {
  font-family: 'TT Firs Neue';
  src: url('fonts/TTFirsNeue-Medium.eot');
  src: local('TT Firs Neue Medium'), local('TTFirsNeue-Medium'),
    url('fonts/TTFirsNeue-Medium.eot?#iefix') format('embedded-opentype'),
    url('fonts/TTFirsNeue-Medium.woff2') format('woff2'),
    url('fonts/TTFirsNeue-Medium.woff') format('woff'),
    url('fonts/TTFirsNeue-Medium.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'TT Firs Neue';
  src: url('fonts/TTFirsNeue-MediumItalic.eot');
  src: local('TT Firs Neue Medium Italic'), local('TTFirsNeue-MediumItalic'),
    url('fonts/TTFirsNeue-MediumItalic.eot?#iefix') format('embedded-opentype'),
    url('fonts/TTFirsNeue-MediumItalic.woff2') format('woff2'),
    url('fonts/TTFirsNeue-MediumItalic.woff') format('woff'),
    url('fonts/TTFirsNeue-MediumItalic.ttf') format('truetype');
  font-weight: normal;
  font-style: italic;
}

@font-face {
  font-family: 'TT Firs Neue';
  src: url('fonts/TTFirsNeue-Bold.eot');
  src: local('TT Firs Neue Bold'), local('TTFirsNeue-Bold'),
    url('fonts/TTFirsNeue-Bold.eot?#iefix') format('embedded-opentype'),
    url('fonts/TTFirsNeue-Bold.woff2') format('woff2'),
    url('fonts/TTFirsNeue-Bold.woff') format('woff'),
    url('fonts/TTFirsNeue-Bold.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: 'TT Firs Neue';
  src: url('fonts/TTFirsNeue-BoldItalic.eot');
  src: local('TT Firs Neue Bold Italic'), local('TTFirsNeue-BoldItalic'),
    url('fonts/TTFirsNeue-BoldItalic.eot?#iefix') format('embedded-opentype'),
    url('fonts/TTFirsNeue-BoldItalic.woff2') format('woff2'),
    url('fonts/TTFirsNeue-BoldItalic.woff') format('woff'),
    url('fonts/TTFirsNeue-BoldItalic.ttf') format('truetype');
  font-weight: bold;
  font-style: italic;
}

@font-face {
  font-family: 'TT Firs Neue';
  src: url('fonts/TTFirsNeue-ExtraBold.eot');
  src: local('TT Firs Neue ExtraBold'), local('TTFirsNeue-ExtraBold'),
    url('fonts/TTFirsNeue-ExtraBold.eot?#iefix') format('embedded-opentype'),
    url('fonts/TTFirsNeue-ExtraBold.woff2') format('woff2'),
    url('fonts/TTFirsNeue-ExtraBold.woff') format('woff'),
    url('fonts/TTFirsNeue-ExtraBold.ttf') format('truetype');
  font-weight: 800;
  font-style: normal;
}

@font-face {
  font-family: 'TT Firs Neue';
  src: url('fonts/TTFirsNeue-ExtraBoldItalic.eot');
  src: local('TT Firs Neue ExtraBold Italic'), local('TTFirsNeue-ExtraBoldItalic'),
    url('fonts/TTFirsNeue-ExtraBoldItalic.eot?#iefix') format('embedded-opentype'),
    url('fonts/TTFirsNeue-ExtraBoldItalic.woff2') format('woff2'),
    url('fonts/TTFirsNeue-ExtraBoldItalic.woff') format('woff'),
    url('fonts/TTFirsNeue-ExtraBoldItalic.ttf') format('truetype');
  font-weight: 800;
  font-style: italic;
}

@font-face {
  font-family: 'TT Firs Neue';
  src: url('fonts/TTFirsNeue-Italic.eot');
  src: local('TT Firs Neue Italic'), local('TTFirsNeue-Italic'),
    url('fonts/TTFirsNeue-Italic.eot?#iefix') format('embedded-opentype'),
    url('fonts/TTFirsNeue-Italic.woff2') format('woff2'),
    url('fonts/TTFirsNeue-Italic.woff') format('woff'),
    url('fonts/TTFirsNeue-Italic.ttf') format('truetype');
  font-weight: normal;
  font-style: italic;
}

@font-face {
  font-family: 'icomoon';
  src: url('fonts/icomoon.eot?lfoop7');
  src: url('fonts/icomoon.eot?lfoop7#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?lfoop7') format('truetype'),
    url('fonts/icomoon.woff?lfoop7') format('woff'),
    url('fonts/icomoon.svg?lfoop7#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

[class^="icon-"],
[class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-diamond:before {
  content: "\e900";
}

My theme.json :


{
  "$schema": "https://schemas.wp.org/trunk/theme.json",
  "version": 2,
  "settings": {
    "color": {
      "palette": [
        {
          "slug": "primary",
          "color": "#525ddc",
          "name": "Primary"
        }
      ],
      "custom": false,
      "customGradient": false,
      "defaultPalette": false,
      "defaultGradients": false
    },
    "custom": {
      "spacing": {},
      "typography": {
        "font-size": {},
        "line-height": {}
      }
    },
    "spacing": {
      "padding": true,
      "units": ["px", "%", "em", "rem", "vw", "vh"]
    },
    "typography": {
      "customFontSize": false,
      "fontFamilies": [
        {
          "fontFamily": "icomoon",
          "name": "icomoon",
          "slug": "icomoon",
          "fontFace": [
            {
              "fontFamily": "icomoon",
              "src": ["file:./resources/fonts/icomoon.ttf"]
            }
          ]
        },
        {
          "fontFamily": "TT Firs Neue",
          "name": "TT Firs Neue",
          "slug": "tt-firs-neue",
          "fontFace": [
            {
              "fontFamily": "TT Firs Neue",
              "fontWeight": "normal",
              "src": ["file:./resources/fonts/icoTTFirsNeue-Medium.ttf"]
            },
            {
              "fontFamily": "TT Firs Neue",
              "fontWeight": "normal",
              "fontStyle": "italic",
              "src": ["file:./resources/fonts/icoTTFirsNeue-MediumItalic.ttf"]
            },
            {
              "fontFamily": "TT Firs Neue",
              "fontWeight": "bold",
              "src": ["file:./resources/fonts/icoTTFirsNeue-Bold.ttf"]
            },
            {
              "fontFamily": "TT Firs Neue",
              "fontWeight": "bold",
              "fontStyle": "italic",
              "src": ["file:./resources/fonts/icoTTFirsNeue-BoldItalic.ttf"]
            },
            {
              "fontFamily": "TT Firs Neue",
              "fontWeight": 800,
              "src": ["file:./resources/fonts/icoTTFirsNeue-ExtraBold.ttf"]
            },
            {
              "fontFamily": "TT Firs Neue",
              "fontWeight": 800,
              "fontStyle": "italic",
              "src": ["file:./resources/fonts/icoTTFirsNeue-ExtraBoldItalic.ttf"]
            }
          ]
        }
      ]
    }
  }
}

The fonticon (icomoon) is working, but the TT Firs Neue is not (within the editor, on the frontend it’s working).

What I don’t understand is why the @font-face relative URLs in my app.css are working on the frontend but not within the editor (instead of the url to mysite.com/app/themes/mytheme/ressources/fonts/… it’s trying to load the fonts at mysite.com/fonts/… )
Should I just remove the @font-face from the CSS files and just add them to the theme.json ? (I tried, but then it’s not working on the frontend anymore). In the end if I have to fill the CSS files and the theme.json, it feels like double the work.

As you can see I’m kind of lost here I just would like to know the proper and most efficient way of using custom fonts with Sage and Gutenberg.

ben · October 10, 2022, 8:34pm

This should be fixed by adding setPublicPath to your Bud config:

github.com

roots/sage/blob/20f92ebe642fe1b97a35f52bf27b220676f7f6df/bud.config.mjs#L39-L42


      
          /**
           * URI of the `public` directory
           */
          .setPublicPath("/app/themes/sage/public/")

Add the font to your Tailwind config.
Add the font to your CSS. Make sure the editor CSS is including this same CSS.

You’ve already done these things

FYI - Sage now automatically generates theme.json from a Tailwind config. You might want to consider pulling that update into your theme.

ierpe · October 11, 2022, 1:40pm

Thanks for the answer, I already have this in my bud config :


// @ts-check

/**
 * Build configuration
 *
 * @see {@link https://bud.js.org/guides/getting-started/configure}
 * @param {import('@roots/bud').Bud} app
 */
export default async (app) => {
  app
    /**
     * Application entrypoints
     */
    .entry({
      app: ["@scripts/app", "@styles/app"],
      editor: ["@scripts/editor", "@styles/editor"],
    })

    /**
     * Directory contents to be included in the compilation
     */
    .assets(["images"])

    /**
     * Matched files trigger a page reload when modified
     */
    .watch(["resources/views/**/*", "app/**/*"])

    /**
     * Proxy origin (`WP_HOME`)
     */
    .proxy("https://seer.test")

    /**
     * Development origin
     */
    .serve("http://localhost:3000")
    // .serve("https://localhost:3000", {
    //   cert: '/Users/pierre/localhost.pem',
    //   key: '/Users/pierre/localhost-key.pem',
    // })

    /**
     * URI of the `public` directory
     */
    .setPublicPath("/app/themes/sage/public/");
};

ierpe · October 13, 2022, 9:53am

Ok I get it now from the update

But from what I have tried, I still cannot get it to work

Given my Tailwind config, how should the Bud config look like to get the custom fonts working ? Do I have to copy the content of my Tailwind config within the Bud config ?

I am still getting 404 for the fonts within Gutenberg

ben · October 13, 2022, 2:34pm

Your Tailwind config is not valid/not setup to customize fonts correctly. See the Tailwind docs for the proper format.

Well… what’s the path? Why is it 404ing? What needs to change to make it not 404?

ierpe · October 19, 2022, 9:29am

Hey, I finally found (one of) the culprit, of course it’s me

My public path was set to /app/themes/sage/public/ but my theme is not named sage

I still have another problem but I think it’s regarding https / http. Once I have a fully working solution I will update this topic. Thanks for the support.