Custom Font on Flow Theme Displaying on only my computer

pjk3635
Tourist
13 0 2

Hi there,

I've installed a custom font by uploading the ttf file into Assets and adding the following code in custom.css. However when I go on any other computer the font doesn't display correctly. How do I correct this? Thank you!

________________________________________________________________________________________________________

 

@font-face {

font-family: "Queens-Regular";

src: url('{{ "Queens-Regular.ttf" | asset_url }}') format("truetype"),}

h1, h1 a, h2, h2 a, h3, h3 a, h4, h4 a, h5, h5 a, h6, h6 a, #nav li a, div.title a, .headline, .subtitle { font-family: 'Queens-Regular' !important; }

@font-face {

font-family: "BodyText-FitRegular";

src: url('{{ "BodyText-FitRegular.ttf" | asset_url }}') format("truetype"),}

p #nav li a, div.title a, .headline, .subtitle { font-family: 'BodyText-FitRegular' !important; }


@font-face {

font-family: "BodyText-LargeBold";

src: url('{{ "BodyText-LargeBold.ttf" | asset_url }}') format("truetype"),}

 

span, #nav li a, div.title a, .headline, .subtitle { font-family: 'BodyText-LargeBold' !important; a {
}

@font-face {

font-family: "PlayfairDisplay-Italic";

src: url('{{ "PlayfairDisplay-Italic.ttf" | asset_url }}') format("truetype"),}

_______________________________________________________________________

My computer:

Screen Shot 2022-04-11 at 10.58.38 PM.png

 

Other computers:

IMG_3760.JPG

 

Reply 1 (1)

DelightCart
Shopify Partner
1238 82 157

@pjk3635 

 

1. To get to the Assets folder of your theme, navigate to your Shopify dashboard. From here, go to: Online Store > Actions > Edit Code

2.Scroll down till you find the Assets folder and click add a new asset, select your font file and hit upload asset.

3. Go to your theme's main CSS file (usually named styles.scss.liquid, theme.scss.liquid, or another variation of this).

4. Add the code below.

 

@font-face {
    font-family: "Font name";
    src: url({{ "Filename" | asset_url }}) format("Format");
}
Delight Cart - It's time to turn your visitors into loyal shoppers! 

Delight Loyalty - Increase repeat sales quickly and build lifelong customers loyalty.