Issue with font rendering in safari browser

Store Design
1

Hello all :smiling_face_with_sunglasses:

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

Thank you so much in advance

2

Hi @collannastore ,

To upload your font file(s), go to Sales Channels > Online Store > Themes > Actions > Edit Code and scroll down to the bottom of the sidebar.

Locate the folder named “Assets” and click to expand it. Select Add a new asset to upload the font file.

After the font is uploaded, select styles.css.liquid (also in Assets). At the bottom of the file, you’ll find instructions for using your own font. Remove the comments and any format that doesn’t apply. For example, if you don’t have ‘EOT’ format, just remove that.

/* #Font-Face
    @font-face {
        font-family: 'CaviarDreams';
        src: url('CaviarDreams.eot');
        src: url('CaviarDreams.eot?iefix') format('eot'),
             url('CaviarDreams.woff') format('woff'),
             url('CaviarDreams.ttf') format('truetype'),
             url('CaviarDreams.svg#webfontZam02nTh') format('svg');
        font-weight: normal;
        font-style: normal; }

Then apply that font to the various elements using custom CSS in the styles.scss.liquid file (also in the Assets folder).

.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' !important;
}

Thank you.