Why aren't my custom fonts displaying on mobile devices?

[jensberly]

Hello,

I'm using two custom fonts I've uploaded myself but they're not being rendered on mobile devices. When I work on my desktop everything seems just fine. Any ideas? I already uploaded the fonts to the assets folder as .woff files in the code.

Here's what it looks like: 

   

Here's what it should look like: 

The URL for the site:  https://litichevskaya.myshopify.com/ and the password: I'll send you via pm!

Thank you for reading!

[PMike]

If you have uploaded custom fonts to Shopify and they are not rendering on mobile devices, there are a few potential reasons and solutions to consider:

1. File Format: Ensure that the font files you uploaded are in the correct format for web usage. Shopify supports various font formats such as .woff, .woff2, .ttf, and .otf. Make sure your font files are in one of these supported formats.

2. File Upload: Double-check that you have uploaded the font files correctly to your Shopify theme's assets folder. You can do this by going to the "Online Store" section in your Shopify admin, selecting "Themes," and then clicking on "Actions" followed by "Edit code." Navigate to the assets folder and verify that the font files are present.

3. Font Declarations: Check if you have properly declared and referenced the custom fonts in your theme's CSS file. To do this:

a. In the code editor, locate your theme's CSS file (typically named "theme.scss.liquid" or "styles.scss.liquid").
b. Ensure that you have added the appropriate `@font-face` declarations for your custom fonts. For example:

```css
@font-face {
font-family: 'CustomFont1';
src: url('{{ 'customfont1.woff' | asset_url }}') format('woff');
}

@font-face {
font-family: 'CustomFont2';
src: url('{{ 'customfont2.woff' | asset_url }}') format('woff');
}
```

c. Make sure that you are using the correct font family name when applying the font to specific elements in your CSS. For example:

```css
h1 {
font-family: 'CustomFont1', sans-serif;
}

p {
font-family: 'CustomFont2', sans-serif;
}
```

4. Cache Refresh: Clear the cache on your mobile devices or try accessing your store on different mobile devices to rule out any caching issues. Sometimes, older versions of the website or cached files can prevent the custom fonts from loading properly.

By addressing these points, you should be able to troubleshoot and resolve the issue with your custom fonts not rendering on mobile devices in Shopify. If the problem persists, you may consider reaching out to Shopify Support for further assistance.

[jensberly]

Hey,

I followed your steps with no success. If it's not too much to ask, do you mind checking out the code? Thank you in advance! I can send you the pw via pm 🙂