Custom Font Not Displaying On Certain Browsers

[laurenfrancis]

Hello,

I uploaded a custom font to my Shopify page but it seems to only appear on Google Chrome - it does not appear on Safari or mobile platforms. Does anyone know how to have the font appear across all platforms? The CSS liquid is as follows:

@font-face {
font-family: "GrandSlang-Roman";
src: url("GrandSlang-Roman.woff2") format("woff2"),
url("GrandSlang-Roman.woff") format("woff");
}

h1, h2, h3, span.marquee-text { font-family: "GrandSlang-Roman"!important; }

Thanks so much in advance! Appreciate the support.

[GemPages · Accepted solution]

Hello @laurenfrancis 
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, for example : 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: "GrandSlang-Roman"; 
src: url("Linkofthefontfile");
 }
h1, h2, h3, span.marquee-text {
font-family: "GrandSlang-Roman" !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

[laurenfrancis]

Hi GemPages,

Thank you SO much for your help - this worked like a charm!!

[GemPages]

I do appreciate your compliment! 😁

[Emily__]

This worked for me perfectly, thank you so much @GemJ. Would you happen to know how to add a variable to the font too? Eg. I've uploaded a regular and an italic version of the .woff2 font and unsure how to link the two in the code so when i select italics in the body it's overridden with the italic version of that font. Thank you! 

[Foxrux08]

thank you so much for this im looking it for 1 week.

[StrungOutStudio]

Gosh, I sure wish I could jump on the bandwagon and sing your praises, too! That would mean this worked for me; alas, I still can't get my custom font (also Catchy Mager Regular) to resolve... anywhere. Not in Safari, Chrome or Opera. You mentioned in an earlier post to upload the font file to you so I'll do just that. 

**EDIT**: Apparently, Shopify finds a .TTF illegal. How else can I send it to you?