[Resolved] Added Google Font locally. But it’s unavailable in Block editor.

[Oleksiy]

Hi guys,

I’ve added a Google Font “Andika” in the Customizer in the Font Manager. And serve it locally.
But it’s absent in the block editor, so I can’t select it and apply it for page templates.
Is where a solution for this issue? Or it’s only possible to use CSS manually?

[David]

Hi there,

It won’t appear in the list.
Just type the name of the Font ( ie. the one set in your @font-face font-family ) in the field. And hit enter. GB will then use that.
If you don’t see the font style in the actual editor then you need to tell WP to load your font CSS in the editor. Let me know where you added the @font-face CSS and i will explain how to do that.

Some notes regarding setting Font Family for specific blocks.

1. As a general rule i would recommend not doing this if possible.
2. If you must then keep it to a minimum or in use them only in globally editable places such as a GP Element, a GB Pro Global Style or a Reusable block.

The reason for this is if in the future you want to change fonts, and you have many blocks in many posts/pages that have that specific font in place then you have a lot of manual editing to do to change that.

An alternative workflow would be to give your @font-face CSS font-family a very generic name eg. primary-font
Then you can always update the font files that are loaded for that name.

[Oleksiy]

Thanks for your response, David.

Yes, I know that font won’t appear in the list. I try typing and it doesn’t show up. Actually, I also don’t see default font Lora or any other font to show up when typing.
I’ve added it in the style.css in the child theme.

@font-face {
  font-family: 'Andika';
  font-style: normal;
  font-weight: 400;
  src: url('/wp-content/themes/generatepress-child/fonts/andika-v22-latin_cyrillic-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('/wp-content/themes/generatepress-child/fonts/andika-v22-latin_cyrillic-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/wp-content/themes/generatepress-child/fonts/andika-v22-latin_cyrillic-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('/wp-content/themes/generatepress-child/fonts/andika-v22-latin_cyrillic-regular.woff') format('woff'), /* Modern Browsers */
       url('/wp-content/themes/generatepress-child/fonts/andika-v22-latin_cyrillic-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/wp-content/themes/generatepress-child/fonts/andika-v22-latin_cyrillic-regular.svg#Andika') format('svg'); /* Legacy iOS */
}

Yes, I understand the possible cons of applying fonts in the editor. So I was trying to use it only for templates. I can do it via CSS in the child theme in style.css. But in this case, it will be extra work to add specific classes to target certain elements more precisely to avoid troubles in the future. So I’m trying to figure out the best solution.

[Ying]

I try typing and it doesn’t show up

No, it will not show up, you just need to type it in and save the setting.

Does that work in your editor?

[Oleksiy]

Ah, got it. Yes, it works. Thanks a lot, Ying 🙂

[Ying]

You are welcome   🙂

[Author]

Posts