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)