CODEWITHSUNDEEP
cssunicode
Houy Narun
Houy Narun

Reputation: 1725

How to apply font-face only to a certain range of Unicode characters

A string queried from database look like this អាស័យដ្ឋានបច្ចុប្បន្ន 123, Street: National Road 3, ភូមិ ១, អូរឫស្សីទី ២, ៧មករា, ភ្នំពេញ តទៅនេះហៅថាភាគី«ក»។

I used font face font-family: 'Battambang', cursive;. The ASCII characters look good using that font, but the other characters inside the string look a bit cumbersome.

Rendering on browser, it looks like this:

View on Browser

If I remove font-face the non-Unicode characters look good, but the Unicode characters don’t.

Removing font-face

Therefore, is there any CSS trick I can use to apply the font only to certain Unicode characters but not to others?

Upvotes: 6

Views: 2761

Answers (1)

Ry-
Ry-

Reputation: 224857

Since the Battambang typeface doesn’t contain those characters, they’re falling back to what you specified: cursive. Use the one that would normally be inherited instead.

font-family: Battambang, Roboto; /* or whatever it would be normally */

For typefaces that do contain characters you want excluded, you’ll also need to specify a unicode-range:

@font-face {
    src: /* … */;
    font-family: Battambang;
    unicode-range: U+1780-17FF, U+200B-200C, U+25CC;
}

Upvotes: 8

Related Questions