FROM CACHE - en_header

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)
DelightLoyalty
Shopify Partner
994 83 123

@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 Loyalty - Increase repeat sales quickly and build lifelong customers loyalty.