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 17 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 or cutting off? Try the Slideshow (PRO) section. No apps required.
◦ Replace apps with copy/paste code snippets. Examples here.
◦ In need of coding help? I'm available for hire! ezfycode@gmail.com
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 or cutting off? Try the Slideshow (PRO) section. No apps required.
◦ Replace apps with copy/paste code snippets. Examples here.
◦ In need of coding help? I'm available for hire! ezfycode@gmail.com
0 Likes
jenilysm
Tourist
4 0 1

ilysm-shop.myshopify.com

0 Likes