Custom CSS and code
Custom CSS and code in Combine for developers: where custom CSS goes, how to add a custom or Google font, and what support covers.
Applies to: Combine 4.2.0 and later. Added in: Combine 1.0.0. Last checked: 2026-10-13 against Combine 4.2.0.
Krown support does not provide help with custom code. This page is for developers and for store owners comfortable with code: it shows where custom CSS goes in Combine and how to load a font that Shopify's font library does not have. For a change you cannot make yourself, see Custom work and code changes.
Where to find it: Theme settings → Custom CSS for CSS; Shopify admin → Online Store → Themes → … → Edit code for theme files.
Where to add custom CSS
- Theme settings → Custom CSS applies CSS to the whole store. Use it for store-wide changes, such as the button colors in How do I change the button colors?.
- Custom CSS at the end of every section's settings applies CSS to that section only. Shopify scopes it to the section for you.
- Both fields are Shopify features of the theme editor. They are kept when you update Combine, which makes them safer than edits to theme files.
How Combine sets its fonts
Combine loads three fonts from Theme settings → Typography in snippets/head-variables.liquid and passes them to the CSS as variables:
| Variable | Font |
|---|---|
--font-stack-headings-primary, --font-weight-headings-primary, --font-style-headings-primary | Headings |
--font-stack-body-primary, --font-weight-body-primary, --font-weight-body-primary-medium, --font-weight-body-primary-bold, --font-style-body-primary | Body |
--font-stack-body-secondary, --font-weight-body-secondary, --font-weight-body-secondary-bold, --font-style-body-secondary | Section titles |
A custom font replaces the values of these variables.
Adding a custom font
Duplicate the theme
In Shopify admin → Online Store → Themes, select … → Duplicate on your Combine theme and work on the copy. See Edit the theme code.
Upload the font files
Open Shopify admin → Content → Files and upload the font, preferably in WOFF2 (or WOFF) format. Upload one file per weight and style you need (regular, bold, italic). Copy the URL of each file.
Remove the font loading of the theme fonts
In the theme code, open snippets/head-variables.liquid. Remove the <link rel="preload" … as="font"> lines at the top, and the font_face lines inside the "Fonts" comment, for the fonts you replace.
Declare your font
Right after the opening <style type="text/css"> tag, add an @font-face rule for each file:
@font-face {
font-family: "MyFont";
src: url("https://cdn.shopify.com/…/myfont.woff2") format("woff2");
font-weight: 400;
font-style: normal;
}Point the variables to your font
In the /* Font variables */ part of the same file, replace the variables of the fonts you change, for example for all three:
--font-stack-headings-primary: "MyFont", sans-serif;
--font-weight-headings-primary: 400;
--font-style-headings-primary: normal;
--font-stack-body-primary: "MyFont", sans-serif;
--font-weight-body-primary: 400;
--font-weight-body-primary-medium: 500;
--font-weight-body-primary-bold: 700;
--font-style-body-primary: normal;
--font-stack-body-secondary: "MyFont", sans-serif;
--font-weight-body-secondary: 400;
--font-weight-body-secondary-bold: 700;
--font-style-body-secondary: normal;Check and publish
Preview the duplicate on the home page, a product page and the cart, then publish it.
Edits to theme files are not copied when Shopify cannot merge them into a new Combine version. Keep a copy of every change, and redo it after each update. See Update Combine.
Adding a Google font
Get the embed code
On Google Fonts, select the font and the weights you need, and copy the <link> embed code, for example <link href="https://fonts.googleapis.com/css?family=Poiret+One" rel="stylesheet">.
Add it to the layout
In the theme code, open layout/theme.liquid and paste the code just before the closing </head> tag.
Point the variables to the Google font
Follow "Remove the font loading of the theme fonts" and "Point the variables to your font" above, with the Google font's name instead of "MyFont", for example "Poiret One", sans-serif. You do not need the @font-face rule: Google's code loads the font.
Why does my custom font disappear after an update?
The update created a new copy of the theme files. If Shopify could not merge your edit to snippets/head-variables.liquid or layout/theme.liquid, the new version has the original code. Add the font code again to the updated theme.
Related pages
- Typography theme settings: the three fonts and their sizes.
- How do I change the button colors?: a ready-made CSS example.
- JavaScript events: events for developers.
- Custom work and code changes: what Krown support covers.
- Insert code into your store's head: adding scripts and tags.