[Resolved] How To Use Local Font In Generateblock’s Container?

[inchenaim]

Hello,

I’ve installed the Amiri font into local on my website. The method I am using for installing font into local is exactly followed here: https://docs.generatepress.com/article/adding-local-fonts/

I plan to use this font in generateblock’s container module, but it seems NOT to appear in the font list.

How to solve this issue?

[Elvin]

Hi there,

You’ll have to enqueue your local font to the block editor stylesheets so Gutenberg can use it.

Check Tom’s brief instruction here – https://generatepress.com/forums/topic/adding-local-font-to-generateblocks-advanced-typography/#post-1222427

[inchenaim]

Hi,

Thanks for the reply.

However i got confused of “Then add block-editor.css in your child theme, and include the @font-face CSS (and any other CSS you want to load in the editor).”

Where to add it? In the customizer > additional css?

[David]

Hi there,

in The GB Blocks > Typography settings, you will see a Field: Enter Font Name.
Type font Name in there, and make sure to switch the Google Font Toggle off.

[inchenaim]

Hi David,

I’ve done like what you instructed, but it seems not to work.

But if I turn on the google font, it works

[David]

Is that Font set in any of the Customizer > Typography settings ?

[inchenaim]

No. I don’t set the font in typography settings.

Should I do it?

[David]

Are you using the font anywhere else on the site? As it makes sense to apply all your fonts in the Customizer.

[inchenaim]

I’ve set the H6 heading into Amiri font. It appears in the system stack in the typography setting (customizer), but somehow it was not showing in GB blocks.

What should I do then?

[Tom]

Hi there,

Is it just not showing in the editor, but is showing on the front-end?

If so, it’s because the @font-face CSS you added needs to be added to the editor as well, or the editor doesn’t have a font to download.

The instructions that Elvin linked to are correct: https://generatepress.com/forums/topic/adding-local-font-to-generateblocks-advanced-typography/#post-1222427

The block-editor.css CSS file should have your @font-face CSS that you added here: https://docs.generatepress.com/article/adding-local-fonts/#using-font-face

That way those fonts will be downloaded in the editor and should display.

[Author]

Posts