Google Font ne fonctionne pas sur Safari
Je travaille à rendre mon site identique sous Safari et Chrome. Dans Chrome il ressemble exactement à ce que je veux. Le problème majeur est que Google Font ne semble pas se charger sous Safari. Parce que j'utilise le code exact donné sur la police Google site, je ne comprends pas pourquoi Safari ne le récupère pas. Est-il simplement incompatible avec Safari et je dois compter sur une police de secours?
Pour une raison étrange, j'ai vécu cela sur certaines polices Web de Google ... lorsque cela s'est produit, je les récupère généralement sur mon serveur et/ou les convertis dans fontsquirrel .... Safari devrait être capable de prendre des fichiers TTF quel que soit le ver:
Votre CSS ne doit pas seulement contenir
font-family: 'Source Sans Pro', sans-serif;
il doit également avoir des valeurs pour FONT-STYLE et FONT-WEIGHT:
font-family: 'Source Sans Pro', sans-serif; font-weight:900; font-style:italic;
dans le cas où vous utilisez une police qui contient ces valeurs comme par exemple: https://fonts.googleapis.com/css?family=Source+Sans+Pro:900italic
Si vous utilisez un code @import dans le CSS comme celui-ci
supprimez-le et utilisez le lien dans la balise head
Une mise à jour 2018
J'ai eu ce problème dans le passé et j'ai dû recourir à l'option de fournir plus de formats de fichiers de polices. J'ai été un peu surpris de le rencontrer à nouveau en 2018. Mais il s'est avéré que mon problème n'était pas avec les formats de fichiers mais simplement avec le fait de ne pas demander et spécifier les poids de police corrects.
Si nous ne personnalisons pas l'URL pour demander cette police à Google, notre balise de lien ressemblera à ceci:
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet">
Voyons ce qu'il y a à l'intérieur de cette URL demandée. Il va contenir plusieurs règles de police qui ressemblent à ceci:
/* latin */
@font-face {
font-family: 'Source Sans Pro';
font-style: normal;
font-weight: 400;
src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(https://fonts.gstatic.com/s/sourcesanspro/v11/6xK3dSBYKcSV-LCoeQqfX1RYOo3qOK7l.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
Remarquez le font-weight attribut. Il est spécifié comme 400, qui est une police pondérée "normale". Certains navigateurs peuvent prendre cette police et la transformer en gras et toujours à moitié décent. Cela s'appelle "faux gras" . Cela ne sera jamais aussi beau qu'une police en gras fabriquée à la main. Et sur certains navigateurs, notamment Safari mobile, il va tomber à plat et avoir l'air horrible.
Le remède consiste à demander et à spécifier les variantes de poids de police réelles que vous souhaitez utiliser . Dans mon cas, cela ressemble à ceci:
Cela produira la balise de lien suivante:
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700&subset=latin-ext" rel="stylesheet">
Si vous regardez le contenu de cette URL, vous constaterez qu'il existe maintenant des entrées pour les règles de police _ font-weight: 700 là-dedans.
Maintenant, si je veux utiliser la version en gras de cette police pour mes balises h1, j'utiliserai le CSS suivant.
h1 {
font-family: 'Source Sans Pro', sans-serif;
font-weight: 700;
}
La plupart des navigateurs définissent automatiquement h1 comme font-weight: bold. Si je veux profiter de ce paramètre par défaut, je dois fournir mes propres règles de police. Je peux le faire en dupliquant simplement les règles de police de caractères fournies par Google, en échangeant font-face: 700 pour font-face: bold et mettre ces règles modifiées dans mon propre css.
Donc, cette règle:
/* latin */
@font-face {
font-family: 'Source Sans Pro';
font-style: normal;
font-weight: 700;
src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'), url(https://fonts.gstatic.com/s/sourcesanspro/v11/6xKydSBYKcSV-LCoeQqfX1RYOo3ig4vwlxdu.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
Deviendrait ceci:
/* latin */
@font-face {
font-family: 'Source Sans Pro';
font-style: normal;
font-weight: bold;
src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'), url(https://fonts.gstatic.com/s/sourcesanspro/v11/6xKydSBYKcSV-LCoeQqfX1RYOo3ig4vwlxdu.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
Maintenant, une balise h1 avec font-family: 'Source Sans Pro' utilisera la bonne variante de police. Si vous voulez une lecture plus approfondie, consultez ce 2012 A List Apart article .
Mon cas était que j'utilisais un nom de police sans guillemets. Alors changez
body{
font-family: roboto, Arial, sans-serif;
}
à
body{
font-family: 'roboto', Arial, sans-serif;
}
Chrome fonctionne parfaitement sans guillemets, mais pas Safari.
J'ai eu un cas où une police Web Google (Londrina) ne s'est pas affichée dans Safari (pour Windows), car j'ai utilisé text-rendering: optimizeLegibility;. Après avoir retiré cela, c'était bien.
Exemple: http://codepen.io/Julia-r/pen/gagbdy