Error Google Font (subset)

  • Resolved MarcosAlexandre

    (@marcosalexandre)


    5 years, 10 months ago

    Hello, first of all, congratulations on the excellent plugin!

    I’m trying to use this option:

    Combine and load fonts asynchronously with webfont.js

    However I am getting the following error in console:

    https://prntscr.com/nrpdvt

    The “& subset = ,,,” parameter at the end of the generated url is causing an error 404 and the fonts are not loaded:

    https://prntscr.com/nrpe1u

    I do not know if it’s something related to my script call:

    Before I used:

    wp_enqueue_style (‘Gloria Hallelujah’, ‘//fonts.googleapis.com/css?family=Gloria+Hallelujah’, false);
    wp_enqueue_style (‘Titillium Web’, ‘//fonts.googleapis.com/css?family=Titillium+Web:300,400,600,700’, false);

    Then to test, I moved to:

    wp_enqueue_style (‘google-fonts’, ‘//fonts.googleapis.com/css?family=Gloria+Hallelujah|Titillium+Web:300,400,600,700’, false);

    Now, also to test, I’m using this:

    wp_enqueue_style (‘google-fonts’, ‘//fonts.googleapis.com/css?family=Gloria+Hallelujah&display=swap%Titillium+Web:300,400,600,700&display=swap&subset=latin-ext’, false);

    But anyway I get the error on the console.

    Just load the sources I use other options like the one I’m currently using:

    Combine and preload in head (fonts load late, but are not render-blocking)

    This causes a delay in loading in PageSpeed.

    Any suggestions on how I can solve it?

    Thanks!

Viewing 8 replies - 1 through 8 (of 8 total)
  • Plugin Author Optimizing Matters

    (@optimizingmatters)

    Could you copy/ paste the full URL’s of the failing font-requests @marcosalexandre ?

    Thread Starter MarcosAlexandre

    (@marcosalexandre)

    Yes:

    https://fonts.googleapis.com/css?family=Gloria+Hallelujah%7CTitillium+Web:300,400,600,700%7CRaleway:400%7CLato:300,400%7CGloria+Hallelujah%7CRaleway:400%7CLato:300,400&subset=,,,,

    Tks

    Thread Starter MarcosAlexandre

    (@marcosalexandre)

    The Lato and Raleway fonts are called by a plugin (Cost Calculator For WordPress).
    Here is his code:

    $cost_calculator_global_form_options = get_option("cost_calculator_global_form_options");
	if($cost_calculator_global_form_options["primary_font"]!="" && $cost_calculator_global_form_options["primary_font_custom"]=="")
		wp_enqueue_style("cc-google-font-primary", "//fonts.googleapis.com/css?family=" . urlencode($cost_calculator_global_form_options["primary_font"]) . (!empty($cost_calculator_global_form_options["primary_font_subset"]) ? "&subset=" . implode(",", $cost_calculator_global_form_options["primary_font_subset"]) : ""));
	else if($cost_calculator_global_form_options["primary_font_custom"]=="")
		wp_enqueue_style("cc-google-font-raleway", "//fonts.googleapis.com/css?family=Raleway:400&subset=latin-ext");
	if($cost_calculator_global_form_options["secondary_font"]!="" && $cost_calculator_global_form_options["secondary_font_custom"]=="")
		wp_enqueue_style("cc-google-font-secondary", "//fonts.googleapis.com/css?family=" . urlencode($cost_calculator_global_form_options["secondary_font"]) . (!empty($cost_calculator_global_form_options["secondary_font_subset"]) ? "&subset=" . implode(",", $cost_calculator_global_form_options["secondary_font_subset"]) : ""));
	else if($cost_calculator_global_form_options["secondary_font_custom"]=="")
		wp_enqueue_style("cc-google-font-lato", "//fonts.googleapis.com/css?family=Lato:300,400&subset=latin-ext");

    Tks

    Plugin Author Optimizing Matters

    (@optimizingmatters)

    Are the 4 comma’s at the end of the URL exactly what you found on the console @marcosalexandre ? Could you copy/paste the entire Google Fonts JS block in your HTML source?

    Thread Starter MarcosAlexandre

    (@marcosalexandre)

    Is this what you need?

    <script data-cfasync="false" id="ao_optimized_gfonts_config" type="text/javascript">WebFontConfig={google:{families:["Gloria Hallelujah:","Titillium Web:300,400,600,700:","Titillium Web:300:","Gloria Hallelujah:","Titillium Web:300,400,600,700:","Titillium Web:300:"] },classes:false, events:false, timeout:1500};</script>

    The development url is:
    https://lehype.crazycrabcayman.com/

    Tks

    Plugin Author Optimizing Matters

    (@optimizingmatters)

    OK, I think the problem is with the extra : at the end of each font-family.

    I copied the HTML for the 4 linked Google Fonts CSS files from your dev URL (the un-optimized version) to a local dev machine:

    and the weird thing is I’m not getting those extra :‘s

    and the resulting CSS is loaded:

    So given I can’t reproduce I’m kind of stuck here. Could it be you have Google Font optimization active elsewhere (in WP Rocket) too and that that is interfering somehow?

    Thread Starter MarcosAlexandre

    (@marcosalexandre)

    Thank you for your support.

    I checked the WP Rocket settings and it actually has a setting for Google fonts that was enabled. I disabled it and everything worked correctly again!

    Thanks

    Plugin Author Optimizing Matters

    (@optimizingmatters)

    Happy it works marcosalexandre, feel free to leave a review of the plugin and support here! ??

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Error Google Font (subset)’ is closed to new replies.