How to implement Times NR Condensed and Mabry fonts in Broadcast theme?

Technical Q&A
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;

2

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

3

@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

4

I just tried this and it’s not working for me unfortunately!

5

@jenilysm

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

6

ilysm-shop.myshopify.com