🔠Adjusting typography with CSS overrides

Developers can override in-app theme settings with our override tool.

Last updated: April 10, 2024

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:

CSS	Used For (Examples)
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

Note: CSS Overrides will not 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.

/* 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;
}