# Font Anton Regular added - all weights displayed

**URL:** https://discourse.roots.io/t/font-anton-regular-added-all-weights-displayed/27843
**Category:** bud
**Tags:** sage10
**Created:** 2024-08-01T01:53:39Z
**Posts:** 4

## Post 1 by @jasperfrumau — 2024-08-01T01:53:39Z

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](https://discourse.roots.io/uploads/default/original/2X/e/ea337575f28e8805cebc43258f726a448a7f919b.png)  
Should WordPress not just show regular and not the other fonts weights ?

---

## Post 2 by @jasperfrumau — 2024-08-01T05:43:09Z

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.

---

## Post 3 by @stefanreinprecht — 2024-08-01T07:41:13Z

Hey @jasperfrumau,

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

> **[Theme.json typography: Line height, font weight and more](https://fullsiteediting.com/lessons/theme-json-typography-font-styles/#h-font-weight)**
>
> In this lesson I bring up the theme.json font style settings as well as line height, font weight and text decoration settings.

> 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:

---

## Post 4 by @jasperfrumau — 2024-08-01T08:08:19Z

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.