Hi, I have a problem, because custom fonts are not showing on MAC OS or iOS, but are normally visible on Windows and Android devices. The issue is not browser related. My site is still password protected.
My solution for using custom fonts on my site is as follows:
-
I have uploaded the KoHo font via Files and copied the link od the CDN location.
-
I have created a new Snippet called: custom-fonts.liquid with this code:
- I added {% include ‘custom-fonts’ %} at the end of: theme.liquid, just befor the ending of body.
Maybe this method is not the right way to add the custom fonts. If not please let me know what to do, so that the custom fonts will be visible on all plaftorms and/or devices.
The store: https://64cecd.myshopify.com/ is still under password, but here is the preview link: https://7xtyxucc90wqx823-65604550909.shopifypreview.com
I attached the screenshots of the both 1. right fonts loaded and 2. the unloaded fonts webpages:
Thanks, but I have not used that way to add custom fonts.
@LoisonSI
Hello,
Are You Used This Type If Not So Please Use
- Go to Online Store->Theme->Edit code
2.Asset->/Addd ->upload your custom font all font tyep = TTF, OTF, WOFF, WOFF2, SVG
- Asset->/styles.css->paste below code at the bottom of the file.
@font-face {
font-family: 'Montserrat-Regular';
src: url('{{ 'Montserrat-Regular.eot?' | asset_url }}');
src: url('{{ 'Montserrat-Regular.eot??#iefix' | asset_url }}') format('embedded-opentype'),
url('{{ 'Montserrat-Regular.woff' | asset_url }}') format('woff'),
url('{{ 'Montserrat-Regular.ttf' | asset_url }}') format('truetype'),
url('{{ 'Montserrat-Regular.svg#Montserrat-Regular' | asset_url }}') format('svg');
font-weight: normal;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: antialiased;
}
can you please just change font name, for example, Montserrat-Regular to your custom font name
Hi, @oscprofessional I have done exactly like you suggested, except I could not add the .ttf type of font, because the system would not upload it as an asset. File is not supported:
Anyway the problem remains as described above. Do you have any other suggestions on how I could solve it? Or anybody else?
I have also tried to remove the password for the shop, but the problem still persisted.
Here is the new link for preview:
https://tf5gke3ybs63r1qb-65604550909.shopifypreview.com
