Adding & using shopify fonts with schema settings

How to add custom fonts in shopify theme using theme settings in this tutorial we are using font_picker for select font for heading and for body you can create multiple fonts for different sections like heading font, body font, navbar font and so on….

You’ll learn
=> Custom font add
=> Dynamic font size change

settings_schema.json

[
  
  {
    "name":"Typography",
    "settings":[
      {
        "type":"header",
        "content":"Heading Font Styles"
      },
      {
        "type":"font_picker",
        "id":"header_text_font",
        "label": "Font Family",
        "default": "mono"
      },
      {
        "type":"header",
        "content":"Body Font Styles"
      },
      {
        "type":"font_picker",
        "id":"body_text_font",
        "label":"Font Family",
        "default":"mono"
      },
      {
        "type":"header",
        "content":"Body Font Size"
      },
      {
        "type":"range",
        "id":"body_font_size",
        "label":"Body Font Size",
        "default":16,
        "unit": "px",
        "min":13,
        "max":25,
        "step":1
      }
    ]
  }
  ]

font-size-and-font-family.css.liquid

{% assign font_header = settings.header_text_font %}
{% assign font_body = settings.body_text_font %}
{% assign font_body_size = settings.body_font_size %}

{{ font_header | font_face }}
{{ font_body | font_face }}

h1, h2, h3, h4, h5, h6 {
  font-family:{{ font_header.family }}, {{ font_header.fallback_families }}
}

body {
  font-family:{{ font_body.family }}, {{ font_body.fallback_families }};
  font-size:{{ font_body_size }}px;
}

theme.liquid

 
{{ 'font-size-and-font-family.css' | asset_url | stylesheet_tag }}

Screen shot

Leave a Reply Cancel reply