Google Font

Google font-family 'stacks' for HTML tags such as <p> and <h1>.

Source Sans Pro

Google Source Sans Extra Light experience design made simple
for living design systems

Google Source Sans Extra Light Italic experience design made simple
for living design systems

Google Source Sans Light experience design made simple
for living design systems

Google Source Sans Light Italic experience design made simple
for living design systems

Google Source Sans experience design made simple
for living design systems

Google Source Sans Italic experience design made simple
for living design systems

Google Source Sans Semibold experience design made simple
for living design systems

Google Source Sans Semibold Italic experience design made simple
for living design systems

Google Source Sans Bold experience design made simple
for living design systems

Google Source Sans Bold Italic experience design made simple
for living design systems

Google Source Sans Black experience design made simple
for living design systems

Google Source Sans Black Italic experience design made simple
for living design systems

Source Serif Pro

Google Source Serif Extra Light experience design made simple
for living design systems

Google Source Serif Light experience design made simple
for living design systems

Google Source Serif experience design made simple
for living design systems

Google Source Serif Semibold experience design made simple
for living design systems

Google Source Serif Bold experience design made simple
for living design systems

Google Source Serif Black experience design made simple
for living design systems

Source Code Pro

Google Source Code Extra Light experience design made simple
for living design systems

Google Source Code Light experience design made simple
for living design systems

Google Source Code experience design made simple
for living design systems

Google Source Code Medium experience design made simple
for living design systems

Google Source Code Semibold experience design made simple
for living design systems

Google Source Code Bold experience design made simple
for living design systems

Google Source Code Black experience design made simple
for living design systems

Noto Sans

Google Noto Sans experience design made simple
for living design systems

Google Noto Sans Italic experience design made simple
for living design systems

Google Noto Sans Bold experience design made simple
for living design systems

Google Noto Sans Bold Italic experience design made simple
for living design systems

Noto Serif

Google Noto Serif experience design made simple
for living design systems

Google Noto Serif Italic experience design made simple
for living design systems

Google Noto Serif Bold experience design made simple
for living design systems

Google Noto Sans Bold Italic experience design made simple
for living design systems

Cormorant Garamond

Google Garamond Light experience design made simple
for living design systems

Google Garamond Light Italic experience design made simple
for living design systems

Create an HTML tag suitable for displaying text such as <p> or <h1>, and apply the font-google-[family]-[style] class. The default google font family 'stack' can be adjusted in /variables/_font.scss.

   <p class="font-google-source-sans"></p>
   <p class="font-google-source-serif"></p>
   <p class="font-google-source-code"></p>