Font Settings

Font Settings (settings)

Defines the map of base font settings for the theme. The existing value is a map of settings that define the font families for body text and code elements.

You can add new keys or replace the values for existing ones. You don’t need to keep the full list of all styles in your own configuration file. Only specify the values you want to add or replace.

For more information on creating your own settings, see Defined Font Settings.

JSON Schema

Definition
{
  "$id": "https://platen.io/modules/platen/config/site/theme/fonts/settings/schema.json",
  "$schema": "https://json-schema.org/draft/2020-12/schema",
  "description": "Optional settings for configuring fonts on a Platen site.\n\nhttps://platen.io/modules/platen/config/site/theme/fonts/settings/",
  "patternProperties": {
    ".": {
      "description": "All settings groups must define the [sref:`Selector`] and [sref:`Family`] properties. This\nallows theme developers and site maintainers to override where the setting gets applied and\nwhat font families get applied.\n\n\u003c!-- Reference Links --\u003e\n[sref:`family`]: platen.site.theme.fonts.settings.pattern-any.family\n[sref:`selector`]: platen.site.theme.fonts.settings.pattern-any.selector\n\n\nhttps://platen.io/modules/platen/config/site/theme/fonts/settings/#.",
      "properties": {
        "family": {
          "description": "Specify a font-family list to apply to the specified selector.\n\nhttps://platen.io/modules/platen/config/site/theme/fonts/settings/#family",
          "title": "Font Family",
          "type": "string"
        },
        "mixins": {
          "description": "Specify a font-family list to apply to the specified selector.\n\nhttps://platen.io/modules/platen/config/site/theme/fonts/settings/#mixins",
          "items": {
            "type": "string"
          },
          "title": "SCSS Mixins to Include",
          "type": "array"
        },
        "selector": {
          "description": "Specify a valid SCSS selector to set the font family for.\n\nhttps://platen.io/modules/platen/config/site/theme/fonts/settings/#selector",
          "title": "CSS Selector",
          "type": "string"
        }
      },
      "title": "Defined Font Settings",
      "type": "object"
    }
  },
  "properties": {
    "body": {
      "default": {
        "family": "'Roboto', sans-serif",
        "selector": "body"
      },
      "description": "Settings for the font of body text.\n\nhttps://platen.io/modules/platen/config/site/theme/fonts/settings/#body",
      "title": "Body Font Settings",
      "type": "object"
    },
    "code": {
      "default": {
        "family": "'Roboto Mono', monospace",
        "selector": "code"
      },
      "description": "Settings for the font of inline and block code.\n\nhttps://platen.io/modules/platen/config/site/theme/fonts/settings/#code",
      "title": "Code Font Settings",
      "type": "object"
    }
  },
  "title": "Font Settings",
  "type": "object"
}

Code Font Settings (code)

Defines the font settings for inline and block code on the site. By default, the selector is code, which applies the fonts to everything in that element. The family is set to ‘Roboto Mono’, monospace. The Roboto Mono font is bundled with Platen.

<h3 id="code.default">Default Value</h3>

{
  &#34;family&#34;: &#34;&#39;Roboto Mono&#39;, monospace&#34;,
  &#34;selector&#34;: &#34;code&#34;
}

Body Font Settings (body)

Defines the font settings for body text on the site. By default, the selector is body, which applies the fonts to everything. The family is set to ‘Roboto’, sans-serif. The Roboto font is bundled with Platen.

<h3 id="body.default">Default Value</h3>

{
  &#34;family&#34;: &#34;&#39;Roboto&#39;, sans-serif&#34;,
  &#34;selector&#34;: &#34;body&#34;
}

Pattern Properties

Defined Font Settings (Pattern: .)

All settings groups must define the Selector and Family properties. This allows theme developers and site maintainers to override where the setting gets applied and what font families get applied.

JSON Schema

Definition
{
  "description": "All settings groups must define the [sref:`Selector`] and [sref:`Family`] properties. This\nallows theme developers and site maintainers to override where the setting gets applied and\nwhat font families get applied.\n\n\u003c!-- Reference Links --\u003e\n[sref:`family`]: platen.site.theme.fonts.settings.pattern-any.family\n[sref:`selector`]: platen.site.theme.fonts.settings.pattern-any.selector\n\n\nhttps://platen.io/modules/platen/config/site/theme/fonts/settings/",
  "properties": {
    "family": {
      "description": "Specify a font-family list to apply to the specified selector.\n\nhttps://platen.io/modules/platen/config/site/theme/fonts/settings/#family",
      "title": "Font Family",
      "type": "string"
    },
    "mixins": {
      "description": "Specify a font-family list to apply to the specified selector.\n\nhttps://platen.io/modules/platen/config/site/theme/fonts/settings/#mixins",
      "items": {
        "type": "string"
      },
      "title": "SCSS Mixins to Include",
      "type": "array"
    },
    "selector": {
      "description": "Specify a valid SCSS selector to set the font family for.\n\nhttps://platen.io/modules/platen/config/site/theme/fonts/settings/#selector",
      "title": "CSS Selector",
      "type": "string"
    }
  },
  "title": "Defined Font Settings",
  "type": "object"
}

CSS Selector (selector)

Specify a valid SCSS selector to set the font family for. If this value isn’t specified, Platen uses the downcased name of the group as the selector. For example, Details would use details as the SCSS selector.

We strongly encourage you to provide a value for this setting instead of relying on that default behavior.

For more information about SCSS selectors, see the SCSS documentation.

Font Family (family)

Specify a valid font-family to apply to the defined selector. This value can include any fonts defined in theme.fonts.styles or a default web font.

SCSS Mixins to Include (mixins)

Specify the name of a mixin defined in theme.fonts.styles to include it for the specified selector.

Edit this page