Kirki: Typography Logic

Created on 16 May 2018 · 12Comments · Source: kirki-framework/kirki

Issue description:

Hey @aristath,

I've decided to create a separate post for this.

I was using the deprecated filter to extend the default fonts available with kirki like this:

// Kirki Custom Default Fonts
function my_function( $standard_fonts ) {

    $standard_fonts['helvetica_neue'] = array(
        'label' => 'Helvetica Neue',
        'variants' => array( 'regular', 'italic', '700', '700italic' ),
        'stack' => '"Helvetica Neue", Helvetica, Arial, sans-serif',
    );

    $standard_fonts['helvetica'] = array(
        'label' => 'Helvetica',
        'variants' => array( 'regular', 'italic', '700', '700italic' ),
        'stack' => 'Helvetica, Arial, sans-serif',
    );

    $standard_fonts['arial'] = array(
        'label' => 'Arial',
        'variants' => array( 'regular', 'italic', '700', '700italic' ),
        'stack' => 'Arial, Helvetica, sans-serif',
    );

    return $standard_fonts;

}

add_filter( 'kirki/fonts/standard_fonts', 'my_function', 0 );

The issue with this implementation is, that the variants are being ignored. No matter what I add, I always get regular, italic, 700 and 700 italic.

Note: Extending the defaults optgroup with custom fonts was quite easy using this method. I used to let the users of my theme add their own custom fonts that way.

With the new implementation I do something like this:

function default_choices(){
    return array(
        'fonts' => apply_filters( 'kirki_font_choices', array() )
    );
}

that I use in the typography field like this:

'choices' => default_font_choices()

That basically allows me to do something like this to change or even disable the google fonts optgroup for instance:

function custom_google_fonts( $custom_choice = array() ) {

    $choices = array(
        'google'   => array( 'popularity', 4 ),
    );

    $custom_choice = array_merge( $choices, $custom_choice );

    return $custom_choice;

}
add_filter( 'kirki_font_choices', 'custom_google_fonts', 20 );

Now I'd like do do a couple things:
remove the CSS Defaults optgroup
extend the default fonts as described above
add an optgroup to the typography dropdown that says "Custom Fonts"
add an optgroup to the typography dropdown that says "Typekit Fonts"

Here's how I use the filter to add a custom optgroup for the "Custom Fonts":

function custom_font_group( $custom_choice = array() ) {

    $choices = array(
        'families' => array(
            'custom' => array(
                'text'     => esc_attr__( 'Custom Fonts', 'textdomain' ),
                'children' => array(
                    array( 'id' => 'ABC', 'text' => 'ABC' ),
                ),
            ),
        ),
        'variants' => array(
            'ABC' => array( '200', '300', '400','400italic', '500','500italic', '600','600italic', '700','700italic', '800','800italic', 'regular','italic' ),
        ),
    );

    $custom_choice = array_merge_recursive( $choices, $custom_choice );

    return $custom_choice;

}
// add_filter( 'kirki_font_choices', 'custom_font_group', 20 );

This leads me to the following questions:

Is there a better way to accomplish this?
Is it possible to add multiple custom optgroups?

What I could do is, create another filter (looking exactly the same) and use array_merge_recursive() to add - let's say the typekit fonts - to the same optgroup. That creates other problems though.

So now, am I missing something? :D

The deprecated filter was quite nice and easy to understand for users. Check this post from our docs where I was using this filter to let people add their own custom fonts to the typography dropdown.

I'd love to hear your thoughts!
Keep up the great work! :)

Version used:

3.0.31

Source

MapSteps

👍1

Most helpful comment

I'm 100% not sure what the problem was.

1) I received a letter from client that his fonts stopped working. (I use my own implementation for custom fonts)
2) Updated Kirki to the recent version. Not working.
3) Try to use this code from @MapSteps But still not working.
4) Deactivate all not recommnded plugins. (exceptt included plugins in the theme)
5) It works.

I have already think that the problem is in the new update of the Kirki, but … no.

Thank you for your quick feedback. Close this ticket.

Best regards.

vlthemes on 23 Feb 2019

👍2

All 12 comments

Hi @aristath,

would love to hear your thoughts on this.

Best,
David

MapSteps on 4 Jun 2018

I'm sorry for the long delay here.... Time is a bit limited and I haven't had a chance to look into this yet. I'll try to go through all tickets this weekend.

aristath on 6 Jun 2018

Solution

Filterable default choices:

function default_choices(){
    return array(
        'fonts' => apply_filters( 'kirki_font_choices', array() )
    );
}

Called like this inside the typography setting:

'choices' => default_font_choices()

Using the filter to add a custom optgroup to the typography dropdown (you can use multiple functions similar to this one to create multiple custom optgroups):

// Custom Font Group
function my_custom_optgroup( $custom_choice ) {

    $custom_choice['families']['custom_fonts'] = array(
        'text' => esc_attr__( 'Custom Fonts', 'textdomain' ),
        'children' => array(
            array( 'id' => 'ProximaNova', 'text' => 'Proxima Nova' ),
        ),
    );

    $custom_choice['variants'] = array(
        'ProximaNova' => array( '200', '300', '400', '400italic', '500', '500italic', '600', '600italic', '700', '700italic', '800', '800italic', 'regular', 'italic' ),
    );

    return $custom_choice;

}

add_filter( 'kirki_font_choices', 'my_custom_optgroup', 20 );

MapSteps on 24 Jul 2018

👍1

Hello!
Is it working for you now?

vlthemes on 21 Feb 2019

Hi @vlthemes,

check out this post I've put together – https://mapsteps.com/blog/add-custom-optgroups-to-kirki-typography-dropdown/

MapSteps on 21 Feb 2019

It`s not working now.

https://take.ms/wsUPq

vlthemes on 21 Feb 2019

are you running 3.0.36? Haven't tested this with the current version.

MapSteps on 21 Feb 2019