0

In my website, posts occasionally contain characters from a second language (Urdu), which the google web-font set by my theme, of course does not recognize and resorts to a fallback font. I was wondering if there might be a way to override the fallback font for unrecognized characters to one of my liking(that supports Arabic/Urdu script) such as the google early access Noto fonts which include arabic and urdu fonts. Would this work as I understand it should? will any characters in Arabic/Urdu script be rendered with the specified font by doing so? I would love to know how one could implement/ enqueue necessary files in a WordPress theme. Any thoughts would be greatly appreciated.

Thanking you very much for your time, Sameer

excerpt from post with arabic characters:

ALL MEMBERS, السلام عليكم With the arrival of summer, the Swimming Pool & Gymnasium activities shall commence from Saturday the 1st of APRIL 2017.

Improve this question

1 Answer 1

Reset to default
1

I think the only solution is unicode-range in your @font-face (https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/unicode-range). Unfortunately you've to note every single character (or a range) you would like to display via the font in your basic @font-face.

After that you can enqueue another webfont with the missing chars and make it available:

font-family: 'font without arabic chars', 'font with arabic chars', sans-serif

Of course there are a few browser issues in older browsers: http://caniuse.com/#search=unicode-range

Improve this answer
7
  • @SameerAli any news on your issue?
    – s t
    Commented Apr 20, 2017 at 19:47
  • my sincere apologies for the late response, regrettably time and commitments would not permit to follow up till now, I was hoping to follow your example thoroughly and post back, I am new to web development and things are taking longer than i hoped, I am attempting your solution and will post back asap on the results. many thanks for your help, it is very much appreciated.
    – Samwyzz
    Commented Apr 24, 2017 at 11:56
  • I was wondering what is the reason for the @ font-face rule and unicode range, I followed your instructions by enqueueing the arabic font in the themes functions.php, and simply addding the css .entry-content{font-family:Noto Sans, cairo !important;} (cairo is the arabic font) This seems to be working without specifying unicode characters. wherever there are arabic/urdu characters are being rendered with the cairo font. I was wondering what are the advantages of using the @ font-face rule.
    – Samwyzz
    Commented Apr 24, 2017 at 14:25
  • you’re totally right. of course you can do it without unicode-range. you can use unicode-range in case you want exclude parts or single chars of each font which you load via @font-face. Especially in your case – when you want to exclude the arabic range from Noto Sans and fallback to cairo you can do it with unicode-range. Noto should include a comprehensive range of languages as you can see in their project website: google.com/get/noto you need to make your webfonts available in your stylesheet via @font-face like in this example jsfiddle.net/h906qu6v
    – s t
    Commented Apr 25, 2017 at 17:41
  • so by setting a unicode range only the characters I specify will use the fallback font? so does this mean that the entire font is not downloaded to the client machine and only the characters specified ? does enqueueing a font download the entire font regardless whether it is used or not? I guess my question is does this technique save bandwidth/page load time in any way?
    – Samwyzz
    Commented Apr 26, 2017 at 10:40

Your Answer

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

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