Google has been developing a font family called Noto, which aims to support all languages with a harmonious look and feel. Noto is Google’s answer to tofu. The name noto is to convey the idea that Google’s goal is to see “no more tofu”.
Noto has multiple styles and weights, and is freely available to all. The comprehensive set of fonts and tools are available in Googles GitHub repositories.
[googlead90][/googlead90]
How to use
- For local use on your computer: download the fonts
-
For use in a native app: bundle the fonts with your app
-
For use in web content: it is very important to use the fonts as web fonts. When a font is only specified in CSS font-family but not really delivered to the client as a web font, the browser will automatically fall back to another font. Some Noto fonts are available at Google Web Fonts Early Access. However, sometimes, it doesn’t serve the latest version of Noto or provides a subset of a font. In addition, be aware that the web latency for large fonts, such as for Noto Sans CJK, can be large.
Tips of using Noto fonts in the CSS font-family property
-
Put fonts for the languages/scripts you care about most at the very beginning
-
Do not include fonts for the languages/scripts you do not care about to reduce web latency.
-
It is recommended to retain "Noto Sans" in the list. Other Noto fonts usually do not cover Latin letters, digits or punctuation.
-
Put "Noto Sans" before "Noto Sans CJK". Currently, the Latin characters in the CJK fonts are from Adobe’s Source Sans Pro
-
It is recommended to use "Noto Sans CJK {JP, KR, SC, TC}" rather than "Noto Sans {JP, KR, SC, TC}", unless space/latency is very restricted. Each of the font families "Noto Sans CJK {JP, KR, SC, TC}" supports all four languages, but has a different default language.Learn more about Noto CJK
Examples
For a Japanese Website
font-family: "Noto Sans", "Noto Sans CJK JP", sans-serif;
For a website targeting Hindi, and then Tamil users
font-family: "Noto Sans Devanagari", "Noto Sans Tamil", "Noto Sans", sans-serif;
For an Arabic website that needs to use an UI font for UI elements, such as buttons and tabs, that have more strict vertical space:
font-family: "Noto Naskh Arabic UI", "Noto Sans UI", sans-serif;
For a website targeting Armenian and Georgian users who prefer serif style:
font-family: "Noto Serif Armenian", "Noto Serif Georgian", "Noto Serif", serif;
