Font_Picker Implementation Issues

Highlighted
New Member
3 0 0

Hi,

I'm in the process of developing my first Shopify Theme and need a way for users to easily change fonts. I've reviewed the font_picker documentation but have had no success after multiple attempts.

Issue: In the Shopify Admin, I am able to make font selections through the customize screens. The problem is the selections do not change the live preview, and when I do save the selections, it does not change the font in production (live). Is there something fundamental that the documentation does not cover? I have tried to study how the Debut Theme implements this and while it functions well in that theme, I cannot seem to replicate in mine. I've spent several weeks trying to figure this out on my own, but I figured someone on here who's implemented before could possibly help! Thank you all in advance.

settings_schema.json

 

 

      "name": "Typography",
      "settings": [
        {
          "type": "font_picker",
          "label": "Global",
          "id": "global_font_new",
          "default": "lato_n4"
        },
        {
          "type": "font_picker",
          "label": "Name",
          "id": "name_font_new",
          "default": "lato_n4"
        }
    ]

 

 


CSS (style.scss.liquid)

 

 

{% assign header_font = settings.name_font_new %}
{% assign base_font = settings.global_font_new %}

{{ header_font | font_face }}
{{ base_font | font_face }}

{%- assign base_font_bolder = base_font | font_modify: 'weight', 'bolder' -%}
{%- assign base_font_bold = base_font | font_modify: 'weight', 'bold' -%}
{%- assign base_font_italic = base_font | font_modify: 'style', 'italic' -%}
{%- assign base_font_bold_italic = base_font_bold | font_modify: 'style', 'italic' -%}

{{ base_font_bold | font_face }}
{{ base_font_bolder | font_face }}
{{ base_font_italic | font_face }}
{{ base_font_bold_italic | font_face }}

$font-weight-body--bold: {{ base_font_bold.weight | default: 700 }};
$font-weight-body--bolder: {{ base_font_bolder.weight | default: 700 }};

$font-stack-header: {{ header_font.family }}, {{ header_font.fallback_families }};
$font-style-header: {{ header_font.style }};
$font-weight-header: {{ header_font.weight }};

$font-stack-body: {{ base_font.family }}, {{ base_font.fallback_families }};
$font-style-body: {{ base_font.style }};
$font-weight-body: {{ base_font.weight }};

$font-size-header: {{ settings.type_header_base_size }} * 1px;

$font-size-base: {{ settings.type_base_size }}px; // Henceforth known as 1em

$font-stack-cart-notification: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;

$font-size-mobile-input: 16px;
a.navbar-brand {
    font-family: $font-stack-header;
}

 

 

 I also tried this...

 

 

a.navbar-brand {
    font-family: {{ settings.name_font_new }};
}

 

 

 

0 Likes