2

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?

hippietrail
  • 15,848
  • 18
  • 99
  • 158
  • 1
    The question would be much more understandable if you showed an example of what you are trying to do and shared your experiences with it on different browsers. – Jukka K. Korpela Feb 04 '15 at 18:19
  • Yes I haven't got so far yet, and the strange language might throw people off but let me give it a shot ... – hippietrail Feb 04 '15 at 18:22
  • 1
    Did you ever find a good answer for this? I'm in the same boat now. The non-latin characters are too small. The range is there, but can't set a font size based on it. – VirtualLife Dec 17 '20 at 18:13
  • @VirtualLife: I can't actually remember. My comments on the answers make it sound like I didn't find a real solution but might've found a partial solution. Good luck! – hippietrail Dec 17 '20 at 19:11

2 Answers2

6

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

Paulie_D
  • 107,962
  • 13
  • 142
  • 161
  • Without checking it **should** override too but you would have to test – Paulie_D Feb 04 '15 at 17:23
  • Not having any luck yet, but what do each of the two fonts `Ampersand` and `Times New Roman` refer to? Is one the font that would render and the other that I'm telling it to render instead for that range? – hippietrail Feb 04 '15 at 17:31
  • 1
    Check out the Article..you have to 'name' your range (in this case we make up a new `font-family` of `Ampersand`) for usage purposes and the `Times New Roman` is the substitute font you want to use for that range. – Paulie_D Feb 04 '15 at 17:33
  • I'm combining parts of your answer and Jon Holland's and adding specific classes to the stylish CSS as I find parts that are not corrected by the global styling. Seems to be the closest I can get. – hippietrail Feb 04 '15 at 17:59
1

unicode-range(s) can be used to specify which specific set (or range) of characters you want to be downloaded from a font in an attempt to save bandwidth. See here: Mozilla unicode-range info

Without seeing the actual CSS you could attempt to just force a different font to be used completely by doing something such as declaring 

body{font-family: arial,sans-serif;}

or adding !important (which I would avoid under any normal circumstance) if the other fonts refuse to give way e.g.

body{font-family: arial,sans-serif !important;}

If you can bypass using the original font faces then the unicode-ranges will cease to be important. Watch out for things like icon-fonts though as removing those may make certain symbols/graphics disappear.

Hope that helps.

Sorry I rather misunderstood your question - thought you wanted rid of the existing unicode fonts altogether.

Jon Holland
  • 391
  • 7
  • 19
  • I'm combining parts of your answer and Paulie_D's and adding specific classes to the stylish CSS as I find parts that are not corrected by the global styling. Seems to be the closest I can get. – hippietrail Feb 04 '15 at 17:59
  • I know this is rather far on but I was recently tasked with solving a rogue character problem on a copy of a site where they were showing in one location and not at another. The problems on the wonky site were caused by the httpd settings on the server set to force a specific charset on all output. Looks for http.conf and the AddDefaultCharset setting. Just one more thing to watch out for. – Jon Holland Apr 20 '15 at 08:50