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.

Self-Hosted Fonts

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 your theme dashboard and select “Edit code”.
5. Open the file in assets/custom-styles.css
6. Copy/paste the coding below into the file, 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. Adjust font weights, if required, to suit your chosen fonts. Once finished, save the file.

@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;
}

7. Finally, after you have verified your fonts are working, you should de-activate the standard Shopify fonts. Go to Theme Settings > 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.

Adobe Fonts

Using Adobe Fonts requires a different approach, which requires editing of multiple theme files.

1. Copy the font embed code provided in your Adobe web project.
2. Go to your theme dashboard and select “Edit code”.
3. Open the file layout/theme.liquid, and paste your Adobe code into this file after the base.css code. Be careful not to remove or break any other code within this file. Save the file.
4. Open the file in assets/custom-styles.css. Copy/paste the coding below into the file, replacing “Your-Font-Name” with the actual name as per your Adobe instructions. Adjust font styles or weights, if required, to suit your chosen fonts. Once finished, save the file.

: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;
}

5. Finally, after you have verified your fonts are working, you should de-activate the standard Shopify fonts. Go to Theme Settings > 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.