Can I use CSS "unicode-range" to specify a font across an entire (third party) page?

css unicode font-face stylish southeast-asian-languages
hippietrail picture hippietrail · Feb 4, 2015 · Viewed 8.2k times · Source

I've never become fluent with CSS but I don't think I had this situation before.

I'm thinking of using stylish to add CSS to a third-party site over which I have no direct control. So the HTML and CSS is not really set up for the kind of customizations I want to do.

The site I wish to tweak doesn't allow good control over fonts but some of its pages (user created) make a lot of use of some exotic Unicode ranges (eg. Khmer) that my OS/browser combination choose a terrible font for:

two muppets

Can I make a CSS rule that will apply to all text in a page that falls within a certain Unicode range to set it to a known good font, without delving into the structure of the page HTML/DOM?

(Or is unicode-range only for doing something different with webfonts?

Answer

Paulie_D picture Paulie_D · Feb 4, 2015

The answer is yes in most browsers

MDN - Unicode Range

The unicode-range CSS descriptor sets the specific range of characters to be downloaded from a font defined by @font-face and made available for use on the current page.

Example:

@font-face {
  font-family: 'Ampersand';
  src: local('Times New Roman');
  unicode-range: U+26;
}

Support: CanIUse.com

Also see this Article

Related questions

Placing Unicode character in CSS content value

I have a problem. I have found the HTML code for the downwards arrow, ↓ (↓) Cool. Now I need to use it in CSS like so: nav a:hover {content:"&darr";} That obviously won't work since ↓ …

Read More
Font Awesome & Unicode

I'm using (the excellent) Font-Awesome in my site, and it's working fine, if I use it this way: <i class="icon-home"></i> But (for some reasons) I want to use it in the Unicode way, like: &…

Read More
CSS: how to add white space before element's content?

None of the following code works : p:before { content: " "; } p:before { content: "&nbsp;"; } How do I add white space before element's content ? Note: I need to color the border-left and the margin-left for semantic use and use the space …

Read More