Inline font change in the block editor, is this possible?

  • Unknown's avatar
    morganbakerdev · Member ·

    I am attempting to modify the typeface when using the block editor. I see it is possible to change the colour of a single word/letter using the ‘highlight’ option found in the caret menu:

    In the editor, you do have the option to change the typeface but this will change the type of the entire block. Not a single word/letter.

    Using theme.json I have added a custom colour palette which is then shown in the ‘highlight’ option, so I thought as a workaround I would add a similar brand colour selection, but this time for an alternate/serif typeface. This would give me a class name to grab hold of and attatch the alternate typeface.

    However, the editor appears to take the colour value as it’s reference. So if I make a brand1 with a colour value of #161616 and a brand1serif with the same colour value, the front-end appears to ignore the serif version and thinks it needs to display brand1, instead of brand1serif

    // theme.json
      "color": {
        "palette": [
            {
                "slug": "brand1",
                "color": "#161616",
                "name": "Brand 1"
            },
            {
              "slug": "brand1serif",
              "color": "#161616",
              "name": "Brand 1 Serif"
          }
        ]
      },

    When ‘Brand 1 Serif’ is selected in the editor, this is what the front-end displays. My expectation was that it would add a class has-brand-1-serif-color:

    <mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-brand-1-color">WordPress</mark>

    Has anyone been able to change the typeface of a single word/letter through the native editor functions (i.e. not custom HTML editing)?

  • staff-95percentghost · Staff ·

    Hi there! You’ve landed on the support forums for websites that are hosted here on WordPress.com. Your WordPress.com account doesn’t appear to have any sites associated with it; were you asking about a site hosted elsewhere which uses the free WordPress software from WordPress.org instead?

    If so, then WordPress.org do have a community forum of fellow site owners where you can ask questions about block theme setup! You can find it at this link:
    https://wordpress.org/support/forums/

    In general as far as I know, there isn’t any particular way to change the font of a single word within a paragraph – I’m sure you could define a custom class for that in your theme’s style.css, but then you’d still need to look into editing the HTML to add a span tag to apply it to one word. It’s worth checking in with the wider WordPress.org community above if they have a better solution though!

  • The topic ‘Inline font change in the block editor, is this possible?’ is closed to new replies.