Major issue - Kirki Fonts not working (woff files not being rendered)

[simontomkins]

Issue description:

I suspect that whatever mime type Kirki used to rely on to get woffs is no longer working. Fonts are loaded as octet-streams.

Version used:

5.0.0

Using theme_mods or options?

theme_mods

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

Load 'Inter' within a typography control, and look within web inspector (Network > Fonts) to see the file type of the font loaded.

I noticed something strange in web inspector this week:

Rather than woff files appearing, fonts from Kirki were rendered as octet-streams.

From researching this a bit more, if a font does not have a MIME type it takes a Content-Type: binary/octet-stream instead of application/font-woff.

This is the code Kirki uses to retrieve Google fonts:

	/**
	 * Get remote file contents.
	 *
	 * @access public
	 * @since 3.1.0
	 * @param string $url        The URL we want to get the contents from.
	 * @param string $user_agent The user-agent to use for our request.
	 * @return string            Returns the remote URL contents.
	 */
	public function get_url_contents( $url = '', $user_agent = null ) {
		if ( ! $user_agent ) {
			/**
			 * The user-agent we want to use.
			 *
			 * For woff2 format, use'Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:73.0) Gecko/20100101 Firefox/73.0'.
			 * The default user-agent is the only one compatible with woff (not woff2)
			 * which also supports unicode ranges.
			 */
			$user_agent = 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_5) AppleWebKit/603.3.8 (KHTML, like Gecko) Version/10.1.2 Safari/603.3.8';
		}
		// Get the response.
		$response = wp_remote_get( $url, array( 'user-agent' => $user_agent ) );
		// Early exit if there was an error.
		if ( is_wp_error( $response ) ) {
			return;
		}
		// Get the CSS from our response.
		$contents = wp_remote_retrieve_body( $response );
		// Early exit if there was an error.
		if ( is_wp_error( $contents ) ) {
			return;
		}
		return $contents;
	}

I tried a proof of concept, changing it to:

public function get_url_contents( $url = '', $user_agent = null ) {
            /**
             * The user-agent we want to use.
             *
             * The default user-agent is the only one compatible with woff (not woff2)
             * which also supports unicode ranges.
             */
            $user_agent = 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_5) AppleWebKit/603.3.8 (KHTML, like Gecko) Version/10.1.2 Safari/603.3.8';
            // Switch to a user-agent supporting woff2 if we don't need to support IE.
            if ( 'woff2' === $this->font_format ) {
                $user_agent = 'Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:73.0) Gecko/20100101 Firefox/73.0';
            }
            // Get the response.
            $response = wp_remote_get( $this->remote_url, array( 'user-agent' => $user_agent ) );
            // Early exit if there was an error.
            if ( is_wp_error( $response ) ) {
                return '';
            }
            // Get the CSS from our response.
            $contents = wp_remote_retrieve_body( $response );
            return $contents;
        }

A key change is the user_agent.

$user_agent = 'Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:73.0) Gecko/20100101 Firefox/73.0';

Ensures we just get woff2 files (which do load correctly).

My guess is that seeing as woff2 support is basically assumed at this point, Google has stopped sending back .woff files when the older user agent is used - and instead you see this octet-stream version.

A major issue arises when trying to load the popular 'Inter' font within the typography control in Kirki. The octet-stream version of it doesn't render at all.

I'd really appreciate it if Themeum looked into this.

[tristaningenius]

Same issue there

[Looper1984]

Not sure if I'm having the same issue or just a similar one. I do also get directed to a /font instead of a .woff file, but no content type is identified. I'm using a combination of Spartan regular and Spartan 800. When I use Spartan 500 instead of regular, it works fine. When using regular, 800 ain't working either.

[artkrsk]

I have several themes which are dependant on Kirki typography facing the same issue. Can we please expect a patch release on this major issue?

[CodeBusy]

Exactly same here.
Tested with default WordPress theme, with no plugin active. Tried lowering PHP version too.

No google font set through Kirki is working, irrespective of font variant etc.
When we clear font cache it no more downloads woff files in fonts folder just a file named as 'font' and @font-face looks like this:

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://sitename.com/wp-content/fonts/inter/font) format('woff');
  unicode-range: U+1F00-1FFF;
  }

Appreciate your help.

[DeoThemes]

I guess that's why I can't load the Outfit font.

[CodeBusy]

@simontomkins Can we have issue title edited to something like --- Google Fonts Or Kirki Fonts not loading/working?
That will catch the attention of team, as it is major issue and need a patch as early as possible. Thanks.

[siliconforks]

It seems like a quick fix for this issue is to change the user agent as suggested above:

$user_agent = 'Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:73.0) Gecko/20100101 Firefox/73.0';

Then delete the kirki_remote_url_contents transient:

wp transient delete kirki_remote_url_contents

Then everything should work using .woff2 files instead of .woff files - at least until Google changes something again...

[yasinarabaci]

It seems like a quick fix for this issue is to change the user agent as suggested above:

$user_agent = 'Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:73.0) Gecko/20100101 Firefox/73.0';

Then delete the kirki_remote_url_contents transient:

wp transient delete kirki_remote_url_contents

Then everything should work using .woff2 files instead of .woff files - at least until Google changes something again...

Thanks for the solution.

[threesixtyninja]

Thanks for the solution.

We had the exact same issue with the popular Poppins font.

The interim solution outlined above fixed it too.

Step by step

1. In: /plugins/kirki/kirki-packages/module-webfonts/src/Webfonts/Downloader.php

Commented out line 186:
//$user_agent = 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_5) AppleWebKit/603.3.8 (KHTML, like Gecko) Version/10.1.2 Safari/603.3.8';

Added line:
$user_agent = 'Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:73.0) Gecko/20100101 Firefox/73.0';

2. In: Wordpress backend.

Installed plugin: 'Transients Manager' and activated it on affected websites in the Wordpress Multisite.

3. In Wordpress backend.

Went to: Tools > Transients.

Searched for: kirki.

Deleted: kirki_remote_url_contents

[iamkingsleyf]

When are they going to fix it

[sarfarazDC]

Can we expect an Update soon? our multiple websites are Affected.

[irisinteractive]

Please update the plugin 🙏

[sarfarazDC]

Please update the plugin 🙏

Which Plugin?

[mapsteps]

Hey there,

David here, former owner of Kirki. I've pinged the Themeum team about this. Hope we'll get a fix for this soon!

[Mountain-Themes]

Same issue there with my WordPress themes from themeforest

[AndresGMS]

This works for my sites.

STEP BY STEP

1. Go to plugin file:

Wordpress admin option (copy and paste on your browser):

/wp-admin/plugin-editor.php?file=kirki%2Fkirki-packages%2Fmodule-webfonts%2Fsrc%2FWebfonts%2FDownloader.php&plugin=kirki%2Fkirki.php

FTP Option:

/plugins/kirki/kirki-packages/module-webfonts/src/Webfonts/Downloader.php

2. change line 186:

Commented out line 186:
//$user_agent = 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_5) AppleWebKit/603.3.8 (KHTML, like Gecko) Version/10.1.2 Safari/603.3.8';

Added line:
$user_agent = 'Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:73.0) Gecko/20100101 Firefox/73.0';

3. Clear kirki cache:

Wordpress admin option (copy and paste on your browser):

Notice: Take care with your customs fonts on this folder: /wp-content/fonts/ kirki will delete and download all fonts again so, your custom fonts in this folder will delete by kirki, recomendation is upload your custom fonts on your own folder in your child theme.

/wp-admin/options-general.php?page=kirki_settings and clear cache (if you are using other aditional option for cache, clear it after kirki cache)

And all fonts will be works!

This works for all our sites, I hope this fix you fonts issue.

Bye.

[wilrevehl]

The annoying thing about the kirki transients and the easy flush option {domain.com}/wp-admin/options-general.php?page=kirki_settings is that it doesn't clear the most important one in cases like this, which is the host path to the fonts. If anyone needs to find that, to remove it, in their mysql, here's the gist:

SELECT * FROM "wp_options" WHERE option_name = "kirki_downloaded_font_files";

[patsma]

After changing the line in the plugin, I don't have any fonts ^^'
Thanks but that does not work for me, I'll leave it for a while and let's see

[siliconforks]

I notice that some of the comments seem confused about how to get woff2 fonts working. If you're experiencing this issue and trying to change the user agent to get woff2 fonts, you also need to delete the transient kirki_remote_url_contents. Note that Kirki's "Clear Font Cache" button does not do this.

You can delete the transient using the (WP-CLI) command I listed above, or, if you aren't able to run the command, you might be able to delete it using the Transients Manager plugin that was suggested here.

Or you can wait until the transient expires on its own - but that may take up to 7 days.

[patsma]

Thanks for the tip :3
I did delete some transient, just not this one ^^'

Works like a charm now

[JustGeekFR]

Hello,

Thank you all for the solution that solved my problem. I hope the extension developers will update their extension.

[DeoThemes]

To fix the issue faster on all our websites we composed a simple plugin that can fix this. Download here.
Simply install and activate it, after that you can delete it. Be aware that we haven't tested it on all setups, so use it at your own risk.

[tristaningenius]

Thanks a lot but a native update would be better
@mapsteps any news ?

[purethemes]

Thanks a lot but a native update would be better @mapsteps any news ?

There was update for Kirki released 2 hours ago, seems they have fixed that, thanks!

[x-bull]

Not sure if I'm having the same issue or just a similar one. I do also get directed to a /font instead of a .woff file, but no content type is identified. I'm using a combination of Spartan regular and Spartan 800. When I use Spartan 500 instead of regular, it works fine. When using regular, 800 ain't working either.

The google font list needs update. Some fonts are not downloaded. Example:
Lato
Montserrat

It makes only ../fonts/font file without downloading the font.

Update the font list please.
Thank you

[iamkingsleyf]

Thanks a lot but a native update would be better @mapsteps any news ?

There was update for Kirki released 2 hours ago, seems they have fixed that, thanks!

There is no mention of a fix in their changelog

[kmmathis]

The 5.1.0 update does not seem to fix the font loading issues, fonts are still not loading correctly on any of my sites using the latest version

[Mountain-Themes]

The 5.1.0 update does not seem to fix the font loading issues, fonts are still not loading correctly on any of my sites using the latest version

Same situation 😔

[vlthemes]

The 5.1.0 update does not seem to fix the font loading issues, fonts are still not loading correctly on any of my sites using the latest version

Same situation 😔

Clean transients kirki_remote_url_contents

[Mountain-Themes]

The 5.1.0 update does not seem to fix the font loading issues, fonts are still not loading correctly on any of my sites using the latest version

Same situation 😔

Clean transients kirki_remote_url_contents

Thanks, this is working

[ashann11]

How do you clean transients mentioned above for that kirki_remote_url_contents piece?

[zaymund]

Here is the solution , you just need to install the plugin and wait for the update

[Milie79]

Here is the solution , you just need to install the plugin and wait for the update

Malheureusement ça n'a pas fonctionné chez moi.

Je l'ai installé et ça a eu l'air de fonctionner (les polices sont redevenues normales) puis impossible d'ouvrir mes sites (j'ai des codes css qui s'affichent à la place de la page d'accueil).
J'ai à moitié résolu le problème en supprimant ce plugin mais après, impossible de remettre le plugin initial de Kirky, ça plante tout.

Unfortunately it didn't work for me.

I installed it and it seemed to work (the policies are normal income) then impossible to open my sites (I have css codes which are displayed instead of the home page) .
I half-resolved the problem by deleting this plugin but afterwards, it's impossible to put the original Kirky plugin back in, it crashes everything.

[zaymund]

Here is the solution , you just need to install the plugin and wait for the update

Malheureusement ça n'a pas fonctionné chez moi.

Je l'ai installé et ça a eu l'air de fonctionner (les polices sont redevenues normales) puis impossible d'ouvrir mes sites (j'ai des codes css qui s'affichent à la place de la page d'accueil). J'ai à moitié résolu le problème en supprimant ce plugin mais après, impossible de remettre le plugin initial de Kirky, ça plante tout.

Unfortunately it didn't work for me.

I installed it and it seemed to work (the policies are normal income) then impossible to open my sites (I have css codes which are displayed instead of the home page) . I half-resolved the problem by deleting this plugin but afterwards, it's impossible to put the original Kirky plugin back in, it crashes everything.

Unfortunately, this seems to be more of a server issue. If you need assistance from a professional, you can reach out to us via email info@templines.com . Good luck.

[dotsam]

The change of user agent here is at best a bandaid, and technically makes Kirki less backwards-compatible with browsers that don't support woff2, but that's only somewhere around 2.42% these days

The real issue is that Kirki is always expecting @font-face{ src: } URLs to be in this format:

https://fonts.gstatic.com/s/opensans/v40/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTS-muw.woff

Whereas the changed behaviour from Google sometimes returns URLs like this:

https://fonts.gstatic.com/l/font?kit=memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgshZ1x4gaVQUwaEQXjM&skey=62c1cbfccc78b4b2&v=v40

In testing a few weeks ago, I would sometimes see this 2nd style of URL even for woff2 files, and my suspicion is that less-frequently-accessed fonts return URLs in the 2nd form, so this user agent change isn't guaranteed to always fix the issue for all fonts. (Testing again today, I get woff files in the 1st format, so Google may have made a change on their end now)

The assumption in the code that breaks with this 2nd URL format is here:

kirki/kirki-packages/module-webfonts/src/Webfonts/Downloader.php

Line 89 in b807cfb

$filename = basename( wp_parse_url( $url, PHP_URL_PATH ) );

This will always return the string font for the new URL format, the result being that all font files get saved as /wp-content/fonts/font-family/font, each new file saved overwriting the last, leaving only whatever file is downloaded last to be referenced by all variants. The last file downloaded will often be for a small unicode range, so the end result is a browser falling back to the next font in the font stack for most characters.

The real fix here could be as easy as changing the above line to something like:

$filename = md5( $url ); 

in order to hash the URL uniquely and not worry about exactly what format it takes.