typography field with transport postMessage not working as expected

[kmob2]

Issue description:

When I use the typography field with transport postMessage, it doesn't work as I would expect it. When selecting a font family, it will ALWAYS refresh the page. When I change any of the other typography sub fields, such as font size or color, nothing happens unless I change the font family, so that it refreshes, and only then are all the other changed options applied as well.

When I set the typography field to transport refresh, then the page refreshes on every single change on any sub field, which is as expected.

Version used:

Latest github version. Tested older versions from 2 months ago. Same issue

Using theme_mods or options?

theme_mods

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

Kirki::add_field( 'my_config', array(
    'type'        => 'typography',
    'settings'    => 'my_setting',
    'label'       => esc_attr__( 'Control Label', 'kirki' ),
    'section'     => 'my_section',
    'transport'   => 'postMessage',
    'default'     => array(
        'font-family'    => 'Roboto',
        'variant'        => 'regular',
        'font-size'      => '14px',
        'line-height'    => '1.5',
        'letter-spacing' => '0',
        'subsets'        => array( 'latin-ext' ),
        'color'          => '#333333',
        'text-transform' => 'none',
        'text-align'     => 'left'
    ),
    'priority'    => 10,
    'output'      => array(
        array(
            'element' => 'body',
        ),
    ),
) );

[YegorSan]

@aristath Your plugin/toolkit is really cool and useful. Thank you for your job! I really hope, that this issue will be fixed soon! It would be really cool to change the font without refreshing of the page.

[carasmo]

If you use postMessage on any field (not just typography) use js_vars or write some jQuery. And there will be a delay because the choice of font is not pre-loaded. Not even easy google fonts plugin does that.

https://aristath.github.io/kirki/docs/arguments/js_vars.html

[carasmo]

Just to be clear: there is nothing to fix as it is working correctly.

[carasmo]

Oops, you set the transport to 'auto' for typography fields. Then it works without writing js_vars but there is a delay while the loading of google fonts. This is normal.

[YegorSan]

@carasmo I am sorry for the delay with the answer. But I've tried both variants - using 'auto' and using 'postMessage' for transport. And in both situations - it's still refreshing the page. It's a definitely refresh, not a small delay with loading font. And actually in Easy Google Fonts I did not saw that refresh, even if it loads the font from google api. So I am thinking, what I did wrong. And why the issue is 'Open' if it's not an issue and there is nothing to fix. Thank you.

[kmob2]

I am also confused on what @carasmo means. Because no matter what I do, even using transport postMessage, the page will refresh. Nothing do with a delay, but the customizer actually refreshes (reloads) the page, which postMessage should prevent.

@carasmo If you can tell me how you are keeping the typography field from reloading the full page, please let us know.

[kmob2]

Quick update. I am now running the latest dev version of Kirki, and I tried everything from using transport "auto", "postMessage, each with and without js_vars. No matter what I do, the page always reloads.

@carasmo Can you post your code snipped, which works for you without refreshing the page?This way we can see where our mistake is. Thank you

[YegorSan]

@carasmo I am also thinking now, that it would be great if you can provide some example of the working code as @kmob2 suggested. I've struggled with that issue, and did not get the result which I expected. Hope you can help us , and share with us your working snippet. I've read all the parts of your documentation, also tried to find solution in the web to fix that problem, but unfortunately without results... Again , Thank you.

[carasmo]

I just tried Easy Google fonts again, you are right, there is no delay. I was seeing a refresh. It's been about 2-3 months since I used it. I see that they have a customize-preview.js file that writes the google font to the head.

So this is what I used for Typography. There is no delay on all fields except the google fonts, which does refresh.

//see https://github.com/aristath/kirki/issues/528#issuecomment-216286784

Themename_Kirki::add_field( 'themename_theme', array(
    'type'            => 'typography',
    'settings'        => 'site_title',
    'label'           => esc_attr__( 'Site Title Typography Tweaks', 'textdomain' ),
    'section'         => 'title_tagline',
        'transport'       => 'auto',
    'default'         => array(
        'font-family'    => 'Roboto',
        'variant'        => 'regular',
        'font-size'      => '14px',
        'line-height'    => '1.5',
        'letter-spacing' => '0',
        'subsets'        => array( 'latin-ext' ),
        'color'          => '#333333',
        'text-transform' => 'none',
    ),
    'priority'    => 1,
    'output'      => array(
        array(
            'element' => '.site-title',
        ),
    ),
) );

[kmob2]

Thank you for posting your code snipped. I just tried it and unfortunately it does refresh the page, just as before. I am not sure why this seems to work for you, but not for the rest of us. Just to clarify, that there is absolutely not misunderstanding. The code you posted, creates a typography field for you, and when you switch between different font types, it does NOT refresh the page, and still applies the new font to the preview website?

I had a look at the Easy Google fonts plugin, and their way is exactly as I would expect Kirki to work, no refreshing of the page, and no delays.

[carasmo]

In my previous post with the code I wrote that all Typography fields except the font-family has no delay. That is that yes, there is a delay when choosing a font. I am not the author of Kirki, just a user. The author is updating the plugin as he is available to do so.

Easy Google Fonts is something I haven't used in a few months, so between now and then, they added some nice js to load the font with js for live preview.

[kmob2]

Ah yes, so I assume when you say "delay", that you refer to the page being refreshed? I thought you were talking about a delay in fetching the google fonts via API. I think this is what lead a my misunderstanding.

[carasmo]

Yes, by delay I mean refresh because of getting the google fonts. Easy Google Fonts uses js to add the font for preview.

[aristath]

When changing the font-family we have to get the new font-family scripts from the google-API. That's why we're forcing a refresh there... The page needs to refresh so that the new google fonts can be added to the <head> of the document properly and fonts rendered the way they should. If you guys have any ideas on how to improve it and add the font-family in the head properly without forcing a refresh I'm open to suggestions.

[carasmo]

This thread prompted me to switch things around. I used: https://github.com/typekit/webfontloader with my limited choice font selection. I didn't use the Kirki Typography. I used https://github.com/devinsays/customizer-library just for font selection (not actually Typography), I stripped out all other customizer stuff, since that is for Kirki, then I made my own list of fonts and added missing ones. I did this as a work around so I could add the weights of my choice. That is the user selects Raleway they get 300, 400, and 700 and italic if it's there (I don't want all the weights on all fonts in my list). Then I added webfontloader script and the list of fonts I wanted in my customizer.js. It's instant.

    //preload web fonts for customizer
    WebFont.load({
        google: {
            families: [

            'Droid Serif', 
            'Droid Serif:bold', 
            'Droid Serif:italic', 

            'Noto Serif',
            'Noto Serif:bold',
            'Noto Serif:italic',

            'Nunito Sans:300,400,700',
            'Nunito Sans:italic',

            'Raleway:bold',
            'Raleway:italic',
            'Raleway:300,400,700',

            'Open Sans:bold',
            'Open Sans:italic',
            'Open Sans:300,400,700',

            'Poppins:italic',
            'Poppins:300,600',

            'Source Sans Pro:200,300,400,700',
            'Source Sans Pro:italic',

            'Catamaran:200,300,400,800',

            'Lato:300,400,700',
            'Lato:bold',
            'Lato:italic',

            'Playfair Display:400,700',
            'Playfair Display:bold',
            'Playfair Display:italic',

            'Lora:400,700',
            'Lora:italic',

            'Alegreya:400,700,900',
            'Alegreya:italic',

            'PT Serif:400,700',
            'PT Serif:italic',

            'Sacramento',
            'Clicker Script',
            'Pacifico',
            'Satisfy',
            'Miltonian',
            'Kranky',
            'Fredericka the Great',
            'Lily Script One',
            'Life Savers:700'

            ]
        }
     } );

[aristath]

Hmmm... So in your case you're pre-loading a predefined array of fonts, correct? For obvious performance reasons we can't do that for ALL google fonts, but that brings up another interesting question.

Have you tried if the webfontloader allows updating the fonts instantly without a delay? they use something like this:

  WebFont.load({
    google: {
      families: ['Droid Sans', 'Droid Serif']
    }
  });

So I'm assuming you're changing the array of fonts there. If changed via JS to add/remove fonts instead of reloading the page, will the fonts live-update without soft-refreshing the page? If the answer is yes then we could implement that in Kirki...

[kmob2]

I also went ahead and created my own temporary field until this is solved.

/**
 * Font Array
 */
function myfonts() {
    return array(
        /* Web Safe Fonts */
        'Arial, Helvetica, sans-serif' => esc_attr__( 'Arial', 'my_textdomain' ),
        '"Arial Black", Gadget, sans-serif' => esc_attr__( 'Arial Black', 'my_textdomain' ),
        '"Comic Sans MS", cursive, sans-serif' => esc_attr__( 'Comic Sans MS', 'my_textdomain' ),
        'Impact, Charcoal, sans-serif' => esc_attr__( 'Impact', 'my_textdomain' ),
        '"Lucida Sans Unicode", "Lucida Grande", sans-serif' => esc_attr__( 'Lucida Sans Unicode', 'my_textdomain' ),
        'Tahoma, Geneva, sans-serif' => esc_attr__( 'Tahoma', 'my_textdomain' ),
        '"Trebuchet MS", Helvetica, sans-serif' => esc_attr__( 'Trebuchet MS', 'my_textdomain' ),
        'Verdana, Geneva, sans-serif' => esc_attr__( 'Verdana', 'my_textdomain' ),
        'Georgia, serif' => esc_attr__( 'Georgia', 'my_textdomain' ),
        '"Palatino Linotype", "Book Antiqua", Palatino, serif' => esc_attr__( 'Palatino Linotype', 'my_textdomain' ),
        '"Times New Roman", Times, serif' => esc_attr__( 'Times New Roman', 'my_textdomain' ),
        '"Courier New", Courier, monospace' => esc_attr__( 'Courier New', 'my_textdomain' ),
        '"Lucida Console", Monaco, monospace' => esc_attr__( 'Lucida Console"', 'my_textdomain' ),

        /* Google Fonts */
        'Aclonica' => esc_attr__( 'Aclonica', 'my_textdomain' ),
        'Allan' => esc_attr__( 'Allan', 'my_textdomain' ), 
        'Annie+Use+Your+Telescope' => esc_attr__( 'Annie Use Your Telescope', 'my_textdomain' ), 
        'Anonymous+Pro' => esc_attr__( 'Anonymous Pro', 'my_textdomain' ), 
        'Allerta+Stencil' => esc_attr__( 'Allerta Stencil', 'my_textdomain' ), 
        'Allerta' => esc_attr__( 'Allerta', 'my_textdomain' ), 
        'Amaranth' => esc_attr__( 'Amaranth', 'my_textdomain' ), 
        'Anton' => esc_attr__( 'Anton', 'my_textdomain' ), 
        'Architects+Daughter' => esc_attr__( 'Architects Daughter', 'my_textdomain' ), 
        'Arimo' => esc_attr__( 'Arimo', 'my_textdomain' ), 
        'Artifika' => esc_attr__( 'Artifika', 'my_textdomain' ), 
        'Arvo' => esc_attr__( 'Arvo', 'my_textdomain' ), 
        'Asset' => esc_attr__( 'Asset', 'my_textdomain' ), 
        'Astloch' => esc_attr__( 'Astloch', 'my_textdomain' ), 
        'Bangers' => esc_attr__( 'Bangers', 'my_textdomain' ), 
        'Bentham' => esc_attr__( 'Bentham', 'my_textdomain' ), 
        'Bevan' => esc_attr__( 'Bevan', 'my_textdomain' ), 
        'Bigshot+One' => esc_attr__( 'Bigshot One', 'my_textdomain' ), 
        'Bowlby+One' => esc_attr__( 'Bowlby One', 'my_textdomain' ), 
        'Bowlby+One+SC' => esc_attr__( 'Bowlby One SC', 'my_textdomain' ), 
        'Brawler' => esc_attr__( 'Brawler', 'my_textdomain' ), 
        'Buda' => esc_attr__( 'Buda', 'my_textdomain' ), 
        'Cabin' => esc_attr__( 'Cabin', 'my_textdomain' ), 
        'Calligraffitti' => esc_attr__( 'Calligraffitti', 'my_textdomain' ), 
        'Candal' => esc_attr__( 'Candal', 'my_textdomain' ), 
        'Cantarell' => esc_attr__( 'Cantarell', 'my_textdomain' ), 
        'Cardo' => esc_attr__( 'Cardo', 'my_textdomain' ), 
        'Carter+One' => esc_attr__( 'Carter One', 'my_textdomain' ), 
        'Caudex' => esc_attr__( 'Caudex', 'my_textdomain' ), 
        'Cedarville+Cursive' => esc_attr__( 'Cedarville Cursive', 'my_textdomain' ), 
        'Cherry+Cream+Soda' => esc_attr__( 'Cherry Cream Soda', 'my_textdomain' ), 
        'Chewy' => esc_attr__( 'Chewy', 'my_textdomain' ), 
        'Coda' => esc_attr__( 'Coda', 'my_textdomain' ), 
        'Coming+Soon' => esc_attr__( 'Coming Soon', 'my_textdomain' ), 
        'Copse' => esc_attr__( 'Copse', 'my_textdomain' ), 
        'Corben' => esc_attr__( 'Corben', 'my_textdomain' ), 
        'Cousine' => esc_attr__( 'Cousine', 'my_textdomain' ), 
        'Covered+By+Your+Grace' => esc_attr__( 'Covered By Your Grace', 'my_textdomain' ), 
        'Crafty+Girls' => esc_attr__( 'Crafty Girls', 'my_textdomain' ), 
        'Crimson+Text' => esc_attr__( 'Crimson Text', 'my_textdomain' ), 
        'Crushed' => esc_attr__( 'Crushed', 'my_textdomain' ), 
        'Cuprum' => esc_attr__( 'Cuprum', 'my_textdomain' ), 
        'Damion' => esc_attr__( 'Damion', 'my_textdomain' ), 
        'Dancing+Script' => esc_attr__( 'Dancing Script', 'my_textdomain' ), 
        'Dawning+of+a+New+Day' => esc_attr__( 'Dawning of a New Day', 'my_textdomain' ), 
        'Didact+Gothic' => esc_attr__( 'Didact Gothic', 'my_textdomain' ), 
        'Droid+Sans' => esc_attr__( 'Droid Sans', 'my_textdomain' ), 
        'Droid+Sans+Mono' => esc_attr__( 'Droid Sans Mono', 'my_textdomain' ), 
        'Droid+Serif' => esc_attr__( 'Droid Serif', 'my_textdomain' ), 
        'EB+Garamond' => esc_attr__( 'EB Garamond', 'my_textdomain' ), 
        'Expletus+Sans' => esc_attr__( 'Expletus Sans', 'my_textdomain' ), 
        'Fontdiner+Swanky' => esc_attr__( 'Fontdiner Swanky', 'my_textdomain' ), 
        'Forum' => esc_attr__( 'Forum', 'my_textdomain' ), 
        'Francois+One' => esc_attr__( 'Francois One', 'my_textdomain' ), 
        'Geo' => esc_attr__( 'Geo', 'my_textdomain' ), 
        'Give+You+Glory' => esc_attr__( 'Give You Glory', 'my_textdomain' ), 
        'Goblin+One' => esc_attr__( 'Goblin One', 'my_textdomain' ), 
        'Gravitas+One' => esc_attr__( 'Gravitas One', 'my_textdomain' ), 
        'Gruppo' => esc_attr__( 'Gruppo', 'my_textdomain' ), 
        'Hammersmith+One' => esc_attr__( 'Hammersmith One', 'my_textdomain' ), 
        'Holtwood+One+SC' => esc_attr__( 'Holtwood One SC', 'my_textdomain' ), 
        'Homemade+Apple' => esc_attr__( 'Homemade Apple', 'my_textdomain' ), 
        'Inconsolata' => esc_attr__( 'Inconsolata', 'my_textdomain' ), 
        'Indie+Flower' => esc_attr__( 'Indie Flower', 'my_textdomain' ), 
        'IM+Fell+DW+Pica' => esc_attr__( 'IM Fell DW Pica', 'my_textdomain' ), 
        'IM+Fell+DW+Pica+SC' => esc_attr__( 'IM Fell DW Pica SC', 'my_textdomain' ), 
        'IM+Fell+Double+Pica' => esc_attr__( 'IM Fell Double Pica', 'my_textdomain' ), 
        'IM+Fell+Double+Pica+SC' => esc_attr__( 'IM Fell Double Pica SC', 'my_textdomain' ), 
        'IM+Fell+English' => esc_attr__( 'IM Fell English', 'my_textdomain' ), 
        'IM+Fell+English+SC' => esc_attr__( 'IM Fell English SC', 'my_textdomain' ), 
        'IM+Fell+French+Canon' => esc_attr__( 'IM Fell French Canon', 'my_textdomain' ), 
        'IM+Fell+French+Canon+SC' => esc_attr__( 'IM Fell French Canon SC', 'my_textdomain' ), 
        'IM+Fell+Great+Primer' => esc_attr__( 'IM Fell Great Primer', 'my_textdomain' ), 
        'IM+Fell+Great+Primer+SC' => esc_attr__( 'IM Fell Great Primer SC', 'my_textdomain' ), 
        'Irish+Grover' => esc_attr__( 'Irish Grover', 'my_textdomain' ), 
        'Irish+Growler' => esc_attr__( 'Irish Growler', 'my_textdomain' ), 
        'Istok+Web' => esc_attr__( 'Istok Web', 'my_textdomain' ), 
        'Josefin+Sans' => esc_attr__( 'Josefin Sans', 'my_textdomain' ), 
        'Josefin+Slab' => esc_attr__( 'Josefin Slab', 'my_textdomain' ), 
        'Judson' => esc_attr__( 'Judson', 'my_textdomain' ), 
        'Jura' => esc_attr__( 'Jura', 'my_textdomain' ), 
        'Just+Another+Hand' => esc_attr__( 'Just Another Hand', 'my_textdomain' ), 
        'Just+Me+Again+Down+Here' => esc_attr__( 'Just Me Again Down Here', 'my_textdomain' ), 
        'Kameron' => esc_attr__( 'Kameron', 'my_textdomain' ), 
        'Kenia' => esc_attr__( 'Kenia', 'my_textdomain' ), 
        'Kranky' => esc_attr__( 'Kranky', 'my_textdomain' ), 
        'Kreon' => esc_attr__( 'Kreon', 'my_textdomain' ), 
        'Kristi' => esc_attr__( 'Kristi', 'my_textdomain' ), 
        'La+Belle+Aurore' => esc_attr__( 'La Belle Aurore', 'my_textdomain' ), 
        'Lato' => esc_attr__( 'Lato', 'my_textdomain' ), 
        'League+Script' => esc_attr__( 'League Script', 'my_textdomain' ), 
        'Lekton' => esc_attr__( 'Lekton', 'my_textdomain' ), 
        'Limelight' => esc_attr__( 'Limelight', 'my_textdomain' ), 
        'Lobster' => esc_attr__( 'Lobster', 'my_textdomain' ), 
        'Lobster+Two' => esc_attr__( 'Lobster Two', 'my_textdomain' ), 
        'Lora' => esc_attr__( 'Lora', 'my_textdomain' ), 
        'Love+Ya+Like+A+Sister' => esc_attr__( 'Love Ya Like A Sister', 'my_textdomain' ), 
        'Loved+by+the+King' => esc_attr__( 'Loved by the King', 'my_textdomain' ), 
        'Luckiest+Guy' => esc_attr__( 'Luckiest Guy', 'my_textdomain' ), 
        'Maiden+Orange' => esc_attr__( 'Maiden Orange', 'my_textdomain' ), 
        'Mako' => esc_attr__( 'Mako', 'my_textdomain' ), 
        'Maven+Pro' => esc_attr__( 'Maven Pro', 'my_textdomain' ), 
        'Meddon' => esc_attr__( 'Meddon', 'my_textdomain' ), 
        'MedievalSharp' => esc_attr__( 'MedievalSharp', 'my_textdomain' ), 
        'Megrim' => esc_attr__( 'Megrim', 'my_textdomain' ), 
        'Merriweather' => esc_attr__( 'Merriweather', 'my_textdomain' ), 
        'Metrophobic' => esc_attr__( 'Metrophobic', 'my_textdomain' ), 
        'Michroma' => esc_attr__( 'Michroma', 'my_textdomain' ), 
        'Miltonian+Tattoo' => esc_attr__( 'Miltonian Tattoo', 'my_textdomain' ), 
        'Miltonian' => esc_attr__( 'Miltonian', 'my_textdomain' ), 
        'Modern+Antiqua' => esc_attr__( 'Modern Antiqua', 'my_textdomain' ), 
        'Monofett' => esc_attr__( 'Monofett', 'my_textdomain' ), 
        'Molengo' => esc_attr__( 'Molengo', 'my_textdomain' ), 
        'Mountains+of+Christmas' => esc_attr__( 'Mountains of Christmas', 'my_textdomain' ), 
        'Muli' => esc_attr__( 'Muli', 'my_textdomain' ), 
        'Neucha' => esc_attr__( 'Neucha', 'my_textdomain' ), 
        'Neuton' => esc_attr__( 'Neuton', 'my_textdomain' ), 
        'News+Cycle' => esc_attr__( 'News Cycle', 'my_textdomain' ), 
        'Nixie+One' => esc_attr__( 'Nixie One', 'my_textdomain' ), 
        'Nobile' => esc_attr__( 'Nobile', 'my_textdomain' ), 
        'Nova+Cut' => esc_attr__( 'Nova Cut', 'my_textdomain' ), 
        'Nova+Flat' => esc_attr__( 'Nova Flat', 'my_textdomain' ), 
        'Nova+Mono' => esc_attr__( 'Nova Mono', 'my_textdomain' ), 
        'Nova+Oval' => esc_attr__( 'Nova Oval', 'my_textdomain' ), 
        'Nova+Round' => esc_attr__( 'Nova Round', 'my_textdomain' ), 
        'Nova+Script' => esc_attr__( 'Nova Script', 'my_textdomain' ), 
        'Nova+Slim' => esc_attr__( 'Nova Slim', 'my_textdomain' ), 
        'Nova+Square' => esc_attr__( 'Nova Square', 'my_textdomain' ), 
        'Nunito' => esc_attr__( 'Nunito', 'my_textdomain' ), 
        'Nunito' => esc_attr__( 'Nunito', 'my_textdomain' ), 
        'OFL+Sorts+Mill+Goudy+TT' => esc_attr__( 'OFL Sorts Mill Goudy TT', 'my_textdomain' ), 
        'Old+Standard+TT' => esc_attr__( 'Old Standard TT', 'my_textdomain' ), 
        'Open+Sans' => esc_attr__( 'Open Sans', 'my_textdomain' ), 
        'Open+Sans+Condensed' => esc_attr__( 'Open Sans Condensed', 'my_textdomain' ), 
        'Orbitron' => esc_attr__( 'Orbitron', 'my_textdomain' ), 
        'Oswald' => esc_attr__( 'Oswald', 'my_textdomain' ), 
        'Over+the+Rainbow' => esc_attr__( 'Over the Rainbow', 'my_textdomain' ), 
        'Reenie+Beanie' => esc_attr__( 'Reenie Beanie', 'my_textdomain' ), 
        'Pacifico' => esc_attr__( 'Pacifico', 'my_textdomain' ), 
        'Patrick+Hand' => esc_attr__( 'Patrick Hand', 'my_textdomain' ), 
        'Paytone+One' => esc_attr__( 'Paytone One', 'my_textdomain' ), 
        'Permanent+Marker' => esc_attr__( 'Permanent Marker', 'my_textdomain' ), 
        'Philosopher' => esc_attr__( 'Philosopher', 'my_textdomain' ), 
        'Play' => esc_attr__( 'Play', 'my_textdomain' ), 
        'Playfair+Display' => esc_attr__( 'Playfair Display', 'my_textdomain' ), 
        'Podkova' => esc_attr__( 'Podkova', 'my_textdomain' ), 
        'PT+Sans' => esc_attr__( 'PT Sans', 'my_textdomain' ), 
        'PT+Sans+Narrow' => esc_attr__( 'PT Sans Narrow', 'my_textdomain' ), 
        'PT+Serif' => esc_attr__( 'PT Serif', 'my_textdomain' ), 
        'PT+Serif+Caption' => esc_attr__( 'PT Serif Caption', 'my_textdomain' ), 
        'Puritan' => esc_attr__( 'Puritan', 'my_textdomain' ), 
        'Quattrocento' => esc_attr__( 'Quattrocento', 'my_textdomain' ), 
        'Quattrocento+Sans' => esc_attr__( 'Quattrocento Sans', 'my_textdomain' ), 
        'Radley' => esc_attr__( 'Radley', 'my_textdomain' ), 
        'Raleway' => esc_attr__( 'Raleway', 'my_textdomain' ), 
        'Redressed' => esc_attr__( 'Redressed', 'my_textdomain' ), 
        'Rock+Salt' => esc_attr__( 'Rock Salt', 'my_textdomain' ), 
        'Rokkitt' => esc_attr__( 'Rokkitt', 'my_textdomain' ), 
        'Roboto' => esc_attr__( 'Roboto', 'my_textdomain' ), 
        'Ruslan+Display' => esc_attr__( 'Ruslan Display', 'my_textdomain' ), 
        'Schoolbell' => esc_attr__( 'Schoolbell', 'my_textdomain' ), 
        'Shadows+Into+Light' => esc_attr__( 'Shadows Into Light', 'my_textdomain' ), 
        'Shanti' => esc_attr__( 'Shanti', 'my_textdomain' ), 
        'Sigmar+One' => esc_attr__( 'Sigmar One', 'my_textdomain' ), 
        'Six+Caps' => esc_attr__( 'Six Caps', 'my_textdomain' ), 
        'Slackey' => esc_attr__( 'Slackey', 'my_textdomain' ), 
        'Smythe' => esc_attr__( 'Smythe', 'my_textdomain' ), 
        'Sniglet' => esc_attr__( 'Sniglet', 'my_textdomain' ), 
        'Special+Elite' => esc_attr__( 'Special Elite', 'my_textdomain' ), 
        'Stardos+Stencil' => esc_attr__( 'Stardos Stencil', 'my_textdomain' ), 
        'Sue+Ellen+Francisco' => esc_attr__( 'Sue Ellen Francisco', 'my_textdomain' ), 
        'Sunshiney' => esc_attr__( 'Sunshiney', 'my_textdomain' ), 
        'Swanky+and+Moo+Moo' => esc_attr__( 'Swanky and Moo Moo', 'my_textdomain' ), 
        'Syncopate' => esc_attr__( 'Syncopate', 'my_textdomain' ), 
        'Tangerine' => esc_attr__( 'Tangerine', 'my_textdomain' ), 
        'Tenor+Sans' => esc_attr__( 'Tenor Sans', 'my_textdomain' ), 
        'Terminal+Dosis+Light' => esc_attr__( 'Terminal Dosis Light', 'my_textdomain' ), 
        'The+Girl+Next+Door' => esc_attr__( 'The Girl Next Door', 'my_textdomain' ), 
        'Tinos' => esc_attr__( 'Tinos', 'my_textdomain' ), 
        'Ubuntu' => esc_attr__( 'Ubuntu', 'my_textdomain' ), 
        'Ultra' => esc_attr__( 'Ultra', 'my_textdomain' ), 
        'Unkempt' => esc_attr__( 'Unkempt', 'my_textdomain' ), 
        'UnifrakturCook' => esc_attr__( 'UnifrakturCook', 'my_textdomain' ), 
        'UnifrakturMaguntia' => esc_attr__( 'UnifrakturMaguntia', 'my_textdomain' ), 
        'Varela' => esc_attr__( 'Varela', 'my_textdomain' ), 
        'Varela+Round' => esc_attr__( 'Varela Round', 'my_textdomain' ), 
        'Vibur' => esc_attr__( 'Vibur', 'my_textdomain' ), 
        'Vollkorn' => esc_attr__( 'Vollkorn', 'my_textdomain' ), 
        'VT323' => esc_attr__( 'VT323', 'my_textdomain' ), 
        'Waiting+for+the+Sunrise' => esc_attr__( 'Waiting for the Sunrise', 'my_textdomain' ), 
        'Wallpoet' => esc_attr__( 'Wallpoet', 'my_textdomain' ), 
        'Walter+Turncoat' => esc_attr__( 'Walter Turncoat', 'my_textdomain' ), 
        'Wire+One' => esc_attr__( 'Wire One', 'my_textdomain' ), 
        'Yanone+Kaffeesatz' => esc_attr__( 'Yanone Kaffeesatz', 'my_textdomain' ), 
        'Yeseva+One' => esc_attr__( 'Yeseva One', 'my_textdomain' ), 
        'Zeyada' => esc_attr__( 'Zeyada', 'my_textdomain' ), 
    );

/**
 * Add Kirki Field
 */
Kirki::add_field( 'my_theme', array(
    'type'        => 'select',
    'settings'    => 'typography_font_family',
    'description' => __( 'Font Family', 'my_textdomain' ),
    'section'     => 'my_section_typography',
    'default'     => ',
    'transport'   => 'postMessage',
    'multiple'    => 0,
    'choices'     => myfonts(),
) );

/**
 * JavaScript
 */
 WebSafeFonts = ['Arial, Helvetica, sans-serif',
        '"Arial Black", Gadget, sans-serif',
        '"Comic Sans MS", cursive, sans-serif',
        'Impact, Charcoal, sans-serif',
        '"Lucida Sans Unicode", "Lucida Grande", sans-serif',
        'Tahoma, Geneva, sans-serif',
        '"Trebuchet MS", Helvetica, sans-serif',
        'Verdana, Geneva, sans-serif',
        'Georgia, serif',
        '"Palatino Linotype", "Book Antiqua", Palatino, serif',
        '"Times New Roman", Times, serif',
        '"Courier New", Courier, monospace',
        '"Lucida Console", Monaco, monospace'
    ];

 wp.customize( 'typography_font_family', function( value ) {
        value.bind( function( newval ) {

            var font_css = newval.replace(/\+/g, " ");

            if( jQuery.inArray( font_css, WebSafeFonts ) === -1 && font != '') {
                $( 'head' ).append( '<link href="https://fonts.googleapis.com/css?family=' + newval + '" rel="stylesheet" type="text/css">' );
                $( 'body' ).css('font-family', '"' + font_css + '"');

            } else if ( font != '' || font != ' ' ) {
                $( 'body' ).css('font-family', font_css);
            }

        } );
    } );

I basically create an array in PHP with Google fonts and web safe fonts. If a web safe font is selected, there is no need for an API call, if a Google font is selected, then I use jquery for this: $( 'head' ).append( '<link href="https://fonts.googleapis.com/css?family=' + newval + '" rel="stylesheet" type="text/css">' );

Works like a charm. Only downside with my solution, I don't cross reference the font family with the supported font-weights. To be honest, I don't really need that. I have a slider field below the font-family, which goes from 100-900 (in steps of 100). If a font supports a certain font weight, just slide the font-weight and see if a change occurs. CSS will always fallback to the closest available font-weight if the current selected font-weight is not available.

Kirki::add_field( 'my_theme', array(
    'type'        => 'slider',
    'settings'    => 'font_weight',
    'description' => esc_attr__( 'Font Weight', 'my_textdomain' ),
    'section'     => 'my_section_typography',
    'default'     => '400',
    'transport'   => 'postMessage',
    'choices'     => array(
        'min'  => '100',
        'max'  => '900',
        'step' => '100',
    ),
) );

// JavaScript
wp.customize( 'font_weight', function( value ) {
        value.bind( function( newval ) {
            $( 'body' ).css('font-weight', newval );
        } );
    } );

[kmob2]

Update: This solution also contains the web safe fonts, as mentioned here: https://github.com/aristath/kirki/issues/1189 I have made another comment there, however the issue is closed, and I can't seem to re-open it. I honestly think having the standard web safe fonts as separate selections is mandatory (along with the fallback fonts mentioned in the other issue).

[carasmo]

$( 'head' ).append( '<link href="https://fonts.googleapis.com/css?family=' + newval + '" rel="stylesheet" type="text/css">' ); Is one way to go for the typography field, if you don't need weights to preview. Unless it's a typography field, in Kirki, weights won't load at all unless you're using the Kirki_Fonts_Google::$force_load_all_variants = true; I didn't want the variety of weights associated with the fonts.

Easy google fonts has another way, looks great.. The way they do the implementation of changing fonts is similar to Kirki. If I choose a paragraph font, Open Sans, and then I choose the weight as 400, then strong will be the fake bold and not 700 or whatever it is. When I was doing this, I removed all local installs of any google fonts to make sure I wasn't seeing the wrong thing.

[carasmo]

Works with Web Font Loader, instead of loading all of them.

wp.customize( 'theme_base_font', function( value ) {
        value.bind( function( font ) {

        WebFont.load({
            google: {
                families: [

                '' + font + ':200,300,400,700,900',
                '' + font + ':bold',
                '' + font + ':italic'

                ]
            }
        } );

    } );
} );

[aristath]

@carasmo that looks great, thanks for checking into that!

[aristath]

I wanted to do this in 3.0 but there's lots of other things in this version so I'll move this to the 3.1 milestone.

[aristath]

I had some free time today so I implemented this in 3.0, and I have to say it's pretty cool! Too bad it took me so long to fix this 👍

[Micemade]

Hi @aristath, it seems that this stopped to work after 3.0 udpate:

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

Is there any other way to force all variants, perhaps ?

[aristath]

it seems that this stopped to work after 3.0 udpate:

Duplicate of #1420, we'll continue the discussion there.