• Resolved sg23838586

    (@sg23838586)


    Is there a way to add custom fonts to this theme? I am not super familiar with making child themes for Gutenberg. Perhaps there is an easier way?

Viewing 4 replies - 1 through 4 (of 4 total)
  • Theme Author Anders Norén

    (@anlino)

    @sg23838586 Not without creating a child theme with a different set of fontfamilies added in the theme.json, as far as I know. At least not if you want the font families to work correctly in the Global Styles section of the Site Editor.

    Thread Starter sg23838586

    (@sg23838586)

    Thanks for a super fast response 😀

    I am trying to add Source Sans Pro. I have managed to add a child theme, and I have added all the TTF files to beaumont-child\assets\fonts:

    SourceSerifPro-Black.ttf
    SourceSerifPro-BlackItalic.ttf
    SourceSerifPro-Bold.ttf
    SourceSerifPro-BoldItalic.ttf
    SourceSerifPro-ExtraLight.ttf
    SourceSerifPro-ExtraLightItalic.ttf
    SourceSerifPro-Italic.ttf
    SourceSerifPro-Light.ttf
    SourceSerifPro-LightItalic.ttf
    SourceSerifPro-Regular.ttf
    SourceSerifPro-SemiBold.ttf
    SourceSerifPro-SemiBoldItalic.ttf

    I have made a new empty theme.json file, but I am not sure how to add all these fonts to the theme.json file.

    The theme.json file in Beaumont is huge. Do you really write all that by yourself? 😵

    Theme Author Anders Norén

    (@anlino)

    @sg23838586 No worries! If you add the contents of the code block below to the theme.json file in your child theme, you should be good to go:

    {
    	"$schema": "https://schemas.wp.org/trunk/theme.json",
    	"settings": {
    		"typography": {
    			"fontFamilies": [
    				{
    					"fontFace": [
    						{
    							"fontFamily": "Source Serif Pro",
    							"fontStretch": "normal",
    							"fontStyle": "normal",
    							"fontWeight": "200",
    							"src": [
    								"file:./assets/fonts/SourceSerifPro-ExtraLight.ttf"
    							]
    						},
    						{
    							"fontFamily": "Source Serif Pro",
    							"fontStretch": "normal",
    							"fontStyle": "italic",
    							"fontWeight": "200",
    							"src": [
    								"file:./assets/fonts/SourceSerifPro-ExtraLightItalic.ttf"
    							]
    						},
    						{
    							"fontFamily": "Source Serif Pro",
    							"fontStretch": "normal",
    							"fontStyle": "normal",
    							"fontWeight": "300",
    							"src": [
    								"file:./assets/fonts/SourceSerifPro-Light.ttf"
    							]
    						},
    						{
    							"fontFamily": "Source Serif Pro",
    							"fontStretch": "normal",
    							"fontStyle": "italic",
    							"fontWeight": "300",
    							"src": [
    								"file:./assets/fonts/SourceSerifPro-LightItalic.ttf"
    							]
    						},
    						{
    							"fontFamily": "Source Serif Pro",
    							"fontStretch": "normal",
    							"fontStyle": "normal",
    							"fontWeight": "400",
    							"src": [
    								"file:./assets/fonts/SourceSerifPro-Regular.ttf"
    							]
    						},
    						{
    							"fontFamily": "Source Serif Pro",
    							"fontStretch": "normal",
    							"fontStyle": "italic",
    							"fontWeight": "400",
    							"src": [
    								"file:./assets/fonts/SourceSerifPro-Italic.ttf"
    							]
    						},
    						{
    							"fontFamily": "Source Serif Pro",
    							"fontStretch": "normal",
    							"fontStyle": "normal",
    							"fontWeight": "600",
    							"src": [
    								"file:./assets/fonts/SourceSerifPro-SemiBold.ttf"
    							]
    						},
    						{
    							"fontFamily": "Source Serif Pro",
    							"fontStretch": "normal",
    							"fontStyle": "italic",
    							"fontWeight": "600",
    							"src": [
    								"file:./assets/fonts/SourceSerifPro-SemiBoldItalic.ttf"
    							]
    						},
    						{
    							"fontFamily": "Source Serif Pro",
    							"fontStretch": "normal",
    							"fontStyle": "normal",
    							"fontWeight": "700",
    							"src": [
    								"file:./assets/fonts/SourceSerifPro-Bold.ttf"
    							]
    						},
    						{
    							"fontFamily": "Source Serif Pro",
    							"fontStretch": "normal",
    							"fontStyle": "italic",
    							"fontWeight": "700",
    							"src": [
    								"file:./assets/fonts/SourceSerifPro-BoldItalic.ttf"
    							]
    						},
    						{
    							"fontFamily": "Source Serif Pro",
    							"fontStretch": "normal",
    							"fontStyle": "normal",
    							"fontWeight": "900",
    							"src": [
    								"file:./assets/fonts/SourceSerifPro-Black.ttf"
    							]
    						},
    						{
    							"fontFamily": "Source Serif Pro",
    							"fontStretch": "normal",
    							"fontStyle": "italic",
    							"fontWeight": "900",
    							"src": [
    								"file:./assets/fonts/SourceSerifPro-BlackItalic.ttf"
    							]
    						}
    					],
    					"fontFamily": "\"Source Serif Pro\", ui-serif, serif",
    					"name": "Source Serif Pro",
    					"slug": "child-font"
    				}
    			]
    		}
    	},
    	"version": 2
    }

    Note that this code replaces all of the font families included in Beaumont itself, so the theme will look a bit busted at first. When you’ve added the code and activated the theme:

    1. Go to Appearance → Editor
    2. Click the Global Styles icon in the top right
    3. Click Typography → Text in the panel, and
    4. Change the “Font” setting from “Default” to “Source Serif Pro”.

    Let me know how it goes!

    I did write pretty much all of the the theme.json file myself, but when you’ve released themes with 4000+ lines of CSS, 700+ lines of JSON doesn’t seem so bad 😃

    Thread Starter sg23838586

    (@sg23838586)

    Thanks! I wouldn’t have made it without you.

    It seems to work 👍

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘Custom fonts’ is closed to new replies.