Why aren't custom fonts displaying in my Shopify Broadcast theme?

jenilysm
Tourist
4 0 1

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;

Replies 5 (5)

hardik355
Shopify Partner
234 22 34

Hi  

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

If helpful then please Like and Accept Solution.
For App Development and Design changes Hire Me.
Skype: live:hardikradadiya355
Thanks

diego_ezfy
Shopify Partner
2936 562 883

@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

◦ Follow my blog & youtube for coding tutorials. Most questions in here are already answered there!
◦ Top #4 Shopify Expert, 24h reply. Click here to hire me.
Download copy/paste code snippets that can replace most apps.

jenilysm
Tourist
4 0 1
I just tried this and it's not working for me unfortunately!
diego_ezfy
Shopify Partner
2936 562 883

@jenilysm 

Please share your store's URL with us so we can take a look into it and further assist.

◦ Follow my blog & youtube for coding tutorials. Most questions in here are already answered there!
◦ Top #4 Shopify Expert, 24h reply. Click here to hire me.
Download copy/paste code snippets that can replace most apps.

jenilysm
Tourist
4 0 1

ilysm-shop.myshopify.com