2

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)

1 Answer 1

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>

5
  • 2
    Adding &subset=latin,hebrew did the trick. To avoid http vs. https, I also made the link like this: <link href='//fonts.googleapis.com/css?family=Alef&subset=latin,hebrew' ...>
    – Jonathan
    Oct 14, 2015 at 18:24
  • absolutely correct. and try to switch all your linkings to the protocol-relative schema - like you did it with //fonts.: it helps to bundle links and social signals in cases, if people link to your with different (and not currently used) protocols. i.e. you use the whole site in https, people link to you with http. if you use protocol-relative, you help Google to avoid spreading
    – Evgeniy
    Oct 15, 2015 at 7:25
  • Thanks. I even try to keep my local locals domain-relate: /path/file.html, but WordPress likes to add the full URI - which is why for my test site I had to use Better Search Replace
    – Jonathan
    Oct 15, 2015 at 7:41
  • i wouldn't recommend to use relative links - it could cause crawling issues. But protocol-relative is fully OK, and you can update all your links with this one: wordpress.org/plugins/velvet-blues-update-urls
    – Evgeniy
    Oct 15, 2015 at 7:53
  • Same issue, &subset=latin,hebrew solved it
    – ilyo
    Jan 14, 2016 at 15:16

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.