CSS Snippet - A Language Specific font-family Rule That Does Not Suck!

Posted at



Put this code at the top of your CSS file, just after the "zero/clear/init" part.


html,input,textarea{ font-family: 'Noto Sans', 'Roboto', sans-serif; }
pre,code,kbd{ font-family: 'Noto Mono', 'Roboto Mono', 'Courier New', monospace; }


And go through your other styles and try to reduce the amount of repeating rules,
for example, change 'font' to 'font-size' since we've already defined the 'font-family' ;]



Handling dual Hebrew/English content:

html,input,textarea{ font-family: 'Noto Sans', 'Roboto', sans-serif; }

:lang(he),:lang(he-IL)
,[lang^="hebrew"],[lang^="Hebrew"]
,[language^="hebrew"],[language^="Hebrew"]
,:lang(he-iw),[lang^="iw"],[lang^="IW"] /*old Hebrew definition was 'iw' instead of 'he' (still IS in 'IE'<9)*/
{ /*when the content is unambiguously-specified to Hebrew, *respect it*, and prefer a variation of Hebrew-font first (but still including the default ones.. later...) */
font-family: 'Noto Sans Hebrew', 'Open Sans Hebrew', 'Tahoma', 'Adobe Hebrew', 'Alef', 'Noto Sans', 'Roboto', sans-serif; }
}

pre,code,kbd{ font-family: 'Noto Mono', 'Roboto Mono', 'Courier New', monospace; }


The addition, added above, specify the 'preferred' order to be used (with fallback).

Note that Note Sans has the glyphs for Hebrew-letters, but browsers handles language-relation to fonts differently from operation-systems, so while your Windows7 wont be picky and if you'll set the Note Sans as the global-default font (for example) and will show you file-names containing Hebrew with no particular issue, Chrome will *quirk up* and use the the default system font-family unless you've specified it ahead using a CSS-rule,
which usually means David, Times New Roman or other known font-families will be used.

The code-above will prioritise the use of the Hebrew variation of some known fonts such as Noto Sans, which will *absolutely* help the identification-engine to handle multiple languages, while still keeping a decent unified design and readability.

This mechanisem can be automatise using Advanced Font Settings but I do not recommend using it because it is quite cr^ppy and will load a lot of junk Javascript into every page you'll browse!



the problem with the above code, is that mix-language-sentences where you have English and Hebrew content are, still, shown using the Noto font for English and the 'David' font-family (default on my PC) for the Hebrew content.

Cleaning up and slightly modifying the CSS code, will solve it:

html,input,textarea{ font-family: 'Noto Sans Hebrew', 'Noto Sans', 'Roboto', sans-serif; } /* English or Hebrew/English mixed-content. */
:lang(he) , :lang(he-IL) , :lang(iw) /* When browser identify a Hebrew-only content. */
,[lang^="he"] , [lang^="He"] , [lang^="iw"]
,[language^="he"] , [language^="He"] , [language^="iw"]{
font-family: 'Noto Sans Hebrew', 'Open Sans Hebrew', 'Adobe Hebrew', 'Tahoma', 'Alef', 'Noto Sans', 'Roboto', sans-serif; }
pre,code,kbd{ font-family: 'Courier New', 'Noto Mono', monospace; }


In this case the Hebrew content will always be shown using the provided glyphs found in the font-file, and the fallback will use if any of the letter-glyphs are missing, granted, not a perfect solution,
and Noto has so many variations:
Noto Sans Armenian
Noto Sans Avestan
Noto Sans Balinese
Noto Sans Bamum
Noto Sans Batak
Noto Sans Bengali
Noto Sans Brahmi
Noto Sans Buginese
Noto Sans Buhid
Noto Sans Canadian Aboriginal
Noto Sans Carian
Noto Sans Cham
Noto Sans Cherokee
Noto Sans CJK JP
Noto Sans CJK KR
Noto Sans CJK SC
Noto Sans CJK TC
Noto Sans Coptic
Noto Sans Cuneiform
Noto Sans Cypriot
Noto Sans Deseret
Noto Sans Devanagari
Noto Sans Egyptian Hieroglyphs
Noto Sans Ethiopic
Noto Sans Georgian
Noto Sans Glagolitic
Noto Sans Gothic
Noto Sans Gujarati
Noto Sans Gurmukhi
Noto Sans Hanunoo
Noto Sans Hebrew
Noto Sans Imperial Aramaic
Noto Sans Inscriptional Pahlavi
Noto Sans Inscriptional Parthian
Noto Sans Javanese
Noto Sans JP
Noto Sans Kaithi
Noto Sans Kannada
Noto Sans Kayah Li
Noto Sans Kharoshthi
Noto Sans Khmer
Noto Sans KR
Noto Sans Lao
Noto Sans Lepcha
Noto Sans Limbu
Noto Sans Linear B
Noto Sans Lisu
Noto Sans Lycian
Noto Sans Lydian
Noto Sans Malayalam
Noto Sans Mandaic
Noto Sans Meetei Mayek
Noto Sans Mongolian
Noto Sans Myanmar
Noto Sans New Tai Lue
Noto Sans NKo
Noto Sans Ogham
Noto Sans Ol Chiki
Noto Sans Old
Noto Sans Old Persian
Noto Sans Old South Arabian
Noto Sans Old Turkic
Noto Sans Oriya
Noto Sans Osmanya
Noto Sans Phags Pa
Noto Sans Phoenician
Noto Sans Rejang
Noto Sans Runic
Noto Sans Samaritan
Noto Sans Saurashtra
Noto Sans SC
Noto Sans Shavian
Noto Sans Sinhala
Noto Sans Sundanese
Noto Sans Syloti Nagri
Noto Sans Symbols
Noto Sans Syriac Eastern
Noto Sans Syriac Estrangela
Noto Sans Syriac Western
Noto Sans Tagalog
Noto Sans Tagbanwa
Noto Sans Tai Le
Noto Sans Tai Tham
Noto Sans Tai Viet
Noto Sans Tamil
Noto Sans TC
Noto Sans Telugu
Noto Sans Thaana
Noto Sans Thai
Noto Sans Tibetan
Noto Sans Tifinagh
Noto Sans Ugaritic
Noto Sans Vai
Noto Sans Yi


So by this logic you'll have to put all those variation in-front of the actual 'Noto Sans', to have a truly multilingual mixed languages maybe you'll need to have something like this:
html,input,textarea{
  font-family: 'Noto Sans Armenian', 'Noto Sans Avestan', 'Noto Sans Balinese', 'Noto Sans Bamum', 'Noto Sans Batak', 'Noto Sans Bengali', 'Noto Sans Brahmi', 'Noto Sans Buginese', 'Noto Sans Buhid', 'Noto Sans Canadian Aboriginal', 'Noto Sans Carian', 'Noto Sans Cham', 'Noto Sans Cherokee', 'Noto Sans CJK JP', 'Noto Sans CJK KR', 'Noto Sans CJK SC', 'Noto Sans CJK TC', 'Noto Sans Coptic', 'Noto Sans Cuneiform', 'Noto Sans Cypriot', 'Noto Sans Deseret', 'Noto Sans Devanagari', 'Noto Sans Egyptian Hieroglyphs', 'Noto Sans Ethiopic', 'Noto Sans Georgian', 'Noto Sans Glagolitic', 'Noto Sans Gothic', 'Noto Sans Gujarati', 'Noto Sans Gurmukhi', 'Noto Sans Hanunoo', 'Noto Sans Hebrew', 'Noto Sans Imperial Aramaic', 'Noto Sans Inscriptional Pahlavi', 'Noto Sans Inscriptional Parthian', 'Noto Sans Javanese', 'Noto Sans JP', 'Noto Sans Kaithi', 'Noto Sans Kannada', 'Noto Sans Kayah Li', 'Noto Sans Kharoshthi', 'Noto Sans Khmer', 'Noto Sans KR', 'Noto Sans Lao', 'Noto Sans Lepcha', 'Noto Sans Limbu', 'Noto Sans Linear B', 'Noto Sans Lisu', 'Noto Sans Lycian', 'Noto Sans Lydian', 'Noto Sans Malayalam', 'Noto Sans Mandaic', 'Noto Sans Meetei Mayek', 'Noto Sans Mongolian', 'Noto Sans Myanmar', 'Noto Sans New Tai Lue', 'Noto Sans NKo', 'Noto Sans Ogham', 'Noto Sans Ol Chiki', 'Noto Sans Old', 'Noto Sans Old Persian', 'Noto Sans Old South Arabian', 'Noto Sans Old Turkic', 'Noto Sans Oriya', 'Noto Sans Osmanya', 'Noto Sans Phags Pa', 'Noto Sans Phoenician', 'Noto Sans Rejang', 'Noto Sans Runic', 'Noto Sans Samaritan', 'Noto Sans Saurashtra', 'Noto Sans SC', 'Noto Sans Shavian', 'Noto Sans Sinhala', 'Noto Sans Sundanese', 'Noto Sans Syloti Nagri', 'Noto Sans Symbols', 'Noto Sans Syriac Eastern', 'Noto Sans Syriac Estrangela', 'Noto Sans Syriac Western', 'Noto Sans Tagalog', 'Noto Sans Tagbanwa', 'Noto Sans Tai Le', 'Noto Sans Tai Tham', 'Noto Sans Tai Viet', 'Noto Sans Tamil', 'Noto Sans TC', 'Noto Sans Telugu', 'Noto Sans Thaana', 'Noto Sans Thai', 'Noto Sans Tibetan', 'Noto Sans Tifinagh', 'Noto Sans Ugaritic', 'Noto Sans Vai', 'Noto Sans Yi', 'Noto Sans , sans-serif;
}  


naturally I won't recommend it (other than to satisfy your inner-experimentalist-developer),
so this will probably suite you better:
html,input,textarea{ font-family:  'Noto Sans Hebrew', 'Noto Sans', 'Roboto', sans-serif;  }
pre,code,kbd{        font-family: 'Courier New', 'Noto Mono', monospace;                   }


or this:
(optionally unmark the Hebrew-only part if you want to be very specific/correct display in old browsers)
html,input,textarea{  font-family:  'Noto Sans Hebrew', 'Noto Sans', 'Roboto', sans-serif;  }  /* English or Hebrew/English mixed-content.      */
pre,code,kbd{         font-family:  'Courier New', 'Noto Mono', monospace;                  }
/* Hebrew-only content. *//*
:lang(he),:lang(he-IL),:lang(iw),[lang^="he"],[lang^="He"],[lang^="iw"],[language^="he"],[language^="He"],[language^="iw"]{
                      font-family:  'Noto Sans Hebrew', 'Open Sans Hebrew', 'Adobe Hebrew', 'Tahoma', 'Alef', 'Noto Sans', 'Roboto', sans-serif;
}
*/                                           

if you have any other mixed-content that isn't displayed correctly (Arabic, Russian, ...) just add its variation to the list, in-front of 'Noto Sans' one, and you should be fine.. :]