π Adjusting typography with CSS overrides
Developers can override in-app theme settings with our override tool.
Last updated: May 14, 2025
CSS can be placed in the CSS Overrides section of the Theming page in the admin portal to apply custom typography settings to your brand's Customer Account Portal.

Below are the main predefined typography types that can be manipulated:
h1
Hi, {Name}
h2
Subscriptions, Order History, Settings
h3
{Weekday, Month, DD}, {Subscription Frequency}
h4
Your next order, Add to your next order, Past orders, Shipping address, Payment method, Login information
h5
Menu list
p
Body text used for product information, settings information, modals, etc.
[class*="caption"]
Caption text used for prices, badges, mini-card text, etc.
Use this CSS Reference to learn more about how to style typography by font-family, font-size, color, and more.
Tip: If you are referencing a custom font hosted on your Shopify site, 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 WhatFont to quickly identify typography on your shop without using developer tools.
@font-face {
font-family: "Font name";
src: url({{ [font-file-name] | asset_url }}) format("[font-format]");
}
General Typography Examples
/* 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
/* 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;
}
Last updated
Was this helpful?