Google Noto Fonts

Guidelines for Using Noto

Where to use

  • UI: UI for websites or applications, as recommended in Google’s Material Design.
  • Printing materials: brochure, poster, business card, letter paper, envelope.
  • Text in video: caption, subtitle, etc.
  • Landmarks and billboards: billboards at center of city or train station, landmarks.

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;