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");
}
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024