# 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="/files/yEsTbRBvw6cxle2U0jvI" 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;
}

```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.smartrr.com/docs/support/admin-portal/adjusting-typography-with-css-overrides.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.