Shopify themes, liquid, logos, and UX
Hello,
I am using the Baseline theme for my website
https://treeing-us.myshopify.com/
& I have 3 custom fonts that I want to use for the website.
I currently have them uploaded in my Assets folder for the Baseline theme.
What actions do I have to take next to apply the fonts to replace the current fonts?
the password is trauff
hi @1015 thanks for writing.
To get started, you will first need to upload the font into the Assets folder of your theme.
To get to the Assets folder of your theme, navigate to your Shopify dashboard. From here, go to: Online Store > Actions > Edit Code
Scroll down till you find the Assets folder and click add a new asset, select your font file and hit upload asset.
Next up: telling your theme that it can use the font file that you have uploaded.
Go to your theme's main CSS file (usually named styles.scss.liquid, theme.scss.liquid, or another variation of this). This file can be found in the Assets folder of your theme - navigate to the bottom of this file to add new code into your theme.
Add the code below, replacing highlighted elements of the code with actual data.
Font name > the name of the font, if the font has more than one word in it's name it will need "quotation marks" - these will also be needed when inserting into Shogun.
Filename > the name of the file that was just uploaded to your theme including the file extension, for example, cosmic_sans_bold.ttf.
Format > the format of the font that was uploaded, for example, for Athena.ttf this would be "TrueType".
@font-face {
font-family: "Font name";
src: url({{ "Filename" | asset_url }}) format("Format");
}
Available font formats: "woff", "woff2", "truetype", "opentype", "embedded-opentype" and "svg".
@font-face {
font-family: 'treeing_boldbold';
src: url('treeingbold-001-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'treeing-skinnyregular';
src: url('treeing-skinny-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
I added this to "theme.css" in Assets folder but nothing is happening.
These are the fonts I uploaded.
please go to settings of your theme customization and in typography do you found these fonts! @1015
I don't see them in the theme typography. Can you please help me 😞
Did you end up solving the problem? I'm having the same issue.
hey, no i didnt. let me know if you do find a solution 😞
Upload your font to the Assets folder-
Online Store > Themes > ... (left of customize) > Edit code
Left pane > Assets > Add new asset
Open the file found here-
Snippets > css-variables.liquid.
Add the following code to the end of the page, before the closing </style> tag.
@font-face {
font-family: "your-font";
src: url("{{'file-name.woff2' | asset_url}}") format("woff2"),
url("{{'SuisseIntl-Regular-WebS.woff' | asset_url}}") format("woff");
}
your-font = how you'll reference the font in your html
file-name = file name in the assets folder
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