[Resolved] Google Fonts and W3C Validator error

[David]

Hi there,

I am still getting this w3c validator error because of the pipe separator between google fonts. Pipe | in href parameter needs to be replaced with %7C. How can I do that?

thank you!

[Tom]

Hi there,

I’m not sure if it will work, as Google specifically suggests using the pipe in their example code they supply you. I assume they do this for a reason.

You can convert them using this function:

add_filter( 'generate_typography_google_fonts','tu_convert_font_pipes', 100 );
function tu_convert_font_pipes( $google_fonts ) {
	return str_replace( '|', '%7C', $google_fonts );
}

Adding PHP: https://generatepress.com/knowledgebase/adding-php-functions/

[David]

Hi,

thank you again!It looks like it works perfectly. If your IP is the same you can check it out and let me know if everything is OK 🙂

https://scandinavianstudy.sk

https://fonts.googleapis.com/css?family=Open+Sans%3A300italic%2C400italic%2C600italic%2C300%2C400%2C600&subset=latin%2Clatin-ext&ver=4.5.3

https://fonts.googleapis.com/css?family=Roboto:100,100italic,300,300italic,regular,italic,500,500italic,700,700italic,900,900italic%7COswald:300,regular,700%7CRoboto%7COswald&subset=latin-ext

[Tom]

Looks good! 🙂

[pz]

It works only partially for me. Initially I had two errors. After I applied the snippet mentioned above by Tom I have only one error:

Error: Bad value for attribute href on element link: Illegal character in query: | is not allowed.
From line 1, column 7486; to line 1, column 7842
-scale=1"><link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:100,100i…,300,300italic,400,400italic,500,500italic,600,600italic,700,700italic,800,800italic,900,900italic"><link

How to get rid of this one?

[Tom]

Looks like that might be coming from another source like a plugin maybe.

[pz]

Yes that’s true, it was coming from Elementor’s “Disable Global Fonts” checkbox. It should be checked. Thanks.

[Tom]

No problem 🙂

[Author]

Posts