Own font in Twenty Twenty Four

Hi! I did this using plugins:
Create Block Theme plugin worked ok. Tried also Custom Fonts plugin, good as well.

Thank you very much for your answers.

I have already tried the Custom Fonts plugin, but although it shows me that the fonts are set up correctly, I cannot select my own font in the corresponding “Typography” menu. There are still only the options “Standard”, “Inter”, “Cardo” and “System font” to choose from.

I have also tried integrating the fonts via the Customizer (which doesn’t really exist in Twenty Twenty Four) without success. I would also prefer to do it properly via the styles.css of the child theme.

So far it has worked wonderfully with dozens of themes and WP installations to simply change the font. Why doesn’t it work now? What am I doing wrong?

I have now found what appears to be a good solution, which I would like to share with anyone who has a similar problem:

If you activate the “Create Block Theme” plugin created by WordPress, there is a new navigation item “Manage Theme Fonts” in the “Design” menu. This takes you to a font manager where you can delete unused fonts and add new ones from Google or via upload:

https://www.ads-software.com/plugins/create-block-theme/

Thanks anyway to the helpers.

Hi

Great solutions, and i think where the problem is.

If you set the font family in theme json as this (it’s an example and the fonts are in my child theme in a /fonts/public directory)

{
"fontFamily": "DM Sans",
"fontWeight": "500",
"fontStyle": "normal",
"fontStretch": "normal",
"src": ["file:./fonts/public/DMSans-Medium.ttf"]
}

the system return a 404 error (from google chrome inspector):

https://localhost/wp-content/themes/twentytwentyfour/fonts/public/DMSans-Medium.ttf net::ERR_ABORTED 404 (Not Found).

Where i can find the code where the system sets this url?

This dosn’t happens with a twentythree.

Thanks!

• This reply was modified 10 months, 1 week ago by lopezacceseo.

Following worked for me:

Short: Create a child-style, and add the font as in themes.json

Long:

textbook installation of font (same problem here: font not visible)

create folder twentytwentyfour-child/styles
copy twentytwentyfour/styles/ice.json
into twentytwentyfour-child/styles/ice-child.json
Change title (line 4)

copy font-declaration from twentytwentyfour-child/theme.json into ice-child.json

In wordpress

select child-theme
select new child-style
HORRAY: find new font (perhaps after reload/CTRL-F5 few times)

• This reply was modified 10 months, 1 week ago by steschtue.
• This reply was modified 10 months, 1 week ago by steschtue.

As the above didn’t work for me either I wondered if I could just refer to the child directory by going down to the themes folder and then into the child this way:

“fontFace”: [
{
“fontFamily”: “XYZ”,
“fontStyle”: “normal”,
“src”: [“file:./../24-child/fonts/xyz.woff2”]
…

This works for me, but you may not rename your childs folder then.

Initially I could not upload a font.

After switching the language back to English (United States), uploading a font was not a problem!

All of the solutions for a custom font suggested above are a bit complicated or don’t work.

But it’s now much easier: In the website editor in the Styles, Typography section: Here you can specify the fonts useed in the theme and upload new fonts.