Custom Font - 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;

0 Likes
hardik355
Shopify Partner
184 16 25

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

0 Likes

@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

◦ Slideshow section not looking good? Try the Slideshow (PRO) section. No apps required.
◦ Product page images slider for free themes (w/ 20+ customization options): Minimal | Debut | Brooklyn | Supply
◦ If my answer helps you please click on like and Accept as solution!
0 Likes
jenilysm
Tourist
4 0 1
I just tried this and it's not working for me unfortunately!
0 Likes

@jenilysm 

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

◦ Slideshow section not looking good? Try the Slideshow (PRO) section. No apps required.
◦ Product page images slider for free themes (w/ 20+ customization options): Minimal | Debut | Brooklyn | Supply
◦ If my answer helps you please click on like and Accept as solution!
0 Likes
jenilysm
Tourist
4 0 1

ilysm-shop.myshopify.com

0 Likes