---
title: "font"

doc_type: static
doc_category: static
doc_version: v20270301
source_url:
  html: 'https://developer.shopline.com/docs/sline/object/font'
  md: 'https://developer.shopline.com/docs/sline/object/font.md'
---

# font


    The font in the settings of a font selector.

    You can use the `font` object within HTML resources or style tags to apply font settings to your theme’s CSS.



## Properties

    <div>
    

        
<ObjectProperty 
    name="fallback_families"
    types={[<Mdx>string</Mdx>]}
>
<ObjectSummary>
The fallback font families.


</ObjectSummary>
</ObjectProperty>
        
<ObjectProperty 
    name="family"
    types={[<Mdx>string</Mdx>]}
>
<ObjectSummary>
The name of the primary font family.


</ObjectSummary>
</ObjectProperty>
        
<ObjectProperty 
    name="style"
    types={[<Mdx>string</Mdx>]}
>
<ObjectSummary>
The font style.


</ObjectSummary>
</ObjectProperty>
        
<ObjectProperty 
    name="system"
    types={[<Mdx>boolean</Mdx>]}
>
<ObjectSummary>
Whether the font is a system font.
- `true`: The font is a system font.
- `false`: The font is not a system font.


</ObjectSummary>
</ObjectProperty>
        
<ObjectProperty 
    name="weight"
    types={[<Mdx>string</Mdx>]}
>
<ObjectSummary>
The font weight.



</ObjectSummary>
</ObjectProperty>
        
    
    </div>



    
## Example

        
            

            The following example is used to set the font weight and font style for the sorting toolbar title in the theme’s global settings.


            

            
<SlineExample path={''} objects={ 
    [""] 
}>
```sline
--sort-title-font-weight: {{settings.sort_title_font.weight}};
--sort-title-font-style: {{settings.sort_title_font.style}};
```
</SlineExample>