Change font / add custom font to my Empire theme

Store Design
1

Dear Shopify Community,

how do I add a custom font to my Shopify theme? We use Empire.

Thanks!

2

@Kobold Hello
Can you please Follow this Process

  • Choose and Obtain Your Custom Font:

    • First, choose the custom font you want to use on your Shopify store. You can find custom fonts from various sources, both free and paid. Make sure you have the font files in the required formats (usually .ttf, .otf, .woff, .woff2).

  • Upload the Font Files:

    • Go to your Shopify Admin dashboard.

    • From the left-hand sidebar, click on “Online Store.”

    • Select “Themes.”

    • Find and click on the “Actions” dropdown for your Empire theme and select “Edit code.”

    • In the “Assets” folder, click on “Add a new asset.”

    • Upload your font files (usually .woff or .woff2) to the Assets folder. Make sure to note the file names and extensions.

  • Edit Your Theme’s Stylesheets:

    • In the “Edit code” section, locate and open the “theme.scss.liquid” or “theme.css” file. If you have multiple CSS files, look for the main stylesheet.

    • In your stylesheet, you will need to define a @font-face rule to declare the custom font. Here’s an example

@font-face {
  font-family: 'CustomFontName';
  src: url('{{ 'your-font-file.woff' | asset_url }}') format('woff');
  /* Add more src declarations for different font formats if available */
  font-weight: normal;
  font-style: normal;
}
    • Make sure to replace ‘CustomFontName’ with the desired font name, and ‘your-font-file.woff’ with the actual file name you uploaded to the Assets folder.

  • Apply the Custom Font to Your Styles:

    • Once you’ve declared the font, you can apply it to specific elements in your stylesheet. For example, if you want to change the font of the body text, you can do this
body {
  font-family: 'CustomFontName', sans-serif;
}
    • This CSS rule sets the font-family for the entire body of your website.

  • Save Changes:

    • After making your changes, click the “Save” button to save your modified stylesheet.

  • Check Your Store:

    • Preview your store to ensure that the custom font is applied correctly.

  • Publish the Changes:

    • If everything looks good, click the “Online Store” tab in your Shopify Admin, then select “Themes.”

    • Click the “Actions” dropdown for your Empire theme and choose “Publish.”

    • Confirm the publication and your custom font should now be live on your Shopify store.