How to add more fonts?

Following…

Hi there! If you’re comfortable editing theme files, then yes, in order to make more fonts available, you’ll need to add font families there to that area of Theme.json:

https://developer.wordpress.org/block-editor/how-to-guides/themes/theme-json/#presets

You’ll also need to use a separate function to enqueue the font files like you would in any other theme. Twenty Twenty-Two handles that here for its default font:

https://themes.trac.wordpress.org/browser/twentytwentytwo/1.0/functions.php#L90

Eventually, a fonts API should hopefully allow theme authors a way to handle this entirely from within theme.json.

https://github.com/WordPress/gutenberg/issues/35591

For users who want to add more fonts to their site and aren’t comfortable making these changes, I’d suggest looking to see if a plugin exists that does this for you.

Not sure if this is an acceptable solution for twenty-two but:

Hosting a modified copy of theme.json in a child(theme) folder works, less intrusive as well. Only requirement seems to be an appropriate style.css.

After adding new font entries to the typography.fontFamilies section, you may want to replace the default font slugs defined below because the editor won’t.

• This reply was modified 3 months, 3 weeks ago by dreaddymck.
• This reply was modified 3 months, 3 weeks ago by dreaddymck.

This may not be the appropriate solution but…

In this theme.json example the default slug is “system-font”

“fontFamilies”: [
{
“fontFamily”: “-apple-system,BlinkMacSystemFont,\”Segoe UI\”,Roboto,Oxygen-Sans,Ubuntu,Cantarell,\”Helvetica Neue\”,sans-serif”,
“name”: “System Font”,
“slug”: “system-font”
},

New font slug is: source-oswald-sans-serif

{
“fontFamily”: “Oswald, sans-serif”,
“name”: “Source Oswald sans-serif”,
“slug”: “source-oswald-sans-serif”
}

To change the default typography, find and replace the slug “system-font” with “source-oswald-sans-serif”.
Example

“core/post-title”: {
“typography”: {
“fontFamily”: “var(–wp–preset–font-family–system-font)”,
“fontWeight”: “300”,
“lineHeight”: “var(–wp–custom–typography–line-height–tiny)”,
“fontSize”: “var(–wp–custom–typography–font-size–gigantic)”
}
},

will look like:

“core/post-title”: {
“typography”: {
“fontFamily”: “var(–wp–preset–font-family–source-oswald-sans-serif)”,
“fontWeight”: “300”,
“lineHeight”: “var(–wp–custom–typography–line-height–tiny)”,
“fontSize”: “var(–wp–custom–typography–font-size–gigantic)”
}
},

Hi! I’m trying to add Gotham Narrow Book (+ bold and italic versions) to Twenty Twenty Two.

Here’s what I did in theme.json:

		"typography": {
			"dropCap": false,
			"fontFamilies": [
				{
					"fontFamily": "-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif",
					"name": "System Font",
					"slug": "system-font"
				},
				{
					"fontFamily": "Gotham Narrow Book\", sans-serif",
					"name": "Gotham Narrow Book",
					"slug": "GothamNarrow-BookItalic"
				},
				{
					"fontFamily": "Gotham Narrow Book Italic\", italic",
					"name": "Gotham Narrow Book Italic",
					"slug": "GothamNarrow-BookItalic"
				},
				{
					"fontFamily": "Gotham Narrow Bold\", bold",
					"name": "Gotham Narrow Bold",
					"slug": "GothamNarrow-Bold"
				},
				{
					"fontFamily": "Gotham Narrow Bold Italic\", bold-italic",
					"name": "Gotham Narrow Bold Italic",
					"slug": "GothamNarrow-BoldItalic"
				},
				{
					"fontFamily": "\"Source Serif Pro\", serif",
					"name": "Source Serif Pro",
					"slug": "source-serif-pro"
				}

Here’s what I did in functions.php:

	function twentytwentytwo_get_font_face_styles() {

		return "
		@font-face{
			font-family: 'Source Serif Pro';
			font-weight: 200 900;
			font-style: normal;
			font-stretch: normal;
			font-display: swap;
			src: url('" . get_theme_file_uri( 'assets/fonts/SourceSerif4Variable-Roman.ttf.woff2' ) . "') format('woff2');
		}

		@font-face {
			font-family: 'Gotham Narrow Book';
			src: url('assets/fonts/GothamNarrow-Book.eot');
			src: url('assets/fonts/GothamNarrow-Book.eot?#iefix') format('embedded-opentype'),
				url('assets/fonts/GothamNarrow-Book.woff2') format('woff2'),
				url('assets/fonts/GothamNarrow-Book.woff') format('woff'),
				url('assets/fonts/GothamNarrow-Book.ttf') format('truetype');
			font-weight: normal;
			font-style: normal;
		}
		
		@font-face {
			font-family: 'Gotham Narrow Bold';
			src: url('assets/fonts/GothamNarrow-Bold.eot');
			src: url('assets/fonts/GothamNarrow-Bold.eot?#iefix') format('embedded-opentype'),
				url('assets/fonts/GothamNarrow-Bold.woff2') format('woff2'),
				url('assets/fonts/GothamNarrow-Bold.woff') format('woff'),
				url('assets/fonts/GothamNarrow-Bold.ttf') format('truetype');
			font-weight: bold;
			font-style: normal;
		}
		
		@font-face {
			font-family: 'Gotham Narrow Book Italic';
			src: url('assets/fonts/GothamNarrow-BookItalic.eot');
			src: url('assets/fonts/GothamNarrow-BookItalic.eot?#iefix') format('embedded-opentype'),
				url('assets/fonts/GothamNarrow-BookItalic.woff2') format('woff2'),
				url('assets/fonts/GothamNarrow-BookItalic.woff') format('woff'),
				url('assets/fonts/GothamNarrow-BookItalic.ttf') format('truetype');
			font-weight: normal;
			font-style: italic;
		}
		
		@font-face {
			font-family: 'Gotham Narrow Bold Italic';
			src: url('assets/fonts/GothamNarrow-BoldItalic.eot');
			src: url('assets/fonts/GothamNarrow-BoldItalic.eot?#iefix') format('embedded-opentype'),
				url('assets/fonts/GothamNarrow-BoldItalic.woff2') format('woff2'),
				url('assets/fonts/GothamNarrow-BoldItalic.woff') format('woff'),
				url('assets/fonts/GothamNarrow-BoldItalic.ttf') format('truetype');
			font-weight: bold;
			font-style: italic;
		}

		@font-face{
			font-family: 'Source Serif Pro';
			font-weight: 200 900;
			font-style: italic;
			font-stretch: normal;
			font-display: swap;
			src: url('" . get_theme_file_uri( 'assets/fonts/SourceSerif4Variable-Italic.ttf.woff2' ) . "') format('woff2');
		}
		";

	}

I also added this in style.css:

@font-face {
    font-family: 'Gotham Narrow Book';
    src: url('assets/fonts/GothamNarrow-Book.eot');
    src: url('assets/fonts/GothamNarrow-Book.eot?#iefix') format('embedded-opentype'),
        url('assets/fonts/GothamNarrow-Book.woff2') format('woff2'),
        url('assets/fonts/GothamNarrow-Book.woff') format('woff'),
        url('assets/fonts/GothamNarrow-Book.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Gotham Narrow';
    src: url('assets/fonts/GothamNarrow-Bold.eot');
    src: url('assets/fonts/GothamNarrow-Bold.eot?#iefix') format('embedded-opentype'),
        url('assets/fonts/GothamNarrow-Bold.woff2') format('woff2'),
        url('assets/fonts/GothamNarrow-Bold.woff') format('woff'),
        url('assets/fonts/GothamNarrow-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Gotham Narrow Book';
    src: url('assets/fonts/GothamNarrow-BookItalic.eot');
    src: url('assets/fonts/GothamNarrow-BookItalic.eot?#iefix') format('embedded-opentype'),
        url('assets/fonts/GothamNarrow-BookItalic.woff2') format('woff2'),
        url('assets/fonts/GothamNarrow-BookItalic.woff') format('woff'),
        url('assets/fonts/GothamNarrow-BookItalic.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'Gotham Narrow';
    src: url('assets/fonts/GothamNarrow-BoldItalic.eot');
    src: url('assets/fonts/GothamNarrow-BoldItalic.eot?#iefix') format('embedded-opentype'),
        url('assets/fonts/GothamNarrow-BoldItalic.woff2') format('woff2'),
        url('assets/fonts/GothamNarrow-BoldItalic.woff') format('woff'),
        url('assets/fonts/GothamNarrow-BoldItalic.ttf') format('truetype');
    font-weight: bold;
    font-style: italic;
}

I can select the fonts in the editor but it looks the same as Source Serif Pro.

Does anyone know what I’m doing wrong? :O

i’m willing to change some stuff on the code, but i though Gutenberg + Twenty-Twenty-Two was in a more advanced state were i wouldn’t have to edit code for simple websites, i cant change the headings fonts through the editor, back to code i guess..

Hi @gustavmagnusson

Just added this to my functions.php, in addition to what you already did and described.

add_action( 'after_setup_theme', function() {
	if ( ! function_exists( 'rscom_wp_register_webfonts' ) ) {
		return;
	}
	rscom_wp_register_webfonts(
		array(
			array(
					'font-family'  => 'robotoregular',
					'font-weight'  => '400',
					'font-style'   => 'normal',
					'font-stretch' => 'normal',
					'src'          => array( 'file:./fonts/roboto-regular-webfont.woff'),
			),
			 array(
					'font-family'  => 'robotoitalic',
					'font-weight'  => '400',
					'font-style'   => 'italic',
					'font-stretch' => 'normal',
					'src'          => array( 'file:./fonts/roboto-italic-webfont.woff'),
			),
			array(
					'font-family'  => 'permanent_markerregular',
					'font-weight'  => '400',
					'font-style'   => 'normal',
					'font-stretch' => 'normal',
					'src'          => array( 'file:./fonts/permanentmarker-regular-webfont.woff'),
			)
		)

	);
} );

I can see the right font displayed in the header now, except from the backoffice, from the site editor ; I mean It’s displayed as a visitor.

But to be honest I am not so sure of this method.
Anyway it might help.
👍

• This reply was modified 1 month, 1 week ago by renansavidan.
• This reply was modified 1 month, 1 week ago by renansavidan.

@renansavidan

Hi! I tried your suggestion but I seem not to get how exactly to rename the functions…

If I replace all references to “twentytwentytwo” in function-strings with my custom function name (referring to my child theme) “child-theme-name” I get a wordpress error – site will not load…

Could you paste your child themes function.php here to see what you have done exactly?

Thanks a lot.
jhhh