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

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

talsworld
Excursionist
42 1 10

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

<p><span style="font-weight: 400;">.h1, .h2, .h3, .h4 { font-family: "Bubble Rainbow"!important; }</span></p>

 

Fonts are ALSO ALL uploaded to my assets folder!

 

Reply 1 (1)

GemPages
Shopify Partner
5625 1262 1264
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.

 

 

<style> 
@font-face { 
font-family: "Bubble Rainbow"; 
src: url("Linkofthefontfile");
 }
h1, h2, h3, h4, h5 {
font-family: "Bubble Rainbow" !important;
} 
.h1, .h2, .h3, .h4 { 
font-family: "Bubble Rainbow" !important;
 }
 </style>​

 

 

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

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center