Google fonts Hebrew works only in Chrome

Question

I want to use a Hebrew font from Google font. So I included the font:

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

An styled my elements:

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

This works, but only in Google Chrome. In all other tested browsers (IE11, Edge, FireFox, iOS Safari, Android Chrome) the element is still rendered with the default font.

Looking into it, seems that fonts.googleapis.com returns different responses, probably due to different request headers. Here's what I see (identical headers not shown):

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)

Answer 1

The problem could be on many places:

1. your font isn't correctly implemented. Like you implemented it, there should be only latin characters implemented. To show Hebrew character set too. The font should be implemented with <link href='https://fonts.googleapis.com/css?family=Alef&subset=latin,hebrew' rel='stylesheet' type='text/css' >

2. while Google font is implemented with http. Firefox and other could prevent loading of content with cross-site-security issue. To avoid this use in your htaccess:

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

3. Another Firefox-related problem could be the missing of font-face in your CSS. To avoid it use following rule in your 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>