How to Change Typography in WordPress to use System Fonts with the theme.json file

This guide explains how to manually set up system fonts in a WordPress block theme using the theme.json file. It covers defining font families like Arial and Helvetica, configuring CSS variables, and applying typography settings to different site elements such as body text and headings. The process ensures that your WordPress site displays the correct fonts, even when defaults like Times New Roman are present. Perfect for users looking to customize their site's typography without relying on pre-installed fonts.

[@Black1991Star]

How did set up source and types for fonts ?

[@elliottrichmondwp]

You don't need a src (source) when loading system fonts. When adding them to the fontFamily property, you should list the primary font first, followed by any secondary fallbacks, and finally, the generic font-in this example, "sans-serif." Tomorrow's video will cover bundling custom fonts, where you will need to add a source. :)

[@Sonya_Makepeace]

First! Elliot, can you make a video about using media queries in Wordpress? I know I've mentioned this a few times before. But some of my blog pages end up squashed into narrow columns until they get to the mobile setting, where they then go to a column.

[@elliottrichmondwp]

Is it a Classic Theme or a Block Theme? Also do you have a link I can look at?

[@Sonya_Makepeace]

@@elliottrichmondwp It is a block theme. But it's on my home server.

[@elliottrichmondwp]

Ah, okay. It's difficult to diagnose your particular issue without seeing what's going on under the hood, but for what it’s worth... If it’s a blog post, check if the sidebar is squeezing the text into a narrow column. If that’s the case, you might need to take a look at the 'single' post template.