Custom Fonts

Luxe, along with all Shopify themes, offers a wide choice of fonts from Google Fonts and Monotype Fonts. However, many brands using Luxe want to use a font that’s not available in these font libraries. With Luxe, you can add any custom font that you have purchased from other font foundries. This page provides a guide on how to install custom fonts.

Note: This guide requires some basic knowledge of CSS coding. Only follow this guide if you are comfortable and confident with the process explained. If you are not sure, or you require assistance, please contact our support team for help.

1. Ensure you have your font files in woff2 file format.
2. Within Shopify, go to Content > Files. Upload your font files here. You can include different fonts or weights for navigation, heading and body font.
3. Once your files have uploaded, copy and take note of the file URLs by clicking the “Copy link” button on each file.
4. Go to the Theme Editor (Online Store > Themes > Customize)
5. Go to Theme Settings.
6. Go to Typography and set all fonts to system fonts (either serif or sans serif depending on what best matches your custom fonts). This prevents Shopify from loading any other fonts for the theme, so it will optimise your site speed as best as possible.
7. Go to Custom CSS section at the bottom of the theme settings panel. Adding the coding below, replacing “Your-Font-Name” and “your-file-name” with the actual name and file URL. Repeat the @font-face section of code for different font files.

@font-face {
  font-family: "Your-Font-Name";
  src: url("your-file-name.woff2")
    format("woff2");
  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
  font-display: swap;
}
:root {
  --font-body-family: "Your-Font-Name", Arial, Helvetica, sans-serif;
  --font-body-style: normal;
  --font-body-weight: normal;
  --font-body-weight-bold: 600;

  --font-heading-family: "Your-Font-Name", Arial, Helvetica, sans-serif;
  --font-heading-style: normal;
  --font-heading-weight: normal;

  --font-accent-family: "Your-Font-Name", Arial, Helvetica, sans-serif;
  --font-accent-style: normal;
  --font-accent-weight: normal;
}