Font Customization

By default, Quotient comes with Inter (for body and headings h2-h6) and Fraunces (for heading h1). But you can use any font you want. Here's how:

1. Get the link for the font you want to use. It'll look like this

<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=Open+Sans:ital,wght@0,300..800;1,300..800&family=Oswald:wght@200..700&display=swap" rel="stylesheet">

1. Go to 'Code Injection' inside Ghost Admin Settings. Select 'Site Footer'.

2. Paste the link here. Add the style tag and :root{} selector.

<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=Open+Sans:ital,wght@0,300..800;1,300..800&family=Oswald:wght@200..700&display=swap" rel="stylesheet">

<script>
:root{
    //code goes here
}
</script>

Use the following variables to customize typography.

### TO SET FONTS

`--font-heading-h1` //set font for heading H1

`--font-heading` //set font for headings H2-H6 and logo

`--font-body` //set font for body and label

### TO SET FONT SIZE

`--logo-font-size` //set font size for logo

`--h1` //set font size for heading H1

`--h2` //set font size for heading H2

`--h3` //set font size for heading H3

`--h4` //set font size for heading H4

`--h5` //set font size for heading H5

`--h6` //set font size for heading H6

`--p` //set font size for body

`--label` //set font size for label

### TO SET FONT WEIGHT

`--font-weight-heading-h1` //set font weight for heading H1

`--font-weight-heading` //set font weight for headings H2-H6

`--font-weight-body` //set font weight for body and label

SITE FOOTER

<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=Open+Sans:ital,wght@0,300..800;1,300..800&family=Oswald:wght@200..700&display=swap" rel="stylesheet">

<style>
:root{
--font-heading-h1: 'Oswald', sans-serif;
--font-heading: 'Oswald', sans-serif;
--font-body: 'Open Sans', sans-serif;
--font-weight-heading: 700;
--logo-font-size: 32px;
}
</style>