[Support request] Specifying a fallback font for locally added fonts?

[Sam]

Hi all,

Just wondering if there is a way to easily, (and neatly), specify the fallback ‘font-family’ for fonts that I have added locally using the “add_filter( ‘generate_typography_default_fonts’, ‘add_my_fonts’);” method?

[David]

Hi there,

fallbacks need to specified using CSS e.g:

p {
    font-family: "Times New Roman", Times, serif;
}

[Sam]

Hi David,

Thanks for your reply. I am aware of how to specify font-families via CSS, but using the Typography features in GP Pro, The CSS is specified for you and it isn’t possible to control the fallbacks that are included for locally uploaded fonts.

It looks like there are a few functions that appear to be used to set fallback fonts up for the other ‘default’ fonts, I just wondered if it might be possible to tap into those functions for our custom fonts, or update the array that the generate_typography_default_fonts filter accepts to allow for two params, a “Name” and a “Font-Family” string.

something like:

$fonts[] = ['My Custom Font Name', '"Helvetica Nueue", helvetica, arial, sans-serif'];

Obviously, that would require a bit of further development but would be handy.

Thanks.

[Tom]

As of right now it’s only possible if you filter the “System Stack” option.

For example:

add_filter( 'generate_typography_system_stack', function() {
    return '"My Custom Font Name", "Helvetica Nueue", helvetica, arial, sans-serif';
} );

Then choose “System Stack” in the dropdown.

Not ideal, but it works. We’ll make this easier in the near future.

[Sam]

Thank you Tom,

A handy trick, but in my case, I agree that it’s not ideal since I’d end up having to sacrifice the actual System Stack (which I like to use for my body copy) just to get a custom font to use for Headings.

I look forward to the near future when this is simpler to achieve 🙂

Thanks again, great work and all the best with future development.

~Sam

[Tom]

I have a lot of typography tweaks/improvements planned in the near future. I’ll get this fixed then 🙂

[Rob]

Dear Tom,

I have a question closely related to Sam’s issue, hope you can guide me to a solution 😉

To setup a fallback font I would like to use the ‘System Stack’ option as mentioned above for headings but I use different font-families and weights in h1, h2 etc. How should I write the code using System Stack without losing these differences?

These are the (GP Pro) ‘Typography features’ I have used:
h1: mohavemedium
h2: mohaveregular
h3: mohaveregular
h4: Open Sans
h5: Open Sans
h5: Open Sans

Thanks in advance for your reply!
Rob

[Tom]

Doing this with multiple fonts like that would be very difficult right now, unfortunately. You might need to use CSS to write your CSS with the necessary fallbacks until we’re able to implement a filter to do it in the Customizer CSS.

[Rob]

Thanks for your reply and I was already afraid this would be difficult right now 😉
For the time being I have changed h1/2/3 to the same font to be able to use the System Stack option. This works fine but I will be very pleased if the fallback would be implemented in de typo rijles in the near future.

Atb, Rob

[Natalie]

Any update on this? Is it now possible to specify fall-back fonts in customiser or with filters? Thanks

[Tom]

Hi there,

Not quite, I’ve been planning a typography re-write, which I want to get done ASAP. I’m thinking GPP 1.12.0.

[Anil]

1.12.0

But there is no 1.11.0…….

[Anil]

Can we start some post for future updates?

I want you must update “Separating Space” issue for Mobile, Tablet, and Desktop….

[Tom]

We have an internal roadmap with specific things planned for each version 🙂

[Natalie]

Thanks for the update, Tom

[Author]

Posts