Twenty Twenty Two Font Control

  • saturn3

    (@saturn3)


    2 years, 2 months ago

    I am crazy for building an entire site using just the blocks and customization of Twenty Twenty Two. But here I am.

    And I do not like the default headers font. What is my best option to change them? I am thinking generally of H1-H6 and but really any other serif font that crops up on this theme.

    I think I could:

    1) Set up a child theme with a duplicate json where I register some new fonts and try to remember to update the json if the theme ever gets updated. I am not sure this would even help because if I go to the global styles for blocks (by opening any template and then going to the upper right and clicking on the “black and white cookie” icon, and then selecting the header blocks), I do not see a pop up to select added fonts.

    2) Set up a child theme with a duplicate json where I change this code:
    ___________________________________

    "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"
				}

    ________________________________________

    Keeping the name and slug the same but change the fontFamily to what I want. Again, remebering to update the json if the theme ever updates. (ugh)

    3) Brute force CSS where I attached a CSS sheet in the child theme and then adjust each heading and element (H1, H2, or anything else) on a style by style basis. Which precludes the need for global styles but I have no hooks to change those. Alas.

    (As a side note, there is no place for Custom CSS anymore, right? I have to either attach a sheet or use a plug-in, is this correct).

    So those are the three options I have. I do not like any of them, really.

    Help? S.O.S. etc. Thanks!

    • This topic was modified 2 years, 2 months ago by saturn3.
    • This topic was modified 2 years, 2 months ago by saturn3.
    • This topic was modified 2 years, 2 months ago by saturn3.
    • This topic was modified 2 years, 2 months ago by t-p.
Viewing 8 replies - 1 through 8 (of 8 total)
  • webfed

    (@webfederatie)

    2 years, 2 months ago

    Good questions. I can only help you with custom css, you will find it here https://your-domain.com/wp-admin/customize.php

    pseudorandomnumber

    (@pseudorandomnumber)

    2 years, 2 months ago

    I used this plugin for custom fonts: https://dineshkarki.com.np/use-any-font
    Works great.

    amanandhishoe

    (@amanandhishoe)

    2 years, 1 month ago

    There was the promise that child themes and css files would be a thing of the past with the new Style editor, but go there and it is so sparse.

    yellink

    (@yellink)

    1 year, 10 months ago

    Hi,
    Did you find a solution to change font in TT2 (child theme for me), without plug-in of course?

    katmacau

    (@katmacau)

    1 year, 7 months ago

    I would like a solution for this too! I tried setting up a child theme with a json file that covered the fonts. But no luck.

    I was able to add a child style.css file and that recognised my custom CSS. However it almost seems like my theme.json is not being observed. This is my child theme.json:

    `{
    “version”: 2,
    “settings”: {

    “typography”: {
    “dropCap”: false,
    “fontFamilies”: [
    {
    “fontFamily”:”Roboto,\”Helvetica Neue\”,sans-serif”,
    “name”: “System Font”,
    “slug”: “system-font”
    },
    {
    “fontFamily”: “\”IBM Plex Sans\”, sans-serif”,
    “name”: “IBM Plex Sans”,
    “slug”: “ibm-plex-sans”,
    “fontFace”: [
    {
    “fontFamily”: “IBMPlexSans-Light.woff2”,
    “fontWeight”: “400”,
    “fontStyle”: “normal”,
    “fontStretch”: “normal”,
    “src”: [ “file:./twentytwentytwo/assets/fonts/ibm-plex/IBMPlexSans-Light.woff2” ]
    }
    ]
    }
    ],
    “fontSizes”: [
    {
    “size”: “1rem”,
    “slug”: “small”
    },
    {
    “size”: “1.125rem”,
    “slug”: “medium”
    },
    {
    “size”: “1.75rem”,
    “slug”: “large”
    },
    {
    “size”: “clamp(1.75rem, 3vw, 2.25rem)”,
    “slug”: “x-large”
    }
    ]
    },
    “layout”: {
    “contentSize”: “960px”,
    “wideSize”: “1000px”
    },
    “styles”: {
    “blocks”: {
    “core/post-title”: {
    “typography”: {
    “fontFamily”: “var(–wp–preset–font-family–ibm-plex-sans)”,
    “fontWeight”: “300”,
    “lineHeight”: “var(–wp–custom–typography–line-height–tiny)”,
    “fontSize”: “var(–wp–custom–typography–font-size–gigantic)”
    }
    },
    }
    }
    }
    }

    katmacau

    (@katmacau)

    1 year, 7 months ago

    Actually my child style.css is ignored too. I followed the steps shown here See https://kinsta.com/blog/twenty-twenty-two-theme/#extending-twenty-twentytwo-with-a-child-theme but not luck.

    perthykjaerjensen

    (@perthykjaerjensen)

    1 year, 7 months ago

    Hi Saturn3,

    I also dream of a more free font control in Twentytwentytwo. Here and now it is very difficult to change the fonts. A thing like that ought to be easy. The ordinary user would probably give up if they are to fight with weird looking json.

    As an alternative to a child theme you could create a theme from scratch. Just copy the folder and paste it under another name. Then you can change the style.css informations with the theme name etc.

    The upside of such a solution is the freedom from the original theme. Updates won’t overwrite your work. The flipside of the coin is – you don’t get the brand new updates here.

    But in theory you should be able to have a separate theme json file inside the childtheme folder.

    ironEd

    (@ironed)

    1 year, 7 months ago

    I don’t have an answer for the “change the base font” issue other than use a child CSS. This works for me BUT not in the admin interface — which is an issue as I need to hand off my sites to people less technically literate than I and it throws them to see fonts the public site doesn’t use. As others noted, using a theme.json in my child folder has no effect.

    HOWEVER, a few people mentioned that their child.css files are being ignored. Make sure your child theme folder has been created properly… it’s changed with FSE.

    I used a WP supplied plugin called ‘Create Block Theme’ and then modified the result. Works like a charm (except for the theme.json).

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Twenty Twenty Two Font Control’ is closed to new replies.