How do I set the custom Gutenberg font size?

cn flag

Mythemename.gutenberg.yml allows setting custom font size, but it doesn't work on Drupal 9. (It works on my old Drupal 8 site.)

Basing on Creating custom font size presets in a Theme, custom font sizes could be added in the .gutenberg.yml file for the theme.

The colors appear on the Gutenberg with the following settings, but the "Mega" font size doesn't.


    - slug: "black"
      name: "Black"
      color: "#000000"
    - slug: "dark-grey"
      name: "Dark Grey"
      color: "#555555"
    - slug: "mega"
      name: "Mega"
      size: 72
us flag
  1. Create a settings.js in your theme your JS file should look like this:

    (function (Drupal) {
      var settings = {};
      window.DrupalGutenberg = window.DrupalGutenberg || {};
      window.DrupalGutenberg.defaultSettings = settings;
  2. Add it your themename.libraries.yml

  3. In your themename.gutenberg.yml attach the library you created ex. libraries-edit: themename/gutenberg

After that clear cache and you'll able to see your custom fontsize preset.

enter image description here

leymannx avatar
ne flag
`gutenburg` instead of `gutenberg`, really? Or is this a typo?
alvin avatar
us flag
yes its a typo in library.. the important is the themename.gutenberg.yml
CocoSkin avatar
cn flag
@alvin For some reason, this only works if the Example Block enable.
I sit in a Tesla and translated this thread with Ai:


Post an answer

Most people don’t grasp that asking a lot of questions unlocks learning and improves interpersonal bonding. In Alison’s studies, for example, though people could accurately recall how many questions had been asked in their conversations, they didn’t intuit the link between questions and liking. Across four studies, in which participants were engaged in conversations themselves or read transcripts of others’ conversations, people tended not to realize that question asking would influence—or had influenced—the level of amity between the conversationalists.