Shopify themes, liquid, logos, and UX
Hello, I have added my custom fonts into my assets in the theme editor but they don't show in the library. I can't select them. Can someone help? I am using the Symmetry theme.
Solved! Go to the solution
This is an accepted solution.
Hi @oneshot
This is Richard from PageFly - Shopify Page Builder App
Please add this code to your theme.liquid above the </head> to get this solved
Step 1: Online Stores > Themes > More Actions > Edit code
Step 2: click on theme.liquid and paste the code above the </head>
<style>
@font-face {
font-family: 'bruliavariabletest';
src: url('{{'bruliavariabletest-display.woff' | asset_url}}');
}
@font-face {
font-family: 'bruliavariabletest-display';
src: url('{{'bruliavariabletest-display.woff2' | asset_url}}');
}
</style>
Hope this can help you solve the issue
Best regards,
Richard | PageFly
Please let me know if it works by giving it a Like or marking it as a solution!
➜ Optimize your Shopify store with PageFly Page Builder (Free plan available)
All features are available from Free plan. Live Chat Support is available 24/7.
Hi @oneshot
You have uploaded the fonts to assets but to fetch the fonts you need to add below CSS code to theme.liquid
<style>
@font-face {
font-family: 'bruliavariabletest';
src: url('{{'bruliavariabletest-display.woff' | asset_url}}');
}
@font-face {
font-family: 'bruliavariabletest-display';
src: url('{{'bruliavariabletest-display.woff2' | asset_url}}');
}
</style>
Anywhere in the theme liquid?
This is an accepted solution.
Hi @oneshot
This is Richard from PageFly - Shopify Page Builder App
Please add this code to your theme.liquid above the </head> to get this solved
Step 1: Online Stores > Themes > More Actions > Edit code
Step 2: click on theme.liquid and paste the code above the </head>
<style>
@font-face {
font-family: 'bruliavariabletest';
src: url('{{'bruliavariabletest-display.woff' | asset_url}}');
}
@font-face {
font-family: 'bruliavariabletest-display';
src: url('{{'bruliavariabletest-display.woff2' | asset_url}}');
}
</style>
Hope this can help you solve the issue
Best regards,
Richard | PageFly
Please let me know if it works by giving it a Like or marking it as a solution!
➜ Optimize your Shopify store with PageFly Page Builder (Free plan available)
All features are available from Free plan. Live Chat Support is available 24/7.
Thanks for the hint; how can I then reference this font family in the headers or various parts of the theme? (base_font, navigation h1..)
Thanks @PageFly-Richard so I added this - then called it out in the Custom CSS in the content block, my css is working in that the font does change, but to Times New Roman - so somewhere it is not pulling in the custom font. I have both .woff and .woff2 added this is the custom css I have:
.text-overlay__title {
font-family: “landry-gothic” !important;
}
And this is what I added right above </head>
<style>
@font-face {
font-family: 'landry-gothic';
src: url('{{'Landry-Gothic.woff' | asset_url}}');
}
@font-face {
font-family: 'landry-gothic';
src: url('{{'Landry-Gothic.woff2' | asset_url}}');
}
</style>
Any ideas?
Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025Expand into selling wholesale with Shopify Academy’s learning path, B2B on Shopify: Lau...
By Shopify Jan 28, 2025