Il peut arriver que l’on veuille utiliser plusieurs Google Fonts sur son site web. Quelle est la meilleure manière de les inclure?
Plusieurs utilisateurs auraient le réflex de simplement copier les balises <link> directement des pages Google Font. Par exemple:
<link href='https://fonts.googleapis.com/css?family=Raleway:400,500' rel='stylesheet' type='text/css'> <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
Or, il est possible de combiner les deux dans une seule balise, en séparant les fonts avec le symbole de barre verticale, « | ». En faisant ainsi, on évite une requète vers les serveurs de Google pour chacune Google Font additionelle incluse. Exemple:
<link href='https://fonts.googleapis.com/css?family=Raleway:400,500|Open+Sans:400,700' rel='stylesheet' type='text/css'>
Ce html est cependant invalide. Le validateur html du w3c affiche comme résultat:
| is not allowed.Comme le résultat l’indique, le symbole « | » ne peut être inséré dans l’attribut href. Tous caractères considérés comme étant « à risque » présents dans un URL doivent être encodés.
On doit donc le remplacer par sa valeur encodée: %7C.
Donc, le résultat final:
<link href='https://fonts.googleapis.com/css?family=Raleway:400,500%7COpen+Sans:400,700' rel='stylesheet' type='text/css'>
