cssunicodefont-facestylishsoutheast-asian-languages

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


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?


Solution

  • 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