Customize
Typography
How Loco uses its heading, body and accent fonts, the fonts each preset starts with, and how to change them in the Shopify font library.
Loco uses three fonts. You choose them in Theme settings > Typography. All three come from the Shopify font library.
The three fonts
| Setting | Where it is used |
|---|---|
| Heading font | Headings, product names, prices and the large background text behind some sections. With the Crisp sheets design style, product names on cards use the body font. |
| Body font | Body text, buttons, menus, form fields and small headings. |
| Accent font | Used for SKUs, codes and small labels, such as the SKU line above a product name. With Crisp sheets it also sets field labels and gift card and discount codes. |
Preset fonts
| Setting | Loco | Almanac | Roster |
|---|---|---|---|
| Heading font | Poppins | EB Garamond | Chivo |
| Body font | Poppins | Karla | Libre Franklin |
| Accent font | Poppins | EB Garamond | Roboto Mono |
Loco uses one family for everything, which suits a clean, modern brand. Almanac pairs a classic book face with a plain sans serif, and sets its small labels in italic. Roster adds a monospaced accent font so that SKUs and part numbers line up in columns.
Change a font
- In the theme editor sidebar, click Theme settings, then Typography.
- Under Heading font, Body font or Accent font, click Change.
- Search for a family or browse the list, then select it.
- Click Select to apply it. The preview updates right away.
- Check a product page, a collection and the cart before you save. Headings, prices and buttons look different in each family.
You can only choose fonts from the Shopify font library. Fonts you upload yourself can't be used in theme settings.
Weights and styles
When you pick a font, the picker also offers a style, such as Regular or Bold. Loco uses the family you pick. The weight and slant of each text style come from the Design style setting, so a heading keeps the same weight whichever style you select in the picker.
These are the weights each design style uses:
| Design style | Heading font | Body font | Accent font |
|---|---|---|---|
| Soft panels | 500 to 800, with italic | 400 to 600 | 500 and 600 |
| Paper and rules | 400 and 500, with italic | 400 and 700 | 500, with italic |
| Crisp sheets | 700 to 900 | 400 to 700, with italic | 500 |
Some families have only a few weights. Loco loads the weights the family has and skips the rest. Where a weight is missing, the browser uses the closest one, so headings can look lighter or heavier than in the preset. Where a family has no italic, browsers slant the regular letters.
To avoid surprises, choose a family that has the weights your design style uses. Crisp sheets needs a heavy heading font, with weights up to 800 or 900. Paper and rules looks best with a heading font that has a real italic.
System fonts
The Shopify font library also includes system fonts, listed under System fonts in the font picker. They are already installed on your customers' devices, so the browser does not download them before showing text. When all three fonts are system fonts, Loco does not load any font files at all.
The trade-off: system fonts look a little different on each device, and they usually come in regular and bold only. Headings that need a medium or heavy weight use the closest one available.
Fonts from the library load quickly either way. Loco loads only the weights your pages use, and preloads the body font so text appears without a jump.