Section of stylesheet showing how variables are assigned & how filters are applied - https://www.shopify.com/partners/blog/font-picker

updated-fonts-filters.css

{% assign header_font = settings.header_font_new %}
{% assign base_font = settings.base_font_new %}

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

{%- assign base_font_bold = base_font | font_modify: 'weight', 'bolder' -%}
{%- 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_italic | font_face }}
{{ base_font_bold_italic | font_face }}