[Support request] Typography plugin – custom font

[Matthias]

i got a question regarding adding a custom fonts.

I added a custom local fonts we have licensed according to the documentation.

1. downloaded the gp childtheme
2. uploaded the font filed to wp-content/themes/generatepress_child/
3. added the css to the child theme via appearence->customize->additional css
4. added the font-family to the functions.php of childtheme as shown in the documentation

Now the font is shown in Appearance->customize->typography as system stack.

Going from there i got 2 questions:
1. when selection my system stack font there it marks all 14 available types. I only uploaded regular and italic via ftp. Does this selection mean someone visiting the website would load all 14 types (if i had uploaded all)? So i basically have to slim down that list for what is needed? or does it make no difference to select all?

2. beeing quite new to wordpress: Does changing the Body Font make it the default for my installation? Meaning when i create a new post/page the font is used automatically – if not changed manually by the author?

3. for other settings then body in the typography section “inherit” is choosen by default – this does mean just by changing body my local font is used on the whole page, right?

[David]

Hi there,

1. All Variations ( weights and styles ) of a font are loaded by the browser. It is best to remove the variants you do not need.

2. That is correct the Body font will be applied throughout the site by default.

3. Also correct, Inherit will use whatever is set in the Body.

[Matthias]

quick follow up.

I thought the font selected in body also will appear when creating new pages in gutenberg editor.
Does it? If not i did something wrong – because when i create a new page – the editor shows the former font (whatever the default is) – so you write in that font.
My custom font appears in preview – on the website itself after saving.
The editor always show the old one.

Its not really big of a deal – but a bit irritating and i wonder if this is normal – and/or can be changed easily. Not really wysiwyg 😉

[Tom]

Your chosen font should display in the editor if you’ve selected it using our Customizer options.

Any reason why you’re using System Stack instead of adding your own font name?

[Matthias]

system stack was a mistake. I meant system fonts.
There are the two sections – system fonts and google fonts.
The one i added is the last one listed as system fonts.
I retried it with adding a quite similar font from g-fonts- nunitosans.
But same behaviour.

So – i selected from customizer->typography->body-> system fonts ->nunitosans

It then shows 14 styles under font family – i only uploaded 2.

I work in a sandbox using an ubuntu lts virtual machine – just for info. But i guess this shouldnt be the reason for the editor showing a different font.

Maybe its fall back? I uploaded nunitosans 400 regular and italic. Using firefox plugin for font information (fontanello) – on the website the page is shown as 400.
But in the editor it shows 300. As i didnt upload that one – maybe it falls back to some system font.

I just played a little. Using a google font in customizer – the editor stays in the default font also. Switching to another system fonts – i tried arial – the editor changes also to arial. Switching back to my nunitosans – the editor goes to the default again (some serif font).

Its not that big of a deal – but still – as you say it should also change – there seems to be an error somewhere.

[Tom]

There indeed seems to be an error somewhere.

In the editor when a font isn’t working, can you right-click + Inspect, then check the “Console” tab? Are there any errors in there?

[Matthias]

not everyone uses chrome 😉 – but i guessed what you mean.
console says:

JQMIGRATE: Migrate is installed, version 1.4.1
deprecated.min.js?ver=2.6.1:1 wp.editor.withColors is deprecated. Please use wp.blockEditor.withColors instead.
c @ deprecated.min.js?ver=2.6.1:1
(anonymous) @ editor.min.js?ver=9.7.6:11
644 @ featured-category.js?ver=2.5.11:1
i @ featured-category.js?ver=2.5.11:1
e @ featured-category.js?ver=2.5.11:1
wc.blocks.featured-category.0 @ featured-category.js?ver=2.5.11:1
(anonymous) @ featured-category.js?ver=2.5.11:1
post-new.php?post_type=page:1 [DOM] Found 2 elements with non-unique id #_wpnonce: (More info: https://goo.gl/9p2vKq) <input type=​"hidden" id=​"_wpnonce" name=​"_wpnonce" value=​"7485db259f">​ <input type=​"hidden" id=​"_wpnonce" name=​"_wpnonce" value=​"9db3135154">​
<input type="hidden" id="_wpnonce" name="_wpnonce" value="7485db259f">

Dont know what that means – but doesn’t look like an error to me.

[Tom]

Nope, that all looks good to me.

If you’d like, you can send me temporary login details and I can take a closer look: https://generatepress.com/contact

If you do, be sure to mention this topic.

Thanks!

[Matthias]

i send the login details some time ago via contact form.
Did you have time to take a look?

[Tom]

Hi there,

I just tried to log in with the temporary_account username, but it’s not letting me.

Any chance you can double-check the credentials?

[Matthias]

Weird,
don’t know what happened there.
I did just sent the credentials again. Triple checked 😉 – did login with the ones copied from the contact form also.

Hope this helps.

[Tom]

Any chance you can make a regular page with nothing but paragraph blocks? I think the block plugins you’re using are overwriting the font set by GP.

[Matthias]

no – this can’t be it as i already have done that 😉
I use wordmove and have a staging and a sandbox installation on a virtual machine (vm).i sync the latter to a staging on the live server (and then to live itself).
The staging is blank – meaning besides generatepress and gp premium there is nothing installed that doesn’t come with wordpress natively- and still the wrong font in the editor occurs on the sample page.

I just synced you the staging-vm to the sandbox-url (same data i send you). So as you can hopefully see it happens even with a blank wordpress installation (only thing i did there was install gp plugin and add additional css.

Weird thing is as i said the info fontanello gives me (firefox font plugin) – it show nunito sans (my local font in the child theme) – but 300. I have regular and italic installed – which is the 400. Don’t know if that info helps.

But go wild on that install – as i said – its just a sync to the sandbox-url. I got everything on my virtual machine – so feel free to go crazy and delete/add/change all you want.

[Tom]

Aha, you’re locally hosting the font, not sure why this didn’t click for me sooner, sorry!

Since the font is hosted locally, you need to load all of the @font-face stuff you currently have in the Customizer Additional CSS in the editor as well.

The best way to do this is to add it to your child theme CSS, then enqueue your child theme CSS in the editor:

add_action( 'enqueue_block_editor_assets', function() {
    wp_enqueue_style( 'generate-child', get_stylesheet_uri(), array(), filemtime( get_stylesheet_directory() . '/style.css' ), 'all' );
} );

Let me know if that fixes it or not 🙂

[Matthias]

actually it worked without your code.

As said i went along with the documentation-.
I used a child theme and added the code from the documentation to the funtions.php

add_filter( 'generate_typography_default_fonts', function( $fonts ) {
    $fonts[] = 'Nunito Sans';

    return $fonts;
} );

Then i copied the css, changed the url to the xyz/wp-content/themes/generatepress_child/fonts/ directory and added it into GP – using Customize->Additional CSS.

This caused (after selecting in customize->typography) my font working on the website – but not showing in the editor.

When i simply take the css from additional css and paste it into the gp child style.css it also shows my font in the editor – without you code needed ;).

But…
this has a little flaw for me. Like i said i am editing my page on a local environment installed on a virtual machine. I then sync using wordmove to the staging site to test and after to the live site.
Problem is that wordmove does change urls in the database when pushing or pulling the local VM installation to the staging/live – but not in the child theme.

Meaning – when i push my wordpress installation from local to live the url of the font is change when it is added in additional css – but not when it is added in the style.css of the child theme.
Which makes me wonder how additional css is stored. In the database? I think wordmove uses wp-cli (search and replace) to change urls.

If this is not solvable it is an “ok bug” 😉 – doesn’t interfere with the outcome.

[Author]

Posts