I used the app “Use Google, Custom Fonts”(Developer: Roar theme) to upload a custom font, Gotham (.otf). This works swimmingly however when on safari this font shows up as Times (or something similar). Is this an app issue? A font/compatibility issue?
I also understand there is a way to upload custom fonts without an app, however standard directions online do not seem to align with my theme (provided by Clean Canvas).
There are some fonts offered by Shopify under theme setting that are “close enough” to use, but I remain unsure of the likelihood that the selected alternative font (Monsterrat) will be consistent across all browsers/platforms.
Seemingly everything I read has contradictory information. Finally I felt like I could just use google fonts but now see that this poses problems with GDRP compliance.
I do not know how to take action. I am looking for advice on getting a font set up that is either my #1 preferred font (Gotham) OR an acceptable alternative that is truly web safe(high importance to me).
The issue you’re facing with the custom font not displaying correctly on Safari could be due to a combination of factors, including the font format, browser compatibility, and how the font is implemented in your theme. Here are some insights and suggestions to help you address the problem:
-
Font format and compatibility: Different browsers support different font formats. It’s important to ensure that your custom font is in a format compatible with most modern browsers. The preferred formats are WOFF and WOFF2, as they have good support across browsers. If you’re using an OTF font, you might consider converting it to the WOFF or WOFF2 format using an online converter tool.
-
Theme and app compatibility: In some cases, the issue could be specific to the font app you’re using or the theme itself. If you suspect that the app you installed might be causing the problem, you can try reaching out to the app developer’s support team for assistance. They should be able to provide guidance on troubleshooting the font display issue within their app’s framework.
-
Manual font installation: If you’re open to alternative approaches, you can consider manually uploading the custom font to your theme without relying on an app. This typically involves adding the font files to your theme’s assets and making modifications to your theme’s code to reference and apply the font. While the exact steps may vary depending on your theme, this approach gives you more control over the font implementation.
-
Web-safe font alternatives: If achieving consistent font display across all browsers and platforms is a high priority, using web-safe fonts is recommended. These fonts are widely supported and typically don’t require any additional setup or compatibility concerns. Examples of commonly used web-safe fonts include Arial, Helvetica, Times New Roman, Verdana, and Georgia. You can choose a web-safe font that closely resembles Gotham and update your theme’s font settings to use it as a fallback option.
-
Testing and fallback options: Regardless of the font you choose, it’s important to test its display across different browsers and platforms to ensure consistency. Some variations in font rendering might still occur due to differences in operating systems, browser versions, or device settings. By setting up fallback fonts in your CSS code, you can specify alternative fonts that will be used if the primary font isn’t available or fails to load. This helps to ensure that your text remains readable even if the preferred font doesn’t display correctly.
2 Likes
Thank you so much for your help. If you do not mind responding again, I have some additional questions. Thank you for your willingness to help!
App help has been worthless. I used .otf files so will change this and maybe this will help. I suppose I figure this out, if I cannot get my preferred custom font to work, I will use a similar font offered directly through the typography section in spotify. Per your advice I will also set up a fallback font. Rather, I will pay someone who knows what they are doing to do this for me.
Web safe fonts - Within the typography settings on shopify there are two font categories: “System Fonts,” and “Other Fonts.” Are all of these considered websafe? Or only “system fonts.” Do you know if “other fonts” are hosted by third parties that could be taking me out of GDPR compliance? You may not be able to answer this following and it sure seems to be a grey area topic right now.
Thanks again
Thank you so much for your help. If you do not mind responding again, I have some additional questions. Thank you for your willingness to help!
App help has been worthless. I used .otf files so will change this and maybe this will help. I suppose I figure this out, if I cannot get my preferred custom font to work, I will use a similar font offered directly through the typography section in spotify. Per your advice I will also set up a fallback font. Rather, I will pay someone who knows what they are doing to do this for me.
Web safe fonts - Within the typography settings on shopify there are two font categories: “System Fonts,” and “Other Fonts.” Are all of these considered websafe? Or only “system fonts.” Do you know if “other fonts” are hosted by third parties that could be taking me out of GDPR compliance? You may not be able to answer this following and it sure seems to be a grey area topic right now.
Thanks again