Custom fonts not working (Exhibit theme)

AnzAugRok
Visitor
1 0 0

Hi!

 

We’ve been trying with no success to embed a custom font into a theme we purchased (Exhibit) on Shopify. The files have been uploaded in the formats attached below, and the code was added to the base.bundle.css of our template. Any clue why the fonts are

  

Screenshot 2024-03-01 at 18.22.21.png

Screenshot 2024-03-01 at 18.19.13.png

are not displaying?

 

Best,

Anze

Replies 2 (2)

diego_ezfy
Shopify Partner
2958 565 887

@AnzAugRok 

If the custom fonts are successfully installed (which they seem to be, based on the screenshot), they must be applied with CSS after installed.

Something like:

*{
font-family: "BPdots" !important;
}


Would likely do the trick.


◦ Follow my blog & youtube for coding tutorials.
◦ Replace apps with copy/paste code snippets and save money.

websensepro
Shopify Partner
1011 139 147

Hi AnzAugRok,

There are a few steps you should take to troubleshoot and ensure that the fonts are correctly applied:

 

1)  Check File Formats 😞Ensure that the font files you uploaded are in the correct formats. Common formats include .woff, .woff2, .ttf, and .otf. Check the documentation of your theme to see which formats are supported.)

2)  Confirm File Uploads : (Double-check that the font files were uploaded to the correct location in your Shopify admin. They should be uploaded to the "Assets" folder.)

3)  Verify CSS Code: (Ensure that the CSS code you added to base.bundle.css is correct. Here's an example of how you might include a custom font using @font-face:)

 

@font-face {
    font-family: 'CustomFont';
    src: url('{{ 'CustomFont.woff2' | asset_url }}') format('woff2'),
         url('{{ 'CustomFont.woff' | asset_url }}') format('woff');
    /* Add additional font properties if needed */
}

body {
    font-family: 'CustomFont', sans-serif; /* Apply the custom font to the body */
}

 

Clear Cache: ( Sometimes, changes to CSS files may not reflect immediately due to browser caching. Clear your browser cache or try viewing the website in a private/incognito window to see if the changes take effect.)

 

Need a Shopify developer?
Hire us at WebSensePro
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel or buy us a Cofee here