Custom CSS and code
Code recipes for Borders developers: adding a custom font with @font-face or Google Fonts, and hiding the Powered by Shopify link.
Applies to: Borders 3.1.0 and later. Added in: Borders 1.0.0. Last checked: 2026-10-13 against Borders 3.1.0.
Krown support does not provide help with custom code. This page collects the code recipes from the old Borders articles, for developers and for store owners who are comfortable editing code. For changes that need more than a few lines of CSS, see Custom work and code changes.
Where custom CSS goes
- Theme settings → Custom CSS applies to the whole store.
- Every section also has its own Custom CSS field at the bottom of its settings, which applies only to that section.
- Both are Shopify settings, so they are kept when you update Borders.
- Edits to theme files (Online Store → Themes → … → Edit code) are not kept by an update: repeat them in the new version. Duplicate the theme before you edit it.
Hide the Powered by Shopify link
The Copyright bar of the Footer group shows a "Powered by Shopify" link. Borders has no setting for it. Paste this rule in Theme settings → Custom CSS:
.powered-by-shopify {
display: none !important;
}See also the Shopify Basics guide Remove the Powered by Shopify credit.
Add a custom font
Borders uses the fonts of Shopify's font library, chosen in Typography theme settings. To use your own font files, you edit the snippet snippets/head-variables.liquid.
Upload the font files
Upload your font in Shopify admin → Content → Files, in WOFF2 format (or WOFF). Upload one file per style you need, for example regular, bold and italic. Copy each file's URL.
Duplicate the theme
In Online Store → Themes, select … → Duplicate on your live theme, and work in the copy.
Remove the font preload
Open … → Edit code → snippets/head-variables.liquid. At the top, remove the two <link rel="preload" ...> blocks for headings_font and body_font. Keep the first {%- liquid ... -%} block that assigns the two fonts.
Replace the font declarations
Further down, delete the {%- liquid ... -%} block with the font_face lines, and put your own declaration in its place, one per font file:
@font-face {
font-family: "MyFont";
src: url('Your_font_link_URL') format("woff2");
}Replace the font variables
Search for /* Font variables */. Replace the eight lines from --font-stack-headings to --font-style-body with your own stack:
--font-stack-headings: "MyFont", sans-serif;
--font-weight-headings: 400;
--font-weight-headings-bold: 700;
--font-style-headings: normal;
--font-stack-body: "MyFont", sans-serif;
--font-weight-body: 400;
--font-weight-body-bold: 700;
--font-style-body: normal;Save and check
Save the file and preview the copy. You can use two different fonts, or one font for everything.
Replace the font family names and URLs with valid names and valid URLs of the fonts you've uploaded.
Use a Google font
Get the embed code
Choose the font on Google Fonts and copy the generated <link> code. For the Poiret One font it is:
<link href="https://fonts.googleapis.com/css?family=Poiret+One" rel="stylesheet">Add it to theme.liquid
In the duplicated theme, open layout/theme.liquid and paste the code just before the closing </head> tag.
Follow the custom font steps
Apply the steps of Add a custom font, but skip the @font-face declaration. Use the Google font's name instead of "MyFont", for example "Poiret One".
Do I have to repeat these edits after an update?
Yes, for the font recipes. They change theme files, and a Borders update installs fresh copies of those files. The Custom CSS rule for the Powered by Shopify link is a setting and is kept. Keep a note of every file edit so you can repeat it.
Related pages
- Custom work and code changes: what Krown support covers.
- Typography theme settings: the fonts you can choose without code.
- Footer group: the Copyright bar with the Powered by Shopify link.
- Edit the theme code: Shopify's code editor.
JavaScript events
The JavaScript events of Borders: Shopify standard events (page view, cart actions) and the collection filtered event, for developers.
What's new in Borders
What's new in Borders: every release of the theme on the Shopify Theme Store, with its date and the pages that describe each change.