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

simontomkins · 2024-03-14T15:39:41Z

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.

The text was updated successfully, but these errors were encountered:

tristaningenius · 2024-03-14T20:19:15Z

Same issue there

Looper1984 · 2024-03-14T22:37:09Z

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 · 2024-03-15T01:49:28Z

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 · 2024-03-15T02:35:54Z

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 · 2024-03-15T02:37:13Z

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

CodeBusy · 2024-03-15T03:34:12Z

@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 · 2024-03-15T04:26:24Z

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 · 2024-03-18T04:45:00Z

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 · 2024-03-19T00:11:18Z

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 · 2024-03-19T06:32:11Z

When are they going to fix it

sarfarazDC · 2024-03-19T06:56:10Z

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

irisinteractive · 2024-03-19T08:10:58Z

Please update the plugin 🙏

sarfarazDC · 2024-03-19T08:26:55Z

Please update the plugin 🙏

Which Plugin?

mapsteps · 2024-03-19T09:18:55Z

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 · 2024-03-19T14:25:42Z

Same issue there with my WordPress themes from themeforest

AndresGMS · 2024-03-19T16:52:14Z

This works for my sites.

STEP BY STEP

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

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';

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 · 2024-03-20T00:56:07Z

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 · 2024-03-20T16:47:32Z

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 · 2024-03-20T21:18:35Z

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 · 2024-03-20T23:54:22Z

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

Works like a charm now

JustGeekFR · 2024-03-21T09:02:27Z

Hello,

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

DeoThemes · 2024-03-22T00:57:03Z

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 · 2024-03-22T08:48:54Z

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

purethemes · 2024-03-22T10:47:17Z

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 · 2024-03-22T11:06:06Z

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 · 2024-03-22T19:58:51Z

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 · 2024-03-22T20:07:02Z

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 · 2024-03-22T20:16:08Z

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 · 2024-03-23T08:00:36Z

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 · 2024-03-23T08:53:41Z

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 · 2024-03-25T14:12:02Z

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

zaymund · 2024-03-25T17:15:19Z

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

Milie79 · 2024-03-27T09:47:11Z

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 · 2024-03-28T19:03:55Z

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 [email protected] . Good luck.

dotsam · 2024-04-11T00:08:20Z

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.

simontomkins changed the title ~~Kirki fonts loading as octet-streams rather than woff files~~ Major issue - Kirki Fonts not working (woff files not being rendered) Mar 15, 2024

colmtroy mentioned this issue Mar 15, 2024

Google fonts api no longer returning woff files when the user agent is set to 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 google/fonts#7390

Open

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

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

Comments

simontomkins commented Mar 14, 2024 • edited Loading

Issue description:

Version used:

Using theme_mods or options?

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

tristaningenius commented Mar 14, 2024

Looper1984 commented Mar 14, 2024 • edited Loading

artkrsk commented Mar 15, 2024

CodeBusy commented Mar 15, 2024 • edited Loading

DeoThemes commented Mar 15, 2024

CodeBusy commented Mar 15, 2024

siliconforks commented Mar 15, 2024

yasinarabaci commented Mar 18, 2024

threesixtyninja commented Mar 19, 2024

Step by step

iamkingsleyf commented Mar 19, 2024

sarfarazDC commented Mar 19, 2024

irisinteractive commented Mar 19, 2024

sarfarazDC commented Mar 19, 2024

mapsteps commented Mar 19, 2024

Mountain-Themes commented Mar 19, 2024 • edited Loading

AndresGMS commented Mar 19, 2024

STEP BY STEP

wilrevehl commented Mar 20, 2024 • edited Loading

patsma commented Mar 20, 2024

siliconforks commented Mar 20, 2024

patsma commented Mar 20, 2024

JustGeekFR commented Mar 21, 2024

DeoThemes commented Mar 22, 2024 • edited Loading

tristaningenius commented Mar 22, 2024

purethemes commented Mar 22, 2024

x-bull commented Mar 22, 2024

iamkingsleyf commented Mar 22, 2024

kmmathis commented Mar 22, 2024

Mountain-Themes commented Mar 22, 2024

vlthemes commented Mar 23, 2024

Mountain-Themes commented Mar 23, 2024

ashann11 commented Mar 25, 2024

zaymund commented Mar 25, 2024 • edited Loading

Milie79 commented Mar 27, 2024

zaymund commented Mar 28, 2024 • edited Loading

dotsam commented Apr 11, 2024

simontomkins commented Mar 14, 2024 •

edited

Loading

Using `theme_mods` or `options`?

Looper1984 commented Mar 14, 2024 •

edited

Loading

CodeBusy commented Mar 15, 2024 •

edited

Loading

Mountain-Themes commented Mar 19, 2024 •

edited

Loading

wilrevehl commented Mar 20, 2024 •

edited

Loading

DeoThemes commented Mar 22, 2024 •

edited

Loading

zaymund commented Mar 25, 2024 •

edited

Loading

zaymund commented Mar 28, 2024 •

edited

Loading