I use Noto all over the place. I found I was repeating the same conversion + import process on every site. So, I built this project as a way for me to import Noto quickly.
Import the stylesheets of the variants you want into your project:
There are quite a few...
@import 'https://use-noto.assertchris.io/stylesheets/noto-sans-100.css';@import 'https://use-noto.assertchris.io/stylesheets/noto-sans-100-italic.css';@import 'https://use-noto.assertchris.io/stylesheets/noto-sans-200.css';@import 'https://use-noto.assertchris.io/stylesheets/noto-sans-200-italic.css';@import 'https://use-noto.assertchris.io/stylesheets/noto-sans-300.css';@import 'https://use-noto.assertchris.io/stylesheets/noto-sans-300-italic.css';@import 'https://use-noto.assertchris.io/stylesheets/noto-sans-400.css';@import 'https://use-noto.assertchris.io/stylesheets/noto-sans-400-italic.css';@import 'https://use-noto.assertchris.io/stylesheets/noto-sans-500.css';@import 'https://use-noto.assertchris.io/stylesheets/noto-sans-500-italic.css';@import 'https://use-noto.assertchris.io/stylesheets/noto-sans-600.css';@import 'https://use-noto.assertchris.io/stylesheets/noto-sans-600-italic.css';@import 'https://use-noto.assertchris.io/stylesheets/noto-sans-700.css';@import 'https://use-noto.assertchris.io/stylesheets/noto-sans-700-italic.css';@import 'https://use-noto.assertchris.io/stylesheets/noto-sans-800.css';@import 'https://use-noto.assertchris.io/stylesheets/noto-sans-800-italic.css';@import 'https://use-noto.assertchris.io/stylesheets/noto-sans-900.css';@import 'https://use-noto.assertchris.io/stylesheets/noto-sans-900-italic.css';@import 'https://use-noto.assertchris.io/stylesheets/noto-sans-greek-100.css';@import 'https://use-noto.assertchris.io/stylesheets/noto-sans-greek-200.css';@import 'https://use-noto.assertchris.io/stylesheets/noto-sans-greek-300.css';@import 'https://use-noto.assertchris.io/stylesheets/noto-sans-greek-400.css';@import 'https://use-noto.assertchris.io/stylesheets/noto-sans-greek-500.css';@import 'https://use-noto.assertchris.io/stylesheets/noto-sans-greek-600.css';@import 'https://use-noto.assertchris.io/stylesheets/noto-sans-greek-700.css';@import 'https://use-noto.assertchris.io/stylesheets/noto-sans-greek-800.css';@import 'https://use-noto.assertchris.io/stylesheets/noto-sans-greek-900.css';@import 'https://use-noto.assertchris.io/stylesheets/noto-sans-hebrew-100.css';@import 'https://use-noto.assertchris.io/stylesheets/noto-sans-hebrew-200.css';@import 'https://use-noto.assertchris.io/stylesheets/noto-sans-hebrew-300.css';@import 'https://use-noto.assertchris.io/stylesheets/noto-sans-hebrew-400.css';@import 'https://use-noto.assertchris.io/stylesheets/noto-sans-hebrew-500.css';@import 'https://use-noto.assertchris.io/stylesheets/noto-sans-hebrew-600.css';@import 'https://use-noto.assertchris.io/stylesheets/noto-sans-hebrew-700.css';@import 'https://use-noto.assertchris.io/stylesheets/noto-sans-hebrew-800.css';@import 'https://use-noto.assertchris.io/stylesheets/noto-sans-hebrew-900.css';@import 'https://use-noto.assertchris.io/stylesheets/noto-sans-mono-100.css';@import 'https://use-noto.assertchris.io/stylesheets/noto-sans-mono-200.css';@import 'https://use-noto.assertchris.io/stylesheets/noto-sans-mono-300.css';@import 'https://use-noto.assertchris.io/stylesheets/noto-sans-mono-400.css';@import 'https://use-noto.assertchris.io/stylesheets/noto-sans-mono-500.css';@import 'https://use-noto.assertchris.io/stylesheets/noto-sans-mono-600.css';@import 'https://use-noto.assertchris.io/stylesheets/noto-sans-mono-700.css';@import 'https://use-noto.assertchris.io/stylesheets/noto-sans-mono-800.css';@import 'https://use-noto.assertchris.io/stylesheets/noto-sans-mono-900.css';@import 'https://use-noto.assertchris.io/stylesheets/noto-serif-100.css';@import 'https://use-noto.assertchris.io/stylesheets/noto-serif-100-italic.css';@import 'https://use-noto.assertchris.io/stylesheets/noto-serif-200.css';@import 'https://use-noto.assertchris.io/stylesheets/noto-serif-200-italic.css';@import 'https://use-noto.assertchris.io/stylesheets/noto-serif-300.css';@import 'https://use-noto.assertchris.io/stylesheets/noto-serif-300-italic.css';@import 'https://use-noto.assertchris.io/stylesheets/noto-serif-400.css';@import 'https://use-noto.assertchris.io/stylesheets/noto-serif-400-italic.css';@import 'https://use-noto.assertchris.io/stylesheets/noto-serif-500.css';@import 'https://use-noto.assertchris.io/stylesheets/noto-serif-500-italic.css';@import 'https://use-noto.assertchris.io/stylesheets/noto-serif-600.css';@import 'https://use-noto.assertchris.io/stylesheets/noto-serif-600-italic.css';@import 'https://use-noto.assertchris.io/stylesheets/noto-serif-700.css';@import 'https://use-noto.assertchris.io/stylesheets/noto-serif-700-italic.css';@import 'https://use-noto.assertchris.io/stylesheets/noto-serif-800.css';@import 'https://use-noto.assertchris.io/stylesheets/noto-serif-800-italic.css';@import 'https://use-noto.assertchris.io/stylesheets/noto-serif-900.css';@import 'https://use-noto.assertchris.io/stylesheets/noto-serif-900-italic.css';@import 'https://use-noto.assertchris.io/stylesheets/noto-serif-greek-100.css';@import 'https://use-noto.assertchris.io/stylesheets/noto-serif-greek-200.css';@import 'https://use-noto.assertchris.io/stylesheets/noto-serif-greek-300.css';@import 'https://use-noto.assertchris.io/stylesheets/noto-serif-greek-400.css';@import 'https://use-noto.assertchris.io/stylesheets/noto-serif-greek-500.css';@import 'https://use-noto.assertchris.io/stylesheets/noto-serif-greek-600.css';@import 'https://use-noto.assertchris.io/stylesheets/noto-serif-greek-700.css';@import 'https://use-noto.assertchris.io/stylesheets/noto-serif-greek-800.css';@import 'https://use-noto.assertchris.io/stylesheets/noto-serif-greek-900.css';@import 'https://use-noto.assertchris.io/stylesheets/noto-serif-hebrew-100.css';@import 'https://use-noto.assertchris.io/stylesheets/noto-serif-hebrew-200.css';@import 'https://use-noto.assertchris.io/stylesheets/noto-serif-hebrew-300.css';@import 'https://use-noto.assertchris.io/stylesheets/noto-serif-hebrew-400.css';@import 'https://use-noto.assertchris.io/stylesheets/noto-serif-hebrew-500.css';@import 'https://use-noto.assertchris.io/stylesheets/noto-serif-hebrew-600.css';@import 'https://use-noto.assertchris.io/stylesheets/noto-serif-hebrew-700.css';@import 'https://use-noto.assertchris.io/stylesheets/noto-serif-hebrew-800.css';@import 'https://use-noto.assertchris.io/stylesheets/noto-serif-hebrew-900.css';
...or you can import everything per family:
@import 'https://use-noto.assertchris.io/stylesheets/noto-sans.css';@import 'https://use-noto.assertchris.io/stylesheets/noto-sans-greek.css';@import 'https://use-noto.assertchris.io/stylesheets/noto-sans-hebrew.css';@import 'https://use-noto.assertchris.io/stylesheets/noto-sans-mono.css';@import 'https://use-noto.assertchris.io/stylesheets/noto-serif.css';@import 'https://use-noto.assertchris.io/stylesheets/noto-serif-greek.css';@import 'https://use-noto.assertchris.io/stylesheets/noto-serif-hebrew.css';
Then, use the fonts in your CSS:
blockquote {font-family: 'Noto Sans';}code {font-family: 'Noto Sans Mono';}p {font-family: 'Noto Serif';}.greek-sans {font-family: 'Noto Sans Greek', 'Noto Sans';}.greek-serif {font-family: 'Noto Serif Greek', 'Noto Serif';}.hebrew-sans {font-family: 'Noto Sans Hebrew', 'Noto Sans';}.hebrew-serif {font-family: 'Noto Serif Hebrew', 'Noto Serif';}