[Resolved] html5 validation error with google fonts

[Markus]

Hi Tom.
I use the Typography Add-on and two Google fonts.
HTML Validation says:

Error: Bad value //fonts.googleapis.com/css?family=Lora:regular,italic,700,700italic|Droid+Sans:regular,700 for attribute href on element link: Illegal character in query: | is not allowed.
From line 52, column 1; to line 52, column 176

</style>
<link rel='stylesheet' id='generate-fonts-css'  href='//fonts.googleapis.com/css?family=Lora:regular,italic,700,700italic|Droid+Sans:regular,700' type='text/css' media='all' />

It seems the | is causing the error.
Any idea how to fix this?

[Tom]

Hi there,

This topic should help: https://generatepress.com/forums/topic/google-fonts-and-w3c-validator-error/

Let me know 🙂

[Markus]

Hi Tom,

thank you for the fast reply.

I tried the code above with Code Snipplets: no change.
Also, I put this in my GP Child Theme (functions.php). I get the result:

</style>
<link rel='stylesheet' id='generate-fonts-css'  href='//fonts.googleapis.com/css?family=Lora:regular,italic,700,700italic|Droid+Sans:regular,700' type='text/css' media='all' />

The | is replaced by %7C one time, then the font is added again with |.
Any more idea on this topic?

[Markus]

Hi Tom,

Sorry, I posted the wrong result above!

I tested both ways again.
With the Code Snipplets or by the functions.php in my GP Child Theme I get:

</style>
<link rel='stylesheet' id='generate-fonts-css'  href='//fonts.googleapis.com/css?family=Lora:regular,italic,700,700italic%7CDroid+Sans:regular,700|Droid+Sans:regular,700' type='text/css' media='all' />' 

The | is replaced by %7C one time, then the font is added again with |.
Any more idea on this topic?

[Tom]

Hmm, that’s not what I’m experiencing on my localhost.

I have it added through a plugin though, can you try that method?: https://generatepress.com/knowledgebase/adding-php-functions/

[Markus]

Hi Tom,

I tried the Pluginception Plugin method.
Just the same result.

I also tried to switch off all Plugins: (except the Pluginception Plugin).

It works!

Then I tried to switch on all Plugins one by one to find out what is going on.

And the wrong result came up when I activated the GP Premium Plugin.

The I tried to switch off all GP Premium Addons one by one.

The problem lies in the Secondary Nav Addon.

If I just switch this off, I get the line:

</style>
<link rel='stylesheet' id='generate-fonts-css'  href='//fonts.googleapis.com/css?family=Lora:regular,italic,700,700italic%7CDroid+Sans:regular,700' type='text/css' media='all' />

If Secondary Nav is on, I get:

</style>
<link rel='stylesheet' id='generate-fonts-css'  href='//fonts.googleapis.com/css?family=Lora:regular,italic,700,700italic%7CDroid+Sans:regular,700|Droid+Sans:regular,700' 

I don’t know if this helps: I send you also the .json Backup of the secondary nav:
{"secondary_nav_mobile_label":"Service","secondary_nav_layout_setting":"secondary-contained-nav","secondary_nav_position_setting":"secondary-nav-below-header","secondary_nav_alignment":"right","secondary_menu_item":"12","navigation_background_color":"#e8dac1","navigation_background_hover_color":"#fff8ea","secondary_sub_menu_item_height":"6","secondary_navigation_font_size":"13","navigation_text_color":"#123852","navigation_background_current_color":"#fff8ea","navigation_text_current_color":"#123852","subnavigation_background_color":"#e8dac1","navigation_text_hover_color":"#123852","font_secondary_navigation":"Droid Sans","subnavigation_text_color":"#123852","subnavigation_background_hover_color":"#fff8ea","subnavigation_text_hover_color":"#123852","subnavigation_background_current_color":"#fffdfa","subnavigation_text_current_color":"#123852"}

[Tom]

Ah that makes sense.

I just updated the code, can you try it now?: https://generatepress.com/forums/topic/google-fonts-and-w3c-validator-error/#post-213879

[Markus]

That’s it.

🙂

Look here: zahlungsunfaehigkeit.

[Markus]

Have a nice weekend. Whenever you start it.

😉

[Tom]

Ha! You too 🙂

[Author]

Posts