# Adjusting typography with CSS overrides

Last updated: May 14, 2025

CSS can be placed in the <mark style="color:purple;">CSS Overrides</mark> section of the **Theming** page in the admin portal to apply custom typography settings to your brand's Customer Account Portal.&#x20;

<figure><img src="https://3658670565-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FndNAuxS4koYyI8AQTpS9%2Fuploads%2FXp7w7ZENjcz7RjKTDZSb%2FScreenshot%202024-04-10%20at%2012.20.44%E2%80%AFPM.png?alt=media&#x26;token=0f2428f9-981b-4e97-930a-b4ce5dca54b4" alt=""><figcaption></figcaption></figure>

Below are the main predefined typography types that can be manipulated:&#x20;

<table><thead><tr><th width="232">CSS</th><th>Used For (Examples)</th><th data-hidden></th></tr></thead><tbody><tr><td><mark style="color:purple;"><code>h1</code></mark></td><td>Hi, {Name}</td><td></td></tr><tr><td><mark style="color:purple;"><code>h2</code></mark></td><td>Subscriptions, Order History, Settings</td><td></td></tr><tr><td><mark style="color:purple;"><code>h3</code></mark></td><td>{Weekday, Month, DD}, {Subscription Frequency}</td><td></td></tr><tr><td><mark style="color:purple;"><code>h4</code></mark></td><td>Your next order, Add to your next order, Past orders, Shipping address, Payment method, Login information</td><td></td></tr><tr><td><mark style="color:purple;"><code>h5</code></mark></td><td><em>Menu list</em></td><td></td></tr><tr><td><mark style="color:purple;"><code>p</code></mark></td><td><em>Body text used for product information, settings information, modals, etc.</em></td><td></td></tr><tr><td><mark style="color:purple;"><code>[class*="caption"]</code></mark></td><td><em>Caption text used for prices, badges, mini-card text, etc.</em> </td><td></td></tr></tbody></table>

Use this [<mark style="color:blue;">CSS Reference</mark>](https://cssreference.io/typography/) to learn more about how to style typography by font-family, font-size, color, and more.&#x20;

{% hint style="warning" %}
**Tip:** If you are referencing a [<mark style="color:blue;">custom font hosted on your Shopify site</mark>](https://shopify.dev/themes/architecture/settings/fonts#host-fonts-in-your-theme), be sure to write the font family name exactly as it has been listed in your liquid code's `@font-face` CSS rule. This will equal`"Font name"` below 👇. You can also use a Chrome extension like [<mark style="color:blue;">WhatFont</mark>](https://chrome.google.com/webstore/detail/whatfont/jabopobgcpjmedljpbcaablpmlmfcogm?hl=en) to quickly identify typography on your shop without using developer tools. &#x20;
{% endhint %}

```css
@font-face {
  font-family: "Font name";
  src: url({{ [font-file-name] | asset_url }}) format("[font-format]");
}
```

### General Typography Examples&#x20;

{% hint style="info" %}
**Note:** CSS Overrides will *<mark style="color:orange;">not</mark>* reflect in the in-app account portal preview. Log into an account with an active subscription on the theme you published to see your changes applied.&#x20;
{% endhint %}

```css
/* Headings, Links, & Lists*/

h1, h2, h3, h4, h5, a, li{
  font-family: "Lota Grotesque";
}

/* Body */

p{
  font-family: 'Lota Grotesque';
  font-style: normal;
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  color: #2B2D70;
}

/* Captions */

[class*="caption"] {
  font-family: 'Lota Grotesque';
  font-style: normal;
  font-weight: 600;
  font-size: 12px;
  line-height: 16px;
  color: #2B2D70;
}

/* "Customer since" text */

[class*="customer-since"]{
  font-family: 'Lota Grotesque';
  font-style: normal;
  font-weight: 600;
  font-size: 10px;
  line-height: 13px;
  text-transform: uppercase;
  color: #2B2D70;
}

/* "Primary button text */

[class*="primary-button"]{
  font-family: 'Lota Grotesque';
  font-style: normal;
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  color: #2B2D70;
}

/* "Secondary button text */

[class*="secondary-button"]{
  font-family: 'Lota Grotesque';
  font-style: normal;
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  color: #2B2D70;
}
```

### Badge Examples

```css
/* Captions within badges */

[class*="caption1"], [class*="info-badge"]{
  font-family: 'Lota Grotesque';
  font-style: normal;
  font-weight: 600;
  font-size: 12px;
  line-height: 16px;
  color: #2B2D70;
}

```