No one seems to be able to figure it out! Fonts, not working on all devices. No idea why!?

Store Design
, ,

Topic summary

A user is experiencing issues with custom fonts not displaying correctly across all devices on their Shopify store.

The Problem:

  • Custom font “Bubble Rainbow” implemented via CSS in theme.css.liquid file
  • Font files uploaded to Assets folder
  • Code contains multiple syntax errors and formatting issues, including reversed/garbled text portions
  • Multiple font format declarations (woff2, woff, tff, otf, svg, eot) with incorrect syntax

Proposed Solution:
A support representative provided step-by-step instructions:

  1. Upload font files through Shopify Admin → Settings → Files (not Assets)
  2. Copy the generated file link after upload
  3. Add proper @font-face code to theme.liquid file using the copied link
  4. Replace placeholder values with actual font data
  5. Apply font-family styling to desired elements

Current Status:
The discussion appears incomplete, with the support response partially corrupted or improperly formatted. The user has not yet confirmed whether the suggested approach resolved the cross-device compatibility issue.

Summarized with AI on November 22. AI used: claude-sonnet-4-5-20250929.
1

Help!

This is my code:

Here is my code in Assets → theme.css.liquid

@font-face {
font-family: “Bubble Rainbow”;
src: url(“Bubble Rainbow.woff2”) format(“woff2”),
url(“Bubble Rainbow.woff”) format(“woff”);
url(“Bubble Rainbow.tff”) format(“tff”);
url(“Bubble Rainbow.otf”) format(“otf”);
url(“Bubble Rainbow.eot”) format(“eot”);
url(“Bubble Rainbow.svg”) format(“svg”);
}

h1, h2, h3, h4, h5 {font-family: ‘Bubble Rainbow’;}

.h1, .h2, .h3, .h4 { font-family: "Bubble Rainbow"!important; }

Fonts are ALSO ALL uploaded to my assets folder!

2

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

Step 1: From your Shopify Admin, navigate Setting section and select “File”.
Step 2: Upload your Font File by selecting “Upload file”.
Step 3: The opened window will allow you to select the font file to add. After having successfully uploaded the file, select the “Link” icon to copy the file link : https://prnt.sc/qdXMTFPKCGDS
Step 4: After that, look for the file “theme.liquid” under the Layout section or via the search bar. Select to open the file.
Step 5: Add the following codes at the bottom of the file.

​

Replace the below elements of the code with actual data.

  • 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.
    If it still does not work, please send me the link of Font file that you uploaded to File folder so I can give the correct code for you.

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