web-dev-qa-db-fra.com

Les polices Google en hébreu ne fonctionnent que dans Chrome

Je souhaite utiliser une police hébraïque de Google. J'ai donc inclus la police:

<link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Alef:400,700">

Un style mes éléments:

font-family: "Alef", sans-serif;

Cela fonctionne, mais uniquement dans Google Chrome. Dans tous les autres navigateurs testés (IE11, Edge, FireFox, iOS Safari, Android Chrome), l'élément est toujours restitué avec la police par défaut.

En examinant cela, il semble que fonts.googleapis.com renvoie différentes réponses, probablement en raison d'en-têtes de requête différents. Voici ce que je vois (en-têtes identiques non affichés):

Chrome:

GET /css?family=Alef:400,700 HTTP/1.1
Accept: text/css,*/*;q=0.1
Accept-Encoding: gzip, deflate, sdch
Accept-Language: en-US,en;q=0.8,he;q=0.6
User-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/45.0.2454.101 Safari/537.36
X-Chrome-UMA-Enabled: 1
X-Client-Data: CKa2yQEIqbbJAQjEtskBCOqIygEI/ZXKAQi8mMoB

/* hebrew */
@font-face {
  (...)
  src: (...)
  unicode-range: U+0590-05FF, U+20AA, U+25CC, U+FB1D-FB4F;
}
/* latin */
@font-face {
  (...)
  src: (...)
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}
(...Same for bold etc.)

Edge:

GET /css?family=Alef:400,700 HTTP/1.1
Accept: text/css, */*
Accept-Encoding: gzip, deflate
Accept-Language: en-US, en; q=0.7, he; q=0.3
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/42.0.2311.135 Safari/537.36 Edge/12.10240

@font-face {
  (...)
  src: (...)
}
(... Same for bold etc.)

FireFox:

GET /css?family=Alef:400,700 HTTP/1.1
Accept: text/css,*/*;q=0.1
Accept-Language: he,he-IL;q=0.8,en-US;q=0.5,en;q=0.3
Accept-Encoding: gzip, deflate
User-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64; rv:40.0) Gecko/20100101 Firefox/40.0

(same response like Edge)
googlefontslanguage
1
Jonathan

Le problème pourrait être à plusieurs endroits:

  1. votre police n'est pas correctement implémentée. Comme vous l'avez implémenté, seuls les caractères latins doivent être implémentés. Pour afficher aussi le jeu de caractères hébreux. La police doit être implémentée avec <link href='https://fonts.googleapis.com/css?family=Alef&subset=latin,hebrew' rel='stylesheet' type='text/css' >

  2. tandis que la police de Google est implémentée avec http. Firefox et d'autres pourraient empêcher le chargement de contenu avec un problème de sécurité intersite. Pour éviter cette utilisation dans votre htaccess:

    <FilesMatch "\.(ttf|woff|woff2|otf|eot)$"> <IfModule mod_headers.c> Header set Access-Control-Allow-Origin "*" </IfModule> </FilesMatch>

  3. Un autre problème lié à Firefox pourrait être le manque de font-face dans votre CSS. Pour éviter cela, utilisez la règle suivante dans votre CSS: <style> @font-face { font-family: 'Alef Hebrew'; font-style: normal; font-weight: 400; src: url(//fonts.gstatic.com/ea/alefhebrew/v4/Alef-Regular.eot); src: url(//fonts.gstatic.com/ea/alefhebrew/v4/Alef-Regular.eot?#iefix) format('embedded-opentype'), url(//fonts.gstatic.com/ea/alefhebrew/v4/Alef-Regular.woff2) format('woff2'), url(//fonts.gstatic.com/ea/alefhebrew/v4/Alef-Regular.woff) format('woff'), url(//fonts.gstatic.com/ea/alefhebrew/v4/Alef-Regular.ttf) format('truetype'); } @font-face { font-family: 'Alef Hebrew'; font-style: normal; font-weight: 700; src: url(//fonts.gstatic.com/ea/alefhebrew/v4/Alef-Bold.eot); src: url(//fonts.gstatic.com/ea/alefhebrew/v4/Alef-Bold.eot?#iefix) format('embedded-opentype'), url(//fonts.gstatic.com/ea/alefhebrew/v4/Alef-Bold.woff2) format('woff2'), url(//fonts.gstatic.com/ea/alefhebrew/v4/Alef-Bold.woff) format('woff'), url(//fonts.gstatic.com/ea/alefhebrew/v4/Alef-Bold.ttf) format('truetype'); } </style>

1
Evgeniy