Why isn't my custom font displaying correctly?

Store Design
, , ,
1

I have been trying to upload a custom font for ages and it’s not working and keeps showing a default font even though in the code it says the correct font: Univers-Black.

The code I have been using is from this site: https://www.updimes.com/add-custom-font-to-shopify/

The link to the website is: https://www.hypiral.com/

Here is an image of the font that I have uploaded to my files folder:

univers-black.JPG

Any help is appreciated!

2

Hi @hypiralstore ,

You are missing the step #2 in the website provided. I do not see the code for the {% include ‘custom-fonts’ %}

  1. Go to theme.liquid, find the

  2. Add the code before the , {% include ‘custom-fonts’ %}

3

I have got that included before the body section and it still doesn’t display the correct font

4

Hi @hypiralstore ,

I do not see the code. Can you confirm the code you use and where it was paste?

made4Uo_0-1679531159974.png
made4Uo_0-1679531159974.png671×517 29.9 KB

5

Based on the code you provided, it looks like you’re on the right track. However, there may be some additional steps required to properly install the custom font.

Here’s a code snippet that you can try adding to your website’s CSS file to see if it resolves the issue:

@font-face {
  font-family: 'Univers-Black';
  src: url('https://www.yourwebsite.com/fonts/Univers-Black.ttf') format('truetype');
}

body {
  font-family: 'Univers-Black', sans-serif;
}

Make sure to replace ‘https://www.yourwebsite.com/fonts/Univers-Black.ttf’ with the correct URL for your custom font file.

6

Hello @hypiralstore
I would like to give you the recommendation to support you so kindly follow steps below:

Step 1: After having successfully uploaded the file, select the “Link” icon to copy the file link.
Step 2: After that, look for the file “theme.liquid” under the Layout section or via the search bar. Select to open the file.
Step 3: Add the following codes at the bottom of the file.

Replace the below elements of the code with actual data.
Font name: the name of the font.
Linkofthefontfile: the link of the Font File that was previously uploaded. It is copied after you select the Link icon.

Hit “Save” when finished.
So you can use FontName that you added.

I hope the above is useful to you.
Best regards,
GemPages Support Team

7

Hi this did work but the title and price on my product page don’t update;

[https://www.hypiral.com/products/cordlesshaircurler](https://www.hypiral.com/products/cordlesshaircurler\)

Also, in the header the cart and menu icons show up as text

8

Hello @hypiralstore :waving_hand:

You can follow this tutorial on how to add custom font to your store.

https://zenobuilder.com/blogs/news/upload-font-shopify-store