CODEWITHSUNDEEP
cssbrowserfonts
hans-t
hans-t

Reputation: 3233

CSS Font Fallback for Missing Glyphs

CSS:

p { 
font-family: Gill Sans, SFU GillSans;
}

"SFU GillSans" is a font for Vietnamese language. According to this link, if p contains a Vietnamese character that is not in Gill Sans font, then the browser will look for it in "SFU GillSans" font.

Is it possible to switch to second font entirely, not only some characters, if the default font misses any character?

Upvotes: 6

Views: 4608

Answers (3)

Mihai
Mihai

Reputation: 468

Yes, we can! If you know beforehand the unsupported glyphs/ranges you can use unicode-range. My answer is shamefully copied from this answer. If it helps you feel free to vote that answer up.

Yes you can, using something called unicode-range It works in all modern web browsers: https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face

BTW, more info about this from http://24ways.org/2011/unicode-range

Live example: http://jsfiddle.net/jfcox/3LQyr/

<style>
@font-face {
    font-family: Foobar;
    src: local('Times New Roman');
    unicode-range: U+61-6E;
}
@font-face {
    font-family: Foobar;
    src: local('Arial');
    unicode-range: U+6F-7A;
}
body{
  font-family:Foobar;
}
</style>
<p>abcdefghijklmnopqrstuvwxyz</p>​

Upvotes: 3

Blaise
Blaise

Reputation: 13489

With pure HTML/CSS: no you cannot do that.

But what you can do is determine which glyphs are being used in a string, compare that to the glyphs being available in a font, and conditionally set a different font for a section or entire page using a CSS class.

Determining which glyphs are used in a string can be done on-the-fly using JavaScript, or using any server-side language.

Update: I added an example below especially for Vietnamese.

The name and contents of VIETNAMESE_DIACRITIC_CHARACTERS and containsVietnamese can easily be changed to match (un)supported character ranges in your fallback or main font. (whitelist or blacklist approach).

// From http://stackoverflow.com/a/26547315/451480:
var VIETNAMESE_DIACRITIC_CHARACTERS = 'ẮẰẲẴẶĂẤẦẨẪẬÂÁÀÃẢẠĐẾỀỂỄỆÊÉÈẺẼẸÍÌỈĨỊỐỒỔỖỘÔỚỜỞỠỢƠÓÒÕỎỌỨỪỬỮỰƯÚÙỦŨỤÝỲỶỸỴ';

var paragraphs = document.querySelectorAll('p');

for (var i = 0, m = paragraphs.length; i < 1; i++) {
  if (containsVietnamese(paragraphs[i])) {
    paragraphs[i].className = 'vietnamese';
  }
}

function containsVietnamese(paragraph) {
  var text = paragraph.innerText || paragraph.textContent;
  for (var i = 0, m = text.length; i < m; i++) {
    // Return true if VIETNAMESE_DIACRITIC_CHARACTERS contains the uppercase character from the paragraph
    if (VIETNAMESE_DIACRITIC_CHARACTERS.indexOf(text[i].toUpperCase()) > -1) {
      return true;
    }
  }
}
p {
  border: 1px solid #ddd;
  font-family: myregularfont, sans-serif;
}
.vietnamese {
  font-family: myvietnamesefont, serif;
  background: green;
}
<p>This paragraph should switch to a serif font: bằng "level, flat" ngang and huyền trắc "oblique, sharp" sắc, hỏi, ngã, and nặng</p>
<p>Chinese (汉语 / 漢語; Hànyǔ or 中文; Zhōngwén) is a group of related but in many cases mutually unintelligible language varieties.</p>
<p>English is a West Germanic language that was first spoken in early medieval England and is now a global lingua franca.</p>

Upvotes: 6

Mike &#39;Pomax&#39; Kamermans
Mike &#39;Pomax&#39; Kamermans

Reputation: 53666

Short answer: no. That's not what CSS can do.

Fallback fonts really do mean fallback, not "font switching on some signal". Fallback is only defined in terms of "if glyph X is not in font A, try font B (if specified), then C, then ... until we find a generic font-family, or nothing, in which case, use the parent element's font".

If that's what you SFU GillSans used for all text that has even a single vietnamese character in it, why not just use a font that looks good and has Latin-A through Latin-D support? You could, for instance, just use SFU GillSans as your main font, not as fallback font. On a CSS note: you need to put quotes around those names. Font-family values with special characters like dashes or spaces need to be quoted as per the CSS spec.

Upvotes: 1

Related Questions