typography: Ability to load all/multiple variants of the font while keeping CSS output as it is

[rahulv3a]

I have a typography field to select the base font of the theme. It is tried to the body tag. As it is base font, usual variants of the font (regular, italic, bold and bold italic) should be loaded because people use those variants in post content. However, CSS output should be as it is.

I'm familiar with Kirki_Fonts_Google::$force_load_all_variants = true;. But I don't all variants of all typography fields to load because that would have a serious impact on theme's load time.

I'm suggesting something like this:

Kirki::add_field( 'my_config', array(
  'settings' => 'my_typography',
  'section'  => 'my_section',
  'label'    => esc_html__( 'Typography', 'example' ),
  'type'     => 'typography',
  'default'  => array(
    'font-family'    => 'Open Sans',
    'variant'        => 'regular',
    'subset'         => array( 'latin-ext' ),
    'font-size'      => '14px',
    'letter-spacing' => '0',
    'text-transform' => 'uppercase',
  ),
  'choices'  => array(
    'variant' => array( 'regular', 'italic', '700', '700italic' ),
  ),
  'output'   => array(
    array(
      'element'  => '.my-element',
    ),
  ),
) );

[dariodev]

I agree with @rahulnever2far. We must provide better typography selection process for users providing them less choice. Similar question is asked here #885, and to reference this #903 where user reached for the not-so-happy solution.
In addition to what @rahulnever2far asked I have another idea - typography field which inherits Font Family from another typography field - (explained below, under "Headings").

• Body copy (same thing that rahulnever2far asked)
  Ideally this would be one typography field with ability to select multiple variants. @aristath, you already said you don't want to do this and that we should use force_load_all_variants in such cases. Some fonts have many variants. For example Roboto have variants from 100 to 900, + italics for each. For users who also select additional subsets, this is overhead. Adding another typography control for each selector is too much and completely not aligned with the concept of providing simple UX design.
• Headings
  Allowing users to choose only one Font Family for all the headings, but keeping proper load of variants. Here is example:
  • One field to select just a Font Family and the Subsets.
  • Next 6 fields (headings h1-h6) have all other options (color, variant, size, etc), all except Font Family and the Subsets, which should be hidden. Font Family is inherited from the top field so the corresponding Variants can be properly loaded.
• Less Fonts - idea for loading fonts:
  A multi select field, where user can pick one or more fonts. And only these fonts are later available in the Typography fields.

[rahulv3a]

@aristath Is it possible to load specific variants of a font programmatically? As I stated in my first post, I'm trying to load four generic variants of the body font defined using typography field. For example, if a user has selected Open Sans 400, is it possible load its 400, 400italic, 700 and 700italic programmatically?

@dariodev In my opinion, it going to be very complex to code all that especially because options of all the typography fields would need to be updated each time Font Family and Subsets would be updated. If you want them to be updated in real-time without reloading the Customzier, it would need to be done using javascript and it won't perform well if there are a lot of typography fields. Even for the user, it would be somewhat confusing. How about a simpler approach, define two global typography fields, one for body and the other headings. Then,

• Define a toggle field followed by a typography field for each area where you like to give users to customize typography.
• Set default for toggle field to be false`.
• Add active_callback to the typography field such that it enabled only then toggle field is true.

typography field would not output any CSS unless toggle is set to true. This way a user can control the typography of the theme with just two global typography fields and customizer typography of specific areas just by setting the toggle of that area to true.

[aristath]

Marked as a feature request.
Time is a luxury I don't have at the moment, but soon I'll be able to get back to adding things like this in Kirki. 👍

[rahulv3a]

No problem. We appreciate the time and effort you put into Kirki :)

[aristath]

I've been thinking of a way to implement this...
It will be some time before this can properly be implemented but I was thinking that we could use a dropdown that would allow selecting multiple values with the ability to reorder the values.
This way the 1st value will be applied in the CSS and the rest of them simply added in the fonts-loader.

The reason I won't be doing this just yet is because I want to move the implementation back to select2 (currently using selectize).
There are considerations to include select2 in WP-Core in the future and the only thing preventing that is some accessibility issues (see https://make.wordpress.org/accessibility/2015/09/07/accessibility-usertest-select2/ for details).
So in the future - once select2 fixes these issues we'll be able to remove it from kirki altogether.

But implementing any more changes to the typography control at this point would only mean we'd have to rewrite it again once we transition to select2.
So this one depends on #1177 and will be put on hold until #1177 is resolved

[carasmo]

Ideally, and I apologize for repeating other requests, I'd love to see typography work like this:

body font choose the variants/weights
headline font choose the variants weights

With a limited choice from the fonts I choose as some google fonts are crappy

Then have the ability to add more Typography fields for the other areas like widget titles the site title with all the fonts available or just some funky ones I choose.

Right now, I have select field choosing just the fonts for the entire site, but for the Site Title, if they don't have an image, I'm using a Typography field and sadly the google font used in the select is also added in the css output of the Typography field. It doesn't mess up design, but it looks bad in the code.

[aristath]

@carasmo I don't get it....
What changes would you like to see to the actual typography control?

[carasmo]

A type of typography field for where the theme dev can choose google fonts to add with weights and variants so that body is 400 (example) and if strong is used then the bold font is used (if it's there). Then the regular typography field as it is. I'm kind of doing that now with select.

[aristath]

So... in other words, allow selecting multiple values for font-weights, correct?
And how would you build the UI for that? How would you allow selecting multiple font-weights but assign a single one to the element?
Would you do it via the UI? Or programmatically?
Do we want to give users the option? Or not?

I still believe that users should not be able to select multiple font-weights in a typography control.
It's a typography styling control, not a webfont-loader!!

As a user, I see a control that says for example "Select typography options for your body"
So, I select my font-family, font-weight and so on.
All is good... But if I'm able to select multiple font-families then it's a bit weird!
I mean by body font-weight can only be 1, I can't have multiple font-weights assigned to the same element.
Yes, you can have multiple font-weights in the <body> of your document but not to the <body> itself! Each child element can have separate font-weights.

I hope the above makes some sense...

So I wouldn't want to allow selecting multiple font-weights.

BUT I'm not rejecting the idea....
I'm just looking for a better alternative.
What if for example we did this:

We could add an extra argument that would allow developers to specify if a typography control can load extra variants.
If that argument is set to true, then we can do the following:

• Check the value selected in the control's variant field.
• If the variant is one of the following: '100light', '200', '300', 'regular', '500' and the font-family has italics available, then reveal a checkbox that will allow users to make italics available.
• If the variant is one of the following: '100light', '200', '300', 'regular', '500' and the font-family has a bold variant available ('600bold', '700', '800bold', '900bold'), then reveal a checkbox that will allow users to make bold available.

But... doesn't that get a bit too complicated again??

Alternative:
Allow to programmatically define in the field which subsets to force-load if they are available.

Personally I prefer to programmatically define force-loaded subsets in a typography control...
That would give developers the flexibility they want and at the same time wouldn't clutter the UI with things that are just plain overkill and too complicated for the average user.

[aristath]

As for filtering the available fonts, I agree with that idea.
I created a new issue for that in #1202

[aristath]

Filtering font-families is now possible on a per-control basis.
Details in #1202 (comment)

[aristath]

Added to the 3.0 milestone, I hope I'll have time to implement the improvements discussed above and find a way to make it all work.

[aristath]

Actually this was simpler than expected...
Adding multiple font-weights on a per-field basis is now possible in version 3.0 using the syntax suggested by @rahulnever2far in the original post here:

 'choices'  => array(
	'variant' => array(
		'regular',
		'italic',
		'700',
		'700italic' 
	),
),

[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.

[tungpksa]

Load all font variants

add_action( 'after_setup_theme',  'font_add_all_variants', 100 );

function font_add_all_variants() {
if ( class_exists( 'Kirki_Fonts_Google' ) ) {
Kirki_Fonts_Google::$force_load_all_variants = true;
}
}