Typography Variants (weights)

[getbowtied]

Issue description:

We have used this method to load google fonts:

Kirki::add_field( '', array(
        'type'     => 'select',
        'settings' => 'main_font',
        'label'    => esc_attr__( 'Main Font', 'getbowtied' ),
        'description' => __( 'Used for titles and Headings.', 'getbowtied' ),
        'section'  => 'fonts',
        'default'  => 'Poppins',
        'priority' => 10,
        'choices'  => Kirki_Fonts::get_font_choices(),
        'output'   => array(
            array(
                'element'  => 'main_font',
                'property' => 'font-family',
            ),
        ),
    ) );

and the output was

http://screencast.com/t/iQxJEtUxX

(with all weights available) [Kirki 2.0.5]

Now we have updated to 2.3.0 and with the same method the output is:

http://screencast.com/t/hIZo0N3ud3Q

(WITHOUT weights)

We have tried also the typography field (https://kirki.org/docs/controls/typography.html),
but the problem is we cannot select multiple weights (variants).

The question is: how we can load multiple weights for a font?

Version used:

2.3.0

Using theme_mods or options?

theme_mods

Code to reproduce the issue (config + field(s))

[aristath]

We were never force-loading ALL variants... the only one that was being loaded in addition to the selected font-weight was the bold (700).
It has been removed though so that requests are lighter and pages load faster. Not everybody needs extra font-weights loaded...
I just pushed a commit that should help you force-load all font-weights & subsets if that's what you want to do.

Try adding these 2 lines (using the latest develop branch):

Kirki_Fonts_Google::$force_load_all_variants = true;
Kirki_Fonts_Google::$force_load_all_subsets  = true;

Let me know if that works!

[getbowtied]

Thank you, but what we really want is to be able to select multiples font variants, similar to multiselect for subsets. Can we do that somehow?

[rahulv3a]

@getbowtied, you could give typography field a try. See typography field in Kirki documentation.

[aristath]

I'm afraid not.

Not because it can't be done, but because conceptually it doesn't fit the customizer's philosophy.
Say for example that you want to add multiple font-weights.
Why?
Where will they be assigned?
Will the user have to write their own CSS afterwards to manually assign the selected font-weight to an element on their site?
The current implementation is this:
You add a typography control for an element, you add another typography control for another element and so on.
An element can't be both bold and normal, so each element has only 1 font-weight.
If they choose to have Roboto-100 for H1, Roboto-300 for paragraphs, Roboto-700 for H2-H5, then we're going to get font-weights 100, 300 & 700.
Font-weights differ from font to font, and if you define a font-weight that does not exist in a specific font-family, then the google API doesn't return the font at all...

Since an element can only have a single font-weight, I can only assume that the controls are not tied to a specific element. So, why would you want to allow selecting multiple variants if they are not assigned anywhere? If there are multiple font-weighs selected, then the output of a typography field for example will get really messy...
Could you please provide some more information about the implementation you had in mind?
Perhaps if I better understand what you're trying to do I'll be able to figure out a solution/implementation for this...

[getbowtied]

Let say we assign a typography globally to BODY. Let's say Roboto. Then we need some selectors to show weight 100, other weight 900.

[aristath]

In that case, you just add another typography control for that selector... and this way the user has the freedom to choose what font-family as well as font-weight they want to use for that...

[getbowtied]

Let me give another example. We assign a typography to a <p>. Inside that <p> we have <strong> and <em>. If we cannot select multiple weights, how those strong's and em's will show the right font variants?

[getbowtied]

Sorry.

Let me give another example. We assign a typography to a "p". Inside that "p" we have "strong" and "em". If we cannot select multiple weights, how those strong's and em's will show the right font variants?

[aristath]

If you want to load normal, bold, normal-italic and bold-italic then why not just load all of them using the 2 lines I posted earlier? Agreed, it's not ideal. But the extra overhead will be minimal...
Otherwise if you want to do this it's going to have to be custom-coded for your use-case.

[getbowtied]

Ok, thank you!

[carasmo]

Where are these two lines added using the plugin?

Kirki_Fonts_Google::$force_load_all_variants = true;
Kirki_Fonts_Google::$force_load_all_subsets = true;

I want the user to pick a body font and just like with Google fonts in general, b, strong, em will use Google's CSS to assign and if not, well it will look bad, so I would give instructions to use only certain fonts.

Thanks!

[aristath]

Where are these two lines added using the plugin?

Anywhere you like. :)

You can just add in your functions.php something like this:

function my_theme_load_all_variants_and_subsets() {
    if ( class_exists( 'Kirki_Fonts_Google' ) ) {
        Kirki_Fonts_Google::$force_load_all_variants = true;
        Kirki_Fonts_Google::$force_load_all_subsets = true;
    }
}
add_action( 'after_setup_theme', 'my_theme_load_all_variants_and_subsets' );

[carasmo]

Thanks! I added this with the latest update to the plugin and I still don't get the variants or the subsets, it should read : ...family=Montserrat:400,700, but all it has is https://fonts.googleapis.com/css?family=Montserrat&subset

[aristath]

@carasmo fixed in the develop branch.

Please note that if you force-load all variants and subsets using the above, the subset & variant sub-fields in typography controls will be hidden.
If you want to show the variant sub-control in typography fields (so that the output argument plays nicely if you're using it for example), you'll have to define a default value for variant in your typography field.

[carasmo]

Thanks! It's working now. Is this going to be part of the plugin version or the library version? Thanks again!

[aristath]

. Is this going to be part of the plugin version or the library version?

For now just the plugin.
I'm still trying to figure out if it's possible to do something similar in the library version and how to implement this...

[Khoapq]

I have a plugin (add on for Kirki) allow load all or multiple variants.
Download: https://wordpress.org/plugins/customize-kirki-variants/

Hope this plugin useful for you.