Support » Theme: Twenty Twenty-Two » How to add more fonts?

  • Hi,

    I’m testing Twenty Twenty-Two theme and I just can see three options in font family settings: Default, System font and Source Sans Pro.

    How can I add more fonts to this list? I would like to add more and assign a sans font to headers.

    Is this possible? I can’t find any way to do it.

    Thanks!

Viewing 15 replies - 1 through 15 (of 17 total)
  • Following…

    I *think* you have to add the extra font information in the theme.json file, by editing this section:

    “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”: “\”Source Serif Pro\”, serif”,
    “name”: “Source Serif Pro”,
    “slug”: “source-serif-pro”
    }

    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.

    Thread Starter axsu

    (@axsu)

    Hi @timoelliott and @kjellr,

    Thank you very much for your answers, but I’m not comfortable editing code. πŸ™‚

    I like the theme so I’m going to wait for a while, maybe they will add more fonts.

    I don’t understand why everyone says “Don’t install too many plugins” but the solution for many basic things is always “Install a plugin”. πŸ™

    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.

    Could you please clarify ‘replace the default font slugs defined below because the editor won’t’?

    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 too was looking for a solution to add more fonts without changing the code.

    I added this module that add google fonts to my site – and everything looks o.k. – but still in the header section it’s the wrong font.

    So I added this to my CSS via the Dashboard => Appearance => Customize => Additional CSS:

    * {font-family:”Courier New”, Courier, monospace}

    And I think now it’s working.

    I really hope that in next releases changing fonts will be added to the theme directly

    Regards,
    Ram

    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 also added the font’s in assets/fonts/)

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

    Up!
    @gustavmagnusson I am stuck there too.
    I did what you describe.

    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

    (@renansavidan)

    ERRATUM

    For those following this topic.
    I changed my code (and don’t use that register function anymore)
    Actually I copied to my child theme and my functions.php all I found in the parent 2022 theme functions.php :
    https://github.com/WordPress/twentytwentytwo/blob/trunk/functions.php

    I just renamed the functions.
    An doing so my fonts display on the website AND from the backoffice, admin.
    Hope it helps.
    It seems neater to me but if anyone official can confirm this is the right method, it would be appreciated.
    Thanks,
    Renan.

    jhhh

    (@jhhh)

    @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

Viewing 15 replies - 1 through 15 (of 17 total)
  • You must be logged in to reply to this topic.