Shopify themes, liquid, logos, and UX
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:
Other computers:
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");
}
Hey Community 👋 Did you know that March 15th is National Everything You Think Is W...
By JasonH Apr 1, 2025Discover how to increase the efficiency of commerce operations with Shopify Academy's l...
By Jacqui Mar 26, 2025Shopify and our financial partners regularly review and update verification requiremen...
By Jacqui Mar 14, 2025