Unable to render custom font in different browsers

Technical Q&A
1

These are the steps I have taken to render my custom font in safari, all of which have been unsuccessful:

  • downloaded font assets within the code editor: .eot .tff. woff .woff2

  • the code used:

@font-face {
font-family: “CaviarDreams”;
src:
url(‘{{ ‘Caviar_Dreams.eot’ | asset_url }}’) format(‘eot’),
url(‘{{ ‘Caviar_Dreams.ttf’ | asset_url }}’) format(‘ttf’),
url(‘{{ ‘CaviarDreams.woff’ | asset_url }}’) format(“woff”),
url(‘{{ ‘CaviarDreams.woff2’ | asset_url }}’) format(“woff2”);
};

$heading-font: “CaviarDreams”;

.product-title.h4, h1, h2, h3, h4, h5, p, .p, .a, .small, .product-subtitle.mb0 {
font-family: CaviarDreams !important;
}
.product-loop__item .product-subtitle {
font-family: CaviarDreams;
}

  • {% render ‘custom-fonts’ %} in theme.liquid

The site in question is www.colllanna.it

Your help is much appreciated

2

I’m Richard Nguyen - CRO Expert at PageFly- Free Landing Page Builder.

Regarding your concern about displaying custom font on Safari but it is not working. I checked the way you set up for custom font, and that is already good, so I think that the only issue here is Safari - OS devices do not support that font yet

You can switch to Google Fonts and find a similar to the font you want

Or maybe the font you download is not assembled properly.
You should try downloading on this site: https://www.dafont.com/caviar-dreams.font many many highly recommended to download on this.

If you feel my answer is helpful, like it or mark it as a solution. Let me know if you have any questions.

Best regards,

Richard | PageFly