Font Anton Regular added - all weights displayed

bud
1

I just added the Google Anton font regular:

wp-content/themes/cafejp/resources/fonts/anton-v25-latin-regular.woff2

And it is loaded with

/* anton-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  src: url('@fonts/anton-v25-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

in

wp-content/themes/cafejp/resources/styles/common/fonts.css

and then in app.css and editor.css with

/*---------------------------------------------------
* Fonts
----------------------------------------------------*/
@import 'common/fonts';

And for tailwind.conf.js I have

/** @type {import('tailwindcss').Config} config */
const config = {
  content: ['./app/**/*.php', './resources/**/*.{php,vue,js}'],
  theme: {
    extend: {
      colors: {}, // Extend Tailwind's default colors
      fontFamily: {
        'anton': ['Anton', 'sans-serif'],
        'orbitron': ['Orbitron', 'sans-serif'],
        'asap-condensed': ['Asap Condensed', 'sans-serif'],
      },
      fontWeight: {
        'anton': {
          normal: '400', // Only load the regular weight for Anton
        },
      },
    },
  },
  plugins: [],
};

export default config;

which is adding font data to theme.json using bud.conf.js:

...
"typography": {
      "customFontSize": false,
      "fontFamilies": [
        {
          "fontFamily": "ui-sans-serif,system-ui,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol\",\"Noto Color Emoji\"",
          "name": "Ui-sans-serif",
          "slug": "sans"
        },
        {
          "fontFamily": "ui-serif,Georgia,Cambria,\"Times New Roman\",Times,serif",
          "name": "Ui-serif",
          "slug": "serif"
        },
        {
          "fontFamily": "ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,\"Liberation Mono\",\"Courier New\",monospace",
          "name": "Ui-monospace",
          "slug": "mono"
        },
        {
          "fontFamily": "Anton,sans-serif",
          "name": "Anton",
          "slug": "anton"
        },
        {
          "fontFamily": "Orbitron,sans-serif",
          "name": "Orbitron",
          "slug": "orbitron"
        },
        {
          "fontFamily": "Asap Condensed,sans-serif",
          "name": "Asap Condensed",
          "slug": "asap-condensed"
        }
      ],
...

When I choose the Font under Typography in the editor I somehow can choose any appearance so also thin, semi-bold, bold and so on.

Screenshot 2024-08-01 at 08.55.29
Screenshot 2024-08-01 at 08.55.291520×1366 114 KB

Should WordPress not just show regular and not the other fonts weights ?

2

When I moved fontWeight settings to bud.conf.js I did get it added to theme.json` . Here is the Bud file

/**
 * Compiler configuration
 *
 * @see {@link https://roots.io/sage/docs sage documentation}
 * @see {@link https://bud.js.org/learn/config bud.js configuration guide}
 *
 * @type {import('@roots/bud').Config}
 */
export default async (app) => {
  /**
   * Application assets & entrypoints
   *
   * @see {@link https://bud.js.org/reference/bud.entry}
   * @see {@link https://bud.js.org/reference/bud.assets}
   */
  app
    .entry('app', ['@scripts/app', '@styles/app'])
    .entry('editor', ['@scripts/editor', '@styles/editor'])
    .assets(['images']);

  /**
   * Set public path
   *
   * @see {@link https://bud.js.org/reference/bud.setPublicPath}
   */
  app.setPublicPath('/wp-content/themes/cafejp/public/');

  /**
   * Development server settings
   *
   * @see {@link https://bud.js.org/reference/bud.setUrl}
   * @see {@link https://bud.js.org/reference/bud.setProxyUrl}
   * @see {@link https://bud.js.org/reference/bud.watch}
   */
  app
    .setUrl('http://localhost:3000')
    .setProxyUrl('https://cafejpcoen.test')
    .watch(['resources/views', 'app']);

  /**
   * Generate WordPress `theme.json`
   *
   * @note This overwrites `theme.json` on every build.
   *
   * @see {@link https://bud.js.org/extensions/sage/theme.json}
   * @see {@link https://developer.wordpress.org/block-editor/how-to-guides/themes/theme-json}
   */
  app.wpjson
    .setSettings({
      background: {
        backgroundImage: true,
      },
      color: {
        custom: false,
        customDuotone: false,
        customGradient: false,
        defaultDuotone: false,
        defaultGradients: false,
        defaultPalette: false,
        duotone: [],
      },
      custom: {
        spacing: {},
        typography: {
          'font-size': {},
          'line-height': {},
            'font-weight': {
              'anton': {
                400: 'Regular',
              },
              'asap-condensed': {
                400: 'Regular',
                500: 'Medium',
              },
          },
        },
      },
      spacing: {
        padding: true,
        units: ['px', '%', 'em', 'rem', 'vw', 'vh'],
      },
      layout: {
        "contentSize": "60vw",
        "wideSize":" 80vw"
      },
      typography: {
        customFontSize: false,
      },
    })
    .useTailwindColors()
    .useTailwindFontFamily()
    .useTailwindFontSize();
};

and theme.json addition:

...
 "custom": {
      "spacing": {},
      "typography": {
        "font-size": {},
        "line-height": {},
        "font-weight": {
          "anton": {
            "400": "Regular"
          },
          "asap-condensed": {
            "400": "Regular",
            "500": "Medium"
          }
        }
      }
    },
...

issue now is that it still seems that for Anton for example I can still pick any font weight. Going to check possible other issues including caching.

3

Hey @jasperfrumau,

I recently had the same problem and found out that it’s currently not possible to do this:

Unfortunately, it is not possible to limit the font weights to those supported by the current font family. Many users have requested this feature, but the development team has not built it into Gutenberg yet.

Which is kind of a bummer, hope this gets implemented soon. :sweat_smile:

2 Likes
4

I see. Did not know that. Thanks for pointing this out to me @stefanreinprecht . Saved me more research and trials. Hope they will add it sooner rather than later.

1 Like