Archived topic
html5 validation error with google fonts
9 replies · Started by Markus on August 9, 2016
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?
Hi there,
This topic should help: https://generatepress.com/forums/topic/google-fonts-and-w3c-validator-error/
Let me know :)
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?
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?
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/
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"}
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
Have a nice weekend. Whenever you start it.
;-)
Ha! You too :)