Liquid, JavaScript, themes, sales channels
Hi,
We're trying to implement Times NR Condensed and Mabry fonts on our unpublished broadcast theme. We uploaded the .woff and .woff2 font files to Assets and we've tried adding the following code to font-settings.css.liquid, theme.css, and theme.dev.css but no luck. Help!
// Headings
{{ settings.typography_headings_new | font_face: font_display: 'swap' }}
{% assign header_font = settings.typography_headings_new %}
$font-stack-header: {{ header_font.family }}, {{ header_font.fallback_families }};
$font-weight-header: {{ header_font.weight }};
$font-style-header: {{ header_font.style }};
@mixin font-head(){
font-family: $font-stack-header;
// font-weight: $font-weight-header;
font-style: $font-style-header;
}
// Body (main)
@font-face {
font-family: "Mabry Regular Pro";
src: url("mabry-regular-pro.woff2") format("woff2"),
url("mabry-regular-pro.woff") format("woff");
}
@font-face {
font-family: "Mabry Italic Pro";
src: url("mabry-italic-pro.woff2") format("woff2"),
url("mabry-italic-pro.woff") format("woff");
}
@font-face {
font-family: "Mabry Medium Pro";
src: url("mabry-medium-pro.woff2") format("woff2"),
url("mabry-medium-pro.woff") format("woff");
}
@font-face {
font-family: "Mabry Medium Italic Pro";
src: url("mabry-medium-italic-pro.woff2") format("woff2"),
url("mabry-medium-italic-pro-pro.woff") format("woff");
}
@font-face {
font-family: "Mabry Bold Pro";
src: url("mabry-bold-pro.woff2") format("woff2"),
url("mabry-bold-pro.woff") format("woff");
}
@font-face {
font-family: "Mabry Black Pro";
src: url("mabry-black-pro.woff2") format("woff2"),
url("mabry-black-pro.woff") format("woff");
}
@font-face {
font-family: "Times NR Condensed";
src: url("00590992-f8d4-4b73-a92c-5a09c9c2ca51.woff2") format("woff2"),
url("6209c5ee-1a7b-4153-8287-bcc24203369b.woff") format("woff");
}
@font-face {
font-family: "Times NR Condensed Italic";
src: url("5cb1a3d6-1935-4a44-877d-915553462251.woff2") format("woff2"),
url("f938af5f-2049-47ae-af38-1102bb733117.woff") format("woff");
}
h1 {font-family: "Times NR Condensed" !important;
//font-stretch: extra-condensed;
letter-spacing: -.04em;
}
h2 {font-family: "Times NR Condensed" !important;
//font-stretch: extra-condensed;
letter-spacing: -.04em;
}
h3 {font-family: "Times NR Condensed" !important;
//font-stretch: extra-condensed;
letter-spacing: -.04em;
}
h4, h5, h6 {font-family: "Mabry Medium Pro" !important;
letter-spacing: -.03em;
}
ul, ol {font-family: "Mabry Medium Pro" !important;
letter-spacing: -.03em;
}
p {font-family: "Mabry Regular Pro" !important; letter-spacing: -.03em;
}
p.subtitle, p.site-box.box__slideshow-split, p.slideshow-item {font-family: "Mabry Italic Pro" !important; letter-spacing: -.03em !important;
}
p.caption {font-family: "Mabry Medium Pro" !important; letter-spacing: -.03em !important;
}
table {font-family: "Mabry Regular Pro" !important; letter-spacing: -.03em;
}
div {font-family: "Mabry Regular Pro" !important;
font-weight: 400; letter-spacing: -.03em;
}
a {font-family: "Mabry Medium Pro" !important;
letter-spacing: -.03em;
}
a.klaviyo-bis-trigger {font-family: "Mabry Black Pro" !important;
letter-spacing: -.03em;
color: #467042;
text-align: center;
}
li {font-family: "Mabry Regular Pro" !important; letter-spacing: -.03em;
}
body {font-family: "Mabry Regular Pro" !important; letter-spacing: -.03em;
font-weight: 300;
}
blockquote {font-family: "Mabry Italic Pro" !important; letter-spacing: -.03em;
}
{% assign body_font = settings.typography_body_new %}
{{ body_font | font_face: font_display: 'swap' }}
$font-stack-body: {{ body_font.family }}, {{ body_font.fallback_families }};
$font-weight-body: {{ body_font.weight }};
$font-style-body: {{ body_font.style }};
{%- assign body_font_bold = body_font | font_modify: 'weight', 'bold' -%}
{%- assign body_font_italic = body_font | font_modify: 'style', 'italic' -%}
{%- assign body_font_bold_italic = body_font_bold | font_modify: 'style', 'italic' -%}
$bodyFontBoldWeight: 350;
{%- if body_font_bold -%}
{{ body_font_bold | font_face: font_display: 'swap' }}
$bodyFontBoldWeight: {{ body_font_bold.weight }};
{%- endif -%}
{%- if body_font_italic -%}
{{ body_font_italic | font_face: font_display: 'swap' }}
{% endif %}
{%- if body_font_bold_italic -%}
{{ body_font_bold_italic | font_face: font_display: 'swap' }}
{%- endif -%}
@mixin font-body(){
font-family: $font-stack-body;
font-weight: $font-weight-body;
font-style: $font-style-body;
Hi jenilysm
i don't know what is issue but can you check this link it's help you. Also let me know which theme are you using and which tag you need to change font like h1. to 6 or any other so i will try to check my theme.
https://ecomexperts.io/blogs/liquid-tutorial-shopify/shopify-font
https://support.weareunderground.com/article/272-how-do-i-add-a-custom-font-to-my-theme
If helpful then please Like and Accept Solution.
For Design, Development and custom changes Hire Me.
Skype: live:hardikradadiya355
Thanks
@jenilysm
Have you tried this tutorial to implement custom fonts yet? It should do the trick for you. Let me know if you need any help.
Kind regards,
Diego
@jenilysm
Please share your store's URL with us so we can take a look into it and further assist.
ilysm-shop.myshopify.com
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