Docs
OnFlow
Google Fonts

Google Fonts

OnFlow theme uses the self-hosted font named Geist (opens in a new tab). It is a modern sans-serif font carefully crafted for all screens. However if you want to use Google Fonts, you can do it by adding custom code.

Code Injection is required to add custom CSS.

  1. Open the Google Fonts website and select the font you want to use. For example, we will use Roboto (opens in a new tab) for body and Oswald (opens in a new tab) for headings.
  2. Add these fonts to collection using the Get font button Google Fonts selection
  3. Click on the Get embed code button Google Fonts selection
  4. Select the font weights and styles if you want and copy the code from the Web tab Google Fonts selection

Add the following CSS code:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
 
<style>
  body {
    --font-family-body: "Roboto", sans-serif;
    --font-family-headings: "Oswald", sans-serif;
  }
</style>