Project Data Configuration

Overview

The project data stores global configurations such as style presets, color palettes, typography settings, and responsive design variants. These configurations are essential for customizing the appearance and behavior of the application. This setup is particularly useful when you need multi-page functionality, as it allows the sharing of project data across multiple pages with consistent functionality, the same functionality when using Brizy.io.

The project data configuration is stored in JSON format, and it defines the following:

Style presets
Color palettes
Typography settings for various text elements
Responsive design variants

Structure

Top-Level Properties

Property	Description
`selectedKit`	The ID of the currently selected kit
`selectedStyle`	The ID of the currently active style from the styles array
`styles`	Array of style configuration objects
`extraFontStyles`	Array of custom typography presets (same schema as `fontStyles`; can be empty)
`font`	The default font for the application
`fonts`	Font registry (`config`, `google`, `blocks`, `upload`); see Fonts object

Style Object

Each style in the styles array includes:

id: Unique identifier for the style
title: Human-readable name for the style
colorPalette: Array of color objects defining the style's color scheme
fontStyles: Array of font style configurations for different text elements

Requirements

Color Palette Requirements

Each style must have a color palette with exactly 8 colors:

colorPalette: [
  { id: "color1", hex: "#XXXXXX" },
  { id: "color2", hex: "#XXXXXX" },
  { id: "color3", hex: "#XXXXXX" },
  { id: "color4", hex: "#XXXXXX" },
  { id: "color5", hex: "#XXXXXX" },
  { id: "color6", hex: "#XXXXXX" },
  { id: "color7", hex: "#XXXXXX" },
  { id: "color8", hex: "#XXXXXX" },
];

Font Style Requirements

Each style must include exactly these 10 font styles in this specific order:

paragraph
subtitle
abovetitle
heading1
heading2
heading3
heading4
heading5
heading6
button

Deletable Property

All font styles must have "deletable": "off". This property is used to hide the delete button from the UI and prevent users from removing essential styles.

Font Families

All font families referenced in the style definitions must exist in the fonts configuration section. Any undefined fonts will cause errors in the application.

Font Style Properties

Each font style item includes the following. The Basic properties and Responsive properties sections list fields that are required for a full preset. Text style and casing, Superscript and subscript, and Variable font axes are optional and may be omitted (booleans default to false when missing).

Basic Properties

Property	Description
`deletable`	Must be "off" for required styles
`id`	Style identifier (e.g., "paragraph")
`title`	Human-readable style name
`fontFamily`	Font family name
`fontFamilyType`	Font source (e.g., "google")
`fontSize`	Font size for desktop
`fontSizeSuffix`	Unit for font size (typically "px")
`fontWeight`	Font weight (100-900)
`lineHeight`	Line height multiplier
`letterSpacing`	Letter spacing value

Text style and casing

These boolean flags control typography appearance. They are stored on each font style item (same shape as in the editor’s typography controls). If omitted, the application treats them as false.

Property	Description
`bold`	When `true`, the global bold CSS variable uses the keyword `bold` instead of the numeric `fontWeight`.
`italic`	Italic (`font-style`).
`underline`	Underline (`text-decoration`).
`strike`	Strikethrough / line-through (`text-decoration`).
`uppercase`	Uppercase text transform.
`lowercase`	Lowercase text transform.

Superscript and subscript (optional)

Property	Description
`script`	Optional. Superscript / subscript: empty string `""` (none), `"super"`, or `"sub"`.

Variable font axes (optional)

Optional numeric settings for variable fonts. If omitted, defaults apply when generating global typography (for example weight 400, width 100, softness 0). Each axis has desktop, tablet, and mobile fields where applicable.

Property	Description
`variableFontWeight`	Variable font weight axis (desktop).
`fontWidth`	Variable font width axis (desktop).
`fontSoftness`	Variable font softness axis (desktop).
`tabletVariableFontWeight`	Weight axis for tablet.
`tabletFontWidth`	Width axis for tablet.
`tabletFontSoftness`	Softness axis for tablet.
`mobileVariableFontWeight`	Weight axis for mobile.
`mobileFontWidth`	Width axis for mobile.
`mobileFontSoftness`	Softness axis for mobile.

Responsive Properties

Each font style must also include responsive variants for tablet and mobile:

Tablet Properties

tabletFontSize
tabletFontSizeSuffix
tabletFontWeight
tabletLineHeight
tabletLetterSpacing

Mobile Properties

mobileFontSize
mobileFontSizeSuffix
mobileFontWeight
mobileLineHeight
mobileLetterSpacing

Example Configuration

Here's a simplified example of a valid style configuration:

{
  "id": "example-style",
  "title": "Example Style",
  "colorPalette": [
    { "id": "color1", "hex": "#000000" },
    { "id": "color2", "hex": "#111111" },
    { "id": "color3", "hex": "#222222" },
    { "id": "color4", "hex": "#333333" },
    { "id": "color5", "hex": "#444444" },
    { "id": "color6", "hex": "#555555" },
    { "id": "color7", "hex": "#666666" },
    { "id": "color8", "hex": "#777777" }
  ],
  "fontStyles": [
    {
      "deletable": "off",
      "id": "paragraph",
      "title": "Paragraph",
      "fontFamily": "lato",
      "fontFamilyType": "google",
      "fontSize": 16,
      "bold": false,
      "italic": false,
      "underline": false,
      "strike": false,
      "uppercase": false,
      "lowercase": false,
      // fontWeight, lineHeight, letterSpacing, responsive fields, etc.
    },
    // Other required font styles...
  ],
  "extraFontStyles": [],
  "font": "lato",
  "fonts": {
    "config": {
      "data": [
        {
          "kind": "webfonts#webfont",
          "family": "Lato",
          "category": "sans-serif",
          "variants": [
            "100",
            "100italic",
            "300",
            "300italic",
            "regular",
            "italic",
            "700",
            "700italic",
            "900",
            "900italic"
          ],
          "subsets": ["latin-ext", "latin"],
          "version": "v15",
          "lastModified": "2019-03-26",
          "files": {
            "100": "http://fonts.gstatic.com/s/lato/v15/S6u8w4BMUTPHh30wWyWrFCbw7A.ttf",
            "300": "http://fonts.gstatic.com/s/lato/v15/S6u9w4BMUTPHh7USew-FGC_p9dw.ttf",
            "700": "http://fonts.gstatic.com/s/lato/v15/S6u9w4BMUTPHh6UVew-FGC_p9dw.ttf",
            "900": "http://fonts.gstatic.com/s/lato/v15/S6u9w4BMUTPHh50Xew-FGC_p9dw.ttf",
            "100italic": "http://fonts.gstatic.com/s/lato/v15/S6u-w4BMUTPHjxsIPy-vNiPg7MU0.ttf",
            "300italic": "http://fonts.gstatic.com/s/lato/v15/S6u_w4BMUTPHjxsI9w2PHA3s5dwt7w.ttf",
            "regular": "http://fonts.gstatic.com/s/lato/v15/S6uyw4BMUTPHvxk6XweuBCY.ttf",
            "italic": "http://fonts.gstatic.com/s/lato/v15/S6u8w4BMUTPHjxswWyWrFCbw7A.ttf",
            "700italic": "http://fonts.gstatic.com/s/lato/v15/S6u_w4BMUTPHjxsI5wqPHA3s5dwt7w.ttf",
            "900italic": "http://fonts.gstatic.com/s/lato/v15/S6u_w4BMUTPHjxsI3wiPHA3s5dwt7w.ttf"
          },
          "brizyId": "uzrpsocdxtgrkbxjjxkchqcybpvpzsuvdlji"
        },
        // Other fonts...
      ]
    }
  }
}

Validation Checklist

When creating or modifying styles, ensure:

Each style has exactly 8 colors in its colorPalette
Each style includes all 10 required font styles in the correct order
All required font styles have "deletable": "off"
All font families referenced in styles are defined in the fonts section
All font styles include both tablet and mobile responsive variations

JSON Reference

Below is the complete reference JSON configuration used by the brizy. This can be used as a template when creating new styles.

Font transform keys in `fontStyles`

Each object in fontStyles may include font transform fields alongside size and weight. They are optional; if omitted, the app behaves as if they were false or script was empty.

Key	Type	Meaning
`bold`	boolean	When `true`, bold output uses the CSS keyword `bold` instead of the numeric `fontWeight`.
`italic`	boolean	Italic.
`underline`	boolean	Underline.
`strike`	boolean	Strikethrough.
`uppercase`	boolean	Uppercase text transform.
`lowercase`	boolean	Lowercase text transform.
`script`	string	`""` (none), `"super"`, or `"sub"`.

See Font Style Properties for variable-font fields and the full typography model.

Extra Font Styles

extraFontStyles is used for custom, user-created typography presets that are not part of the 10 required default styles (paragraph, heading1, etc.). While fontStyles contains the required base set, extraFontStyles extends it with additional reusable presets.

Purpose

Store additional global typography presets created in the editor
Keep custom presets separate from mandatory defaults
Reuse consistent text styling across elements and pages

Data shape

Each entry in extraFontStyles uses the same object structure as entries in fontStyles:

Basic typography fields (id, title, fontFamily, fontWeight, lineHeight, etc.)
Responsive fields (tablet*, mobile*)
Optional text transform fields (bold, italic, underline, strike, uppercase, lowercase)
Optional script and variable font axis fields

Recommended conventions

id should be unique across both fontStyles and extraFontStyles to avoid collisions when resolving presets.
title should be human-readable and unique enough for editor dropdowns.
fontFamily must exist in the fonts registry.
deletable is typically "on" for custom presets (so users can remove them), unlike required presets in fontStyles which must remain "off".

Example `extraFontStyles` entry

{
  "extraFontStyles": [
    {
      "deletable": "on",
      "id": "caption-small",
      "title": "Caption Small",
      "fontFamily": "lato",
      "fontFamilyType": "google",
      "fontSize": 12,
      "fontSizeSuffix": "px",
      "fontWeight": 400,
      "lineHeight": 1.4,
      "letterSpacing": 0.2,
      "bold": false,
      "italic": false,
      "underline": false,
      "strike": false,
      "uppercase": false,
      "lowercase": false,
      "tabletFontSize": 12,
      "tabletFontSizeSuffix": "px",
      "tabletFontWeight": 400,
      "tabletLineHeight": 1.4,
      "tabletLetterSpacing": 0.2,
      "mobileFontSize": 11,
      "mobileFontSizeSuffix": "px",
      "mobileFontWeight": 400,
      "mobileLineHeight": 1.4,
      "mobileLetterSpacing": 0.2
    }
  ]
}

Validation notes

extraFontStyles can be empty ([]) when no custom presets are defined.
If populated, validate each item with the same field expectations used for fontStyles.
Missing responsive fields can produce inconsistent rendering between desktop/tablet/mobile.

Fonts object

The top-level fonts object groups font families by source. Each key is an object with a single data array. Do not mix types: config, google, and blocks contain only Google Webfont items; upload contains only custom uploaded font entries.

Key	Content	Role
`config`	Google Webfont objects	Fonts bundled with global typography / style presets (this document).
`google`	Google Webfont objects	Extra Google Fonts at the project level (e.g. chosen in the UI).
`blocks`	Google Webfont objects	Google Fonts added when blocks reference typography (e.g. rich text).
`upload`	Uploaded font objects (`type: "uploaded"`)	Custom uploaded fonts (user-provided files).

For registering, listing, and deleting custom fonts in the editor (Custom Fonts API and config integration), see Custom Fonts.

Google font object (each item in fonts.config.data, fonts.google.data, or fonts.blocks.data)

Field	Type	Description
`kind`	`"webfonts#webfont"`	Literal marker.
`family`	`string`	Display family name (e.g. `"Lato"`).
`category`	`string`	e.g. `"sans-serif"`, `"serif"`.
`variants`	`string[]`	Weights/styles (`"regular"`, `"700"`, `"italic"`, `"700italic"`, …).
`subsets`	`string[]`	Script subsets (`"latin"`, `"latin-ext"`, …).
`version`	`string`	Font version.
`lastModified`	`string`	ISO date string.
`files`	`object`	Variant name → file URL (often `.ttf` on `fonts.gstatic.com`).
`brizyId`	`string`	Internal id.
`menu`	`string`	(Optional) Menu / preview sample URL.
`deleted`	`boolean`	(Optional) If `true`, the font is ignored.

In font styles, use fontFamilyType: "google" and set fontFamily to the normalized family id: lowercase, spaces replaced with underscores (e.g. "lato" for "Lato", "noto_serif" for "Noto Serif").

Uploaded font object (each item in fonts.upload.data)

Field	Type	Description
`id`	`string`	Stable id for the upload; must match `fontFamily` in `fontStyles` when `fontFamilyType` is `"upload"`.
`family`	`string`	Human-readable display name.
`type`	`"uploaded"`	Required literal.
`weights`	`string[]`	Available weights as strings (e.g. `["400","700"]`).
`brizyId`	`string`	Internal id.
`variations`	`array`	(Optional) Variable font axes: `{ "tag": string, "min": number, "max": number }[]`.
`deleted`	`boolean`	(Optional) If `true`, the font is ignored.

Use fontFamilyType: "upload" and set fontFamily to the upload’s id (not only the display family name).

Editor urls for loading fonts

Google Fonts: CSS is built from urls.googleFonts (see Editor config — Page mode).
Uploaded fonts: The editor builds a request URL by concatenating urls.editorFonts with a compact list of font ids and weights (fontId:weights|fontId2:weights2). Set urls.editorFonts in the editor bootstrap config to an endpoint that returns CSS (e.g. @font-face rules) for those uploads. Without a valid editorFonts URL, fonts in fonts.upload will not load in the editor or preview. Details: Editor config — Urls parameters and Example: Uploaded fonts URL (urls.editorFonts). See also Custom Fonts for the Custom Fonts API and editor setup.

{
  "selectedKit": "vnexmlshkihvcgsxmozgxzzdwsyvolvmhtne",
  "selectedStyle": "kldugntsakdckzxhreidncqvgunudghrcuzv",
  "styles": [
    {
      "id": "kldugntsakdckzxhreidncqvgunudghrcuzv",
      "title": "Default",
      "colorPalette": [
        { "id": "color1", "hex": "#191b21" },
        { "id": "color2", "hex": "#142850" },
        { "id": "color3", "hex": "#239ddb" },
        { "id": "color4", "hex": "#66738d" },
        { "id": "color5", "hex": "#bde1f4" },
        { "id": "color6", "hex": "#eef0f2" },
        { "id": "color7", "hex": "#73777f" },
        { "id": "color8", "hex": "#ffffff" }
      ],
      "fontStyles": [
        {
          "deletable": "off",
          "id": "paragraph",
          "title": "Paragraph",
          "fontFamily": "noto_serif",
          "fontFamilyType": "google",
          "fontSize": 16,
          "fontSizeSuffix": "px",
          "fontWeight": 300,
          "lineHeight": 1.7,
          "letterSpacing": 0,
          "bold": false,
          "italic": false,
          "underline": false,
          "strike": false,
          "uppercase": false,
          "lowercase": false,
          "script": "",
          "tabletFontSize": 15,
          "tabletFontSizeSuffix": "px",
          "tabletFontWeight": 300,
          "tabletLineHeight": 1.6,
          "tabletLetterSpacing": 0,
          "mobileFontSize": 15,
          "mobileFontSizeSuffix": "px",
          "mobileFontWeight": 300,
          "mobileLineHeight": 1.6,
          "mobileLetterSpacing": 0
        },
        {
          "deletable": "off",
          "id": "subtitle",
          "title": "Subtitle",
          "fontFamily": "noto_serif",
          "fontFamilyType": "google",
          "fontSize": 18,
          "fontSizeSuffix": "px",
          "fontWeight": 300,
          "lineHeight": 1.5,
          "letterSpacing": 0,
          "bold": false,
          "italic": false,
          "underline": false,
          "strike": false,
          "uppercase": false,
          "lowercase": false,
          "script": "",
          "tabletFontSize": 17,
          "tabletFontSizeSuffix": "px",
          "tabletFontWeight": 300,
          "tabletLineHeight": 1.5,
          "tabletLetterSpacing": 0,
          "mobileFontSize": 17,
          "mobileFontSizeSuffix": "px",
          "mobileFontWeight": 300,
          "mobileLineHeight": 1.5,
          "mobileLetterSpacing": 0
        },
        {
          "deletable": "off",
          "id": "abovetitle",
          "title": "Above Title",
          "fontFamily": "montserrat",
          "fontFamilyType": "google",
          "fontSize": 16,
          "fontSizeSuffix": "px",
          "fontWeight": 400,
          "lineHeight": 1.7,
          "letterSpacing": 2,
          "bold": false,
          "italic": false,
          "underline": false,
          "strike": false,
          "uppercase": false,
          "lowercase": false,
          "script": "",
          "tabletFontSize": 15,
          "tabletFontSizeSuffix": "px",
          "tabletFontWeight": 400,
          "tabletLineHeight": 1.7,
          "tabletLetterSpacing": 2,
          "mobileFontSize": 13,
          "mobileFontSizeSuffix": "px",
          "mobileFontWeight": 400,
          "mobileLineHeight": 1.7,
          "mobileLetterSpacing": 2
        },
        {
          "deletable": "off",
          "id": "heading1",
          "title": "Heading 1",
          "fontFamily": "montserrat",
          "fontFamilyType": "google",
          "fontSize": 56,
          "fontSizeSuffix": "px",
          "fontWeight": 200,
          "lineHeight": 1.3,
          "letterSpacing": -1.5,
          "bold": false,
          "italic": false,
          "underline": false,
          "strike": false,
          "uppercase": false,
          "lowercase": false,
          "script": "",
          "tabletFontSize": 40,
          "tabletFontSizeSuffix": "px",
          "tabletFontWeight": 200,
          "tabletLineHeight": 1.3,
          "tabletLetterSpacing": -1,
          "mobileFontSize": 34,
          "mobileFontSizeSuffix": "px",
          "mobileFontWeight": 200,
          "mobileLineHeight": 1.3,
          "mobileLetterSpacing": -1
        },
        {
          "deletable": "off",
          "id": "heading2",
          "title": "Heading 2",
          "fontFamily": "montserrat",
          "fontFamilyType": "google",
          "fontSize": 42,
          "fontSizeSuffix": "px",
          "fontWeight": 700,
          "lineHeight": 1.3,
          "letterSpacing": -1.5,
          "bold": false,
          "italic": false,
          "underline": false,
          "strike": false,
          "uppercase": false,
          "lowercase": false,
          "script": "",
          "tabletFontSize": 35,
          "tabletFontSizeSuffix": "px",
          "tabletFontWeight": 700,
          "tabletLineHeight": 1.3,
          "tabletLetterSpacing": -0.5,
          "mobileFontSize": 29,
          "mobileFontSizeSuffix": "px",
          "mobileFontWeight": 700,
          "mobileLineHeight": 1.3,
          "mobileLetterSpacing": -0.5
        },
        {
          "deletable": "off",
          "id": "heading3",
          "title": "Heading 3",
          "fontFamily": "montserrat",
          "fontFamilyType": "google",
          "fontSize": 32,
          "fontSizeSuffix": "px",
          "fontWeight": 600,
          "lineHeight": 1.3,
          "letterSpacing": -1,
          "bold": false,
          "italic": false,
          "underline": false,
          "strike": false,
          "uppercase": false,
          "lowercase": false,
          "script": "",
          "tabletFontSize": 27,
          "tabletFontSizeSuffix": "px",
          "tabletFontWeight": 600,
          "tabletLineHeight": 1.3,
          "tabletLetterSpacing": 0,
          "mobileFontSize": 22,
          "mobileFontSizeSuffix": "px",
          "mobileFontWeight": 600,
          "mobileLineHeight": 1.3,
          "mobileLetterSpacing": 0
        },
        {
          "deletable": "off",
          "id": "heading4",
          "title": "Heading 4",
          "fontFamily": "montserrat",
          "fontFamilyType": "google",
          "fontSize": 26,
          "fontSizeSuffix": "px",
          "fontWeight": 500,
          "lineHeight": 1.4,
          "letterSpacing": -1,
          "bold": false,
          "italic": false,
          "underline": false,
          "strike": false,
          "uppercase": false,
          "lowercase": false,
          "script": "",
          "tabletFontSize": 24,
          "tabletFontSizeSuffix": "px",
          "tabletFontWeight": 500,
          "tabletLineHeight": 1.4,
          "tabletLetterSpacing": 0,
          "mobileFontSize": 21,
          "mobileFontSizeSuffix": "px",
          "mobileFontWeight": 500,
          "mobileLineHeight": 1.4,
          "mobileLetterSpacing": 0
        },
        {
          "deletable": "off",
          "id": "heading5",
          "title": "Heading 5",
          "fontFamily": "montserrat",
          "fontFamilyType": "google",
          "fontSize": 20,
          "fontSizeSuffix": "px",
          "fontWeight": 500,
          "lineHeight": 1.5,
          "letterSpacing": 0,
          "bold": false,
          "italic": false,
          "underline": false,
          "strike": false,
          "uppercase": false,
          "lowercase": false,
          "script": "",
          "tabletFontSize": 19,
          "tabletFontSizeSuffix": "px",
          "tabletFontWeight": 500,
          "tabletLineHeight": 1.4,
          "tabletLetterSpacing": 0,
          "mobileFontSize": 18,
          "mobileFontSizeSuffix": "px",
          "mobileFontWeight": 500,
          "mobileLineHeight": 1.4,
          "mobileLetterSpacing": 0
        },
        {
          "deletable": "off",
          "id": "heading6",
          "title": "Heading 6",
          "fontFamily": "montserrat",
          "fontFamilyType": "google",
          "fontSize": 17,
          "fontSizeSuffix": "px",
          "fontWeight": 500,
          "lineHeight": 1.5,
          "letterSpacing": 0,
          "bold": false,
          "italic": false,
          "underline": false,
          "strike": false,
          "uppercase": false,
          "lowercase": false,
          "script": "",
          "tabletFontSize": 16,
          "tabletFontSizeSuffix": "px",
          "tabletFontWeight": 500,
          "tabletLineHeight": 1.4,
          "tabletLetterSpacing": 0,
          "mobileFontSize": 16,
          "mobileFontSizeSuffix": "px",
          "mobileFontWeight": 500,
          "mobileLineHeight": 1.4,
          "mobileLetterSpacing": 0
        },
        {
          "deletable": "off",
          "id": "button",
          "title": "Button",
          "fontFamily": "montserrat",
          "fontFamilyType": "google",
          "fontSize": 12,
          "fontSizeSuffix": "px",
          "fontWeight": 600,
          "lineHeight": 1.8,
          "letterSpacing": 3,
          "bold": false,
          "italic": false,
          "underline": false,
          "strike": false,
          "uppercase": false,
          "lowercase": false,
          "script": "",
          "tabletFontSize": 12,
          "tabletFontSizeSuffix": "px",
          "tabletFontWeight": 600,
          "tabletLineHeight": 1.8,
          "tabletLetterSpacing": 3,
          "mobileFontSize": 12,
          "mobileFontSizeSuffix": "px",
          "mobileFontWeight": 600,
          "mobileLineHeight": 1.8,
          "mobileLetterSpacing": 3
        }
      ]
    }
  ],
  "extraFontStyles": [],
  "font": "lato",
  "fonts": {
    "config": {
      "data": [
        {
          "kind": "webfonts#webfont",
          "family": "Lato",
          "category": "sans-serif",
          "variants": [
            "100",
            "100italic",
            "300",
            "300italic",
            "regular",
            "italic",
            "700",
            "700italic",
            "900",
            "900italic"
          ],
          "subsets": ["latin-ext", "latin"],
          "version": "v15",
          "lastModified": "2019-03-26",
          "files": {
            "100": "http://fonts.gstatic.com/s/lato/v15/S6u8w4BMUTPHh30wWyWrFCbw7A.ttf",
            "300": "http://fonts.gstatic.com/s/lato/v15/S6u9w4BMUTPHh7USew-FGC_p9dw.ttf",
            "700": "http://fonts.gstatic.com/s/lato/v15/S6u9w4BMUTPHh6UVew-FGC_p9dw.ttf",
            "900": "http://fonts.gstatic.com/s/lato/v15/S6u9w4BMUTPHh50Xew-FGC_p9dw.ttf",
            "100italic": "http://fonts.gstatic.com/s/lato/v15/S6u-w4BMUTPHjxsIPy-vNiPg7MU0.ttf",
            "300italic": "http://fonts.gstatic.com/s/lato/v15/S6u_w4BMUTPHjxsI9w2PHA3s5dwt7w.ttf",
            "regular": "http://fonts.gstatic.com/s/lato/v15/S6uyw4BMUTPHvxk6XweuBCY.ttf",
            "italic": "http://fonts.gstatic.com/s/lato/v15/S6u8w4BMUTPHjxswWyWrFCbw7A.ttf",
            "700italic": "http://fonts.gstatic.com/s/lato/v15/S6u_w4BMUTPHjxsI5wqPHA3s5dwt7w.ttf",
            "900italic": "http://fonts.gstatic.com/s/lato/v15/S6u_w4BMUTPHjxsI3wiPHA3s5dwt7w.ttf"
          },
          "brizyId": "uzrpsocdxtgrkbxjjxkchqcybpvpzsuvdlji"
        },
        {
          "brizyId": "finfbu6Sirj8",
          "family": "Noto Serif",
          "variants": [
            "100",
            "200",
            "300",
            "regular",
            "500",
            "600",
            "700",
            "800",
            "900",
            "100italic",
            "200italic",
            "300italic",
            "italic",
            "500italic",
            "600italic",
            "700italic",
            "800italic",
            "900italic"
          ],
          "subsets": ["cyrillic", "cyrillic-ext", "greek", "greek-ext", "latin", "latin-ext", "vietnamese"],
          "version": "v22",
          "lastModified": "2023-05-31",
          "files": {
            "100": "http://fonts.gstatic.com/s/notoserif/v22/ga6iaw1J5X9T9RW6j9bNVls-hfgvz8JcMofYTa32J4wsL2JAlAhZqFGjwM0Lhq_Szw.ttf",
            "200": "http://fonts.gstatic.com/s/notoserif/v22/ga6iaw1J5X9T9RW6j9bNVls-hfgvz8JcMofYTa32J4wsL2JAlAhZKFCjwM0Lhq_Szw.ttf",
            "300": "http://fonts.gstatic.com/s/notoserif/v22/ga6iaw1J5X9T9RW6j9bNVls-hfgvz8JcMofYTa32J4wsL2JAlAhZ9lCjwM0Lhq_Szw.ttf",
            "500": "http://fonts.gstatic.com/s/notoserif/v22/ga6iaw1J5X9T9RW6j9bNVls-hfgvz8JcMofYTa32J4wsL2JAlAhZmlCjwM0Lhq_Szw.ttf",
            "600": "http://fonts.gstatic.com/s/notoserif/v22/ga6iaw1J5X9T9RW6j9bNVls-hfgvz8JcMofYTa32J4wsL2JAlAhZdlejwM0Lhq_Szw.ttf",
            "700": "http://fonts.gstatic.com/s/notoserif/v22/ga6iaw1J5X9T9RW6j9bNVls-hfgvz8JcMofYTa32J4wsL2JAlAhZT1ejwM0Lhq_Szw.ttf",
            "800": "http://fonts.gstatic.com/s/notoserif/v22/ga6iaw1J5X9T9RW6j9bNVls-hfgvz8JcMofYTa32J4wsL2JAlAhZKFejwM0Lhq_Szw.ttf",
            "900": "http://fonts.gstatic.com/s/notoserif/v22/ga6iaw1J5X9T9RW6j9bNVls-hfgvz8JcMofYTa32J4wsL2JAlAhZAVejwM0Lhq_Szw.ttf",
            "regular": "http://fonts.gstatic.com/s/notoserif/v22/ga6iaw1J5X9T9RW6j9bNVls-hfgvz8JcMofYTa32J4wsL2JAlAhZqFCjwM0Lhq_Szw.ttf",
            "100italic": "http://fonts.gstatic.com/s/notoserif/v22/ga6saw1J5X9T9RW6j9bNfFIMZhhWnFTyNZIQD1-_FXP0RgnaOg9MYBNLgscPpKrCzyUi.ttf",
            "200italic": "http://fonts.gstatic.com/s/notoserif/v22/ga6saw1J5X9T9RW6j9bNfFIMZhhWnFTyNZIQD1-_FXP0RgnaOg9MYBPLg8cPpKrCzyUi.ttf",
            "300italic": "http://fonts.gstatic.com/s/notoserif/v22/ga6saw1J5X9T9RW6j9bNfFIMZhhWnFTyNZIQD1-_FXP0RgnaOg9MYBMVg8cPpKrCzyUi.ttf",
            "italic": "http://fonts.gstatic.com/s/notoserif/v22/ga6saw1J5X9T9RW6j9bNfFIMZhhWnFTyNZIQD1-_FXP0RgnaOg9MYBNLg8cPpKrCzyUi.ttf",
            "500italic": "http://fonts.gstatic.com/s/notoserif/v22/ga6saw1J5X9T9RW6j9bNfFIMZhhWnFTyNZIQD1-_FXP0RgnaOg9MYBN5g8cPpKrCzyUi.ttf",
            "600italic": "http://fonts.gstatic.com/s/notoserif/v22/ga6saw1J5X9T9RW6j9bNfFIMZhhWnFTyNZIQD1-_FXP0RgnaOg9MYBOVhMcPpKrCzyUi.ttf",
            "700italic": "http://fonts.gstatic.com/s/notoserif/v22/ga6saw1J5X9T9RW6j9bNfFIMZhhWnFTyNZIQD1-_FXP0RgnaOg9MYBOshMcPpKrCzyUi.ttf",
            "800italic": "http://fonts.gstatic.com/s/notoserif/v22/ga6saw1J5X9T9RW6j9bNfFIMZhhWnFTyNZIQD1-_FXP0RgnaOg9MYBPLhMcPpKrCzyUi.ttf",
            "900italic": "http://fonts.gstatic.com/s/notoserif/v22/ga6saw1J5X9T9RW6j9bNfFIMZhhWnFTyNZIQD1-_FXP0RgnaOg9MYBPihMcPpKrCzyUi.ttf"
          },
          "category": "serif",
          "kind": "webfonts#webfont",
          "menu": "http://fonts.gstatic.com/s/notoserif/v22/ga6iaw1J5X9T9RW6j9bNVls-hfgvz8JcMofYTa32J4wsL2JAlAhZqFCTwccP.ttf"
        },
        {
          "brizyId": "y2DvibRnDuy4",
          "family": "Montserrat",
          "variants": [
            "100",
            "200",
            "300",
            "regular",
            "500",
            "600",
            "700",
            "800",
            "900",
            "100italic",
            "200italic",
            "300italic",
            "italic",
            "500italic",
            "600italic",
            "700italic",
            "800italic",
            "900italic"
          ],
          "subsets": ["cyrillic", "cyrillic-ext", "latin", "latin-ext", "vietnamese"],
          "version": "v25",
          "lastModified": "2022-09-22",
          "files": {
            "100": "http://fonts.gstatic.com/s/montserrat/v25/JTUHjIg1_i6t8kCHKm4532VJOt5-QNFgpCtr6Uw-Y3tcoqK5.ttf",
            "200": "http://fonts.gstatic.com/s/montserrat/v25/JTUHjIg1_i6t8kCHKm4532VJOt5-QNFgpCvr6Ew-Y3tcoqK5.ttf",
            "300": "http://fonts.gstatic.com/s/montserrat/v25/JTUHjIg1_i6t8kCHKm4532VJOt5-QNFgpCs16Ew-Y3tcoqK5.ttf",
            "500": "http://fonts.gstatic.com/s/montserrat/v25/JTUHjIg1_i6t8kCHKm4532VJOt5-QNFgpCtZ6Ew-Y3tcoqK5.ttf",
            "600": "http://fonts.gstatic.com/s/montserrat/v25/JTUHjIg1_i6t8kCHKm4532VJOt5-QNFgpCu170w-Y3tcoqK5.ttf",
            "700": "http://fonts.gstatic.com/s/montserrat/v25/JTUHjIg1_i6t8kCHKm4532VJOt5-QNFgpCuM70w-Y3tcoqK5.ttf",
            "800": "http://fonts.gstatic.com/s/montserrat/v25/JTUHjIg1_i6t8kCHKm4532VJOt5-QNFgpCvr70w-Y3tcoqK5.ttf",
            "900": "http://fonts.gstatic.com/s/montserrat/v25/JTUHjIg1_i6t8kCHKm4532VJOt5-QNFgpCvC70w-Y3tcoqK5.ttf",
            "regular": "http://fonts.gstatic.com/s/montserrat/v25/JTUHjIg1_i6t8kCHKm4532VJOt5-QNFgpCtr6Ew-Y3tcoqK5.ttf",
            "100italic": "http://fonts.gstatic.com/s/montserrat/v25/JTUFjIg1_i6t8kCHKm459Wx7xQYXK0vOoz6jq6R8aX9-p7K5ILg.ttf",
            "200italic": "http://fonts.gstatic.com/s/montserrat/v25/JTUFjIg1_i6t8kCHKm459Wx7xQYXK0vOoz6jqyR9aX9-p7K5ILg.ttf",
            "300italic": "http://fonts.gstatic.com/s/montserrat/v25/JTUFjIg1_i6t8kCHKm459Wx7xQYXK0vOoz6jq_p9aX9-p7K5ILg.ttf",
            "italic": "http://fonts.gstatic.com/s/montserrat/v25/JTUFjIg1_i6t8kCHKm459Wx7xQYXK0vOoz6jq6R9aX9-p7K5ILg.ttf",
            "500italic": "http://fonts.gstatic.com/s/montserrat/v25/JTUFjIg1_i6t8kCHKm459Wx7xQYXK0vOoz6jq5Z9aX9-p7K5ILg.ttf",
            "600italic": "http://fonts.gstatic.com/s/montserrat/v25/JTUFjIg1_i6t8kCHKm459Wx7xQYXK0vOoz6jq3p6aX9-p7K5ILg.ttf",
            "700italic": "http://fonts.gstatic.com/s/montserrat/v25/JTUFjIg1_i6t8kCHKm459Wx7xQYXK0vOoz6jq0N6aX9-p7K5ILg.ttf",
            "800italic": "http://fonts.gstatic.com/s/montserrat/v25/JTUFjIg1_i6t8kCHKm459Wx7xQYXK0vOoz6jqyR6aX9-p7K5ILg.ttf",
            "900italic": "http://fonts.gstatic.com/s/montserrat/v25/JTUFjIg1_i6t8kCHKm459Wx7xQYXK0vOoz6jqw16aX9-p7K5ILg.ttf"
          },
          "category": "sans-serif",
          "kind": "webfonts#webfont",
          "menu": "http://fonts.gstatic.com/s/montserrat/v25/JTUHjIg1_i6t8kCHKm4532VJOt5-QNFgpCtr6Hw_aX8.ttf"
        }
      ]
    }
  }
}

Creating Custom Styles

This guide explains how to create custom theme styles that comply with all requirements.

Step 1: Create Style Structure

Start by creating a new style object with a unique ID and title:

{
  "id": "your-unique-style-id",
  "title": "Your Style Name",
  "colorPalette": [],
  "fontStyles": []
}

Step 2: Define Color Palette

Add exactly 8 colors to your style's color palette:

"colorPalette": [
  { "id": "color1", "hex": "#primary-color" },
  { "id": "color2", "hex": "#secondary-color" },
  { "id": "color3", "hex": "#accent-color" },
  { "id": "color4", "hex": "#text-color" },
  { "id": "color5", "hex": "#light-accent" },
  { "id": "color6", "hex": "#background-color" },
  { "id": "color7", "hex": "#neutral-color" },
  { "id": "color8", "hex": "#white-color" }
]

Step 3: Create Font Styles

Add all required font styles in this exact order:

paragraph
subtitle
abovetitle
heading1
heading2
heading3
heading4
heading5
heading6
button

Each font style must include:

"deletable": "off"
All responsive variants (desktop, tablet, mobile)
References to fonts included in the fonts configuration

You may also set text-style flags on each item (bold, italic, underline, strike, uppercase, lowercase), optional script for superscript/subscript, and optional variable-font fields—see Font Style Properties.

Step 4: Validate Your Style

Verify that your style:

Has exactly 8 colors
Contains all 10 required font styles in the correct order
Uses only fonts defined in the fonts configuration
Has all required properties for each font style

Step 5: Add to Styles Array

Add your completed style to the styles array in the configuration.

Styles Example

Here's a simplified example of a custom style:

{
  "id": "custom-style-123",
  "title": "Modern Purple",
  "colorPalette": [
    { "id": "color1", "hex": "#2D1E2F" },
    { "id": "color2", "hex": "#481E5D" },
    { "id": "color3", "hex": "#9649CB" },
    { "id": "color4", "hex": "#432F45" },
    { "id": "color5", "hex": "#D9B6FC" },
    { "id": "color6", "hex": "#F9F4FC" },
    { "id": "color7", "hex": "#FFFFFF" },
    { "id": "color8", "hex": "#333333" }
  ],
  "fontStyles": [
    {
      "deletable": "off",
      "id": "paragraph",
      "title": "Paragraph",
      "fontFamily": "lato",
      "fontFamilyType": "google",
      "fontSize": 16
    },
    {
      "deletable": "off",
      "id": "subtitle",
      "title": "Subtitle",
      "fontFamily": "lato",
      "fontFamilyType": "google",
      "fontSize": 18
    },
    {
      "deletable": "off",
      "id": "abovetitle",
      "title": "Above Title",
      "fontFamily": "lato",
      "fontFamilyType": "google",
      "fontSize": 20
    },
    {
      "deletable": "off",
      "id": "heading1",
      "title": "Heading 1",
      "fontFamily": "lato",
      "fontFamilyType": "google",
      "fontSize": 24
    },
    {
      "deletable": "off",
      "id": "heading2",
      "title": "Heading 2",
      "fontFamily": "lato",
      "fontFamilyType": "google",
      "fontSize": 22
    },
    {
      "deletable": "off",
      "id": "heading3",
      "title": "Heading 3",
      "fontFamily": "lato",
      "fontFamilyType": "google",
      "fontSize": 20
    },
    {
      "deletable": "off",
      "id": "heading4",
      "title": "Heading 4",
      "fontFamily": "lato",
      "fontFamilyType": "google",
      "fontSize": 18
    },
    {
      "deletable": "off",
      "id": "heading5",
      "title": "Heading 5",
      "fontFamily": "lato",
      "fontFamilyType": "google",
      "fontSize": 16
    },
    {
      "deletable": "off",
      "id": "heading6",
      "title": "Heading 6",
      "fontFamily": "lato",
      "fontFamilyType": "google",
      "fontSize": 14
    },
    {
      "deletable": "off",
      "id": "button",
      "title": "Button",
      "fontFamily": "lato",
      "fontFamilyType": "google",
      "fontSize": 16
    }
  ]
}

Final version

Here is the final version of the project data:

{
  selectedKit: "vnexmlshkihvcgsxmozgxzzdwsyvolvmhtne",
  selectedStyle: "custom-style-123",
  styles: [
    {
      id: "custom-style-123",
      title: "Modern Purple",
      colorPalette: [
        { id: "color1", hex: "#2D1E2F" },
        { id: "color2", hex: "#481E5D" },
        { id: "color3", hex: "#9649CB" },
        { id: "color4", hex: "#432F45" },
        { id: "color5", hex: "#D9B6FC" },
        { id: "color6", hex: "#F9F4FC" },
        { id: "color7", hex: "#000000" },
        { id: "color8", hex: "#333333" },
      ],
      fontStyles: [
        {
          deletable: "off",
          id: "paragraph",
          title: "Paragraph",
          fontFamily: "lato",
          fontFamilyType: "google",
          fontSize: 16,
        },
        {
          deletable: "off",
          id: "subtitle",
          title: "Subtitle",
          fontFamily: "lato",
          fontFamilyType: "google",
          fontSize: 18,
        },
        {
          deletable: "off",
          id: "abovetitle",
          title: "Above Title",
          fontFamily: "lato",
          fontFamilyType: "google",
          fontSize: 20,
        },
        {
          deletable: "off",
          id: "heading1",
          title: "Heading 1",
          fontFamily: "lato",
          fontFamilyType: "google",
          fontSize: 24,
        },
        {
          deletable: "off",
          id: "heading2",
          title: "Heading 2",
          fontFamily: "lato",
          fontFamilyType: "google",
          fontSize: 22,
        },
        {
          deletable: "off",
          id: "heading3",
          title: "Heading 3",
          fontFamily: "lato",
          fontFamilyType: "google",
          fontSize: 20,
        },
        {
          deletable: "off",
          id: "heading4",
          title: "Heading 4",
          fontFamily: "lato",
          fontFamilyType: "google",
          fontSize: 18,
        },
        {
          deletable: "off",
          id: "heading5",
          title: "Heading 5",
          fontFamily: "lato",
          fontFamilyType: "google",
          fontSize: 16,
        },
        {
          deletable: "off",
          id: "heading6",
          title: "Heading 6",
          fontFamily: "lato",
          fontFamilyType: "google",
          fontSize: 14,
        },
        {
          deletable: "off",
          id: "button",
          title: "Button",
          fontFamily: "lato",
          fontFamilyType: "google",
          fontSize: 16,
        },
      ],
    },
  ],
  extraFontStyles: [],
  font: "lato",
  fonts: {
    config: {
      data: [
        {
          kind: "webfonts#webfont",
          family: "Lato",
          category: "sans-serif",
          variants: [
            "100",
            "100italic",
            "300",
            "300italic",
            "regular",
            "italic",
            "700",
            "700italic",
            "900",
            "900italic",
          ],
          subsets: ["latin-ext", "latin"],
          version: "v15",
          lastModified: "2019-03-26",
          files: {
            100: "http://fonts.gstatic.com/s/lato/v15/S6u8w4BMUTPHh30wWyWrFCbw7A.ttf",
            300: "http://fonts.gstatic.com/s/lato/v15/S6u9w4BMUTPHh7USew-FGC_p9dw.ttf",
            700: "http://fonts.gstatic.com/s/lato/v15/S6u9w4BMUTPHh6UVew-FGC_p9dw.ttf",
            900: "http://fonts.gstatic.com/s/lato/v15/S6u9w4BMUTPHh50Xew-FGC_p9dw.ttf",
            "100italic": "http://fonts.gstatic.com/s/lato/v15/S6u-w4BMUTPHjxsIPy-vNiPg7MU0.ttf",
            "300italic": "http://fonts.gstatic.com/s/lato/v15/S6u_w4BMUTPHjxsI9w2PHA3s5dwt7w.ttf",
            regular: "http://fonts.gstatic.com/s/lato/v15/S6uyw4BMUTPHvxk6XweuBCY.ttf",
            italic: "http://fonts.gstatic.com/s/lato/v15/S6u8w4BMUTPHjxswWyWrFCbw7A.ttf",
            "700italic": "http://fonts.gstatic.com/s/lato/v15/S6u_w4BMUTPHjxsI5wqPHA3s5dwt7w.ttf",
            "900italic": "http://fonts.gstatic.com/s/lato/v15/S6u_w4BMUTPHjxsI3wiPHA3s5dwt7w.ttf",
          },
          brizyId: "uzrpsocdxtgrkbxjjxkchqcybpvpzsuvdlji",
        },
        {
          kind: "webfonts#webfont",
          family: "Overpass",
          category: "sans-serif",
          variants: [
            "100",
            "100italic",
            "200",
            "200italic",
            "300",
            "300italic",
            "regular",
            "italic",
            "600",
            "600italic",
            "700",
            "700italic",
            "800",
            "800italic",
            "900",
            "900italic",
          ],
          subsets: ["latin", "latin-ext"],
          version: "v4",
          lastModified: "2019-07-17",
          files: {
            100: "http://fonts.gstatic.com/s/overpass/v4/qFdB35WCmI96Ajtm81nGU97gxhcJk1s.ttf",
            200: "http://fonts.gstatic.com/s/overpass/v4/qFdA35WCmI96Ajtm81lqcv7K6BsAikI7.ttf",
            300: "http://fonts.gstatic.com/s/overpass/v4/qFdA35WCmI96Ajtm81kOcf7K6BsAikI7.ttf",
            600: "http://fonts.gstatic.com/s/overpass/v4/qFdA35WCmI96Ajtm81l6d_7K6BsAikI7.ttf",
            700: "http://fonts.gstatic.com/s/overpass/v4/qFdA35WCmI96Ajtm81kedv7K6BsAikI7.ttf",
            800: "http://fonts.gstatic.com/s/overpass/v4/qFdA35WCmI96Ajtm81kCdf7K6BsAikI7.ttf",
            900: "http://fonts.gstatic.com/s/overpass/v4/qFdA35WCmI96Ajtm81kmdP7K6BsAikI7.ttf",
            "100italic": "http://fonts.gstatic.com/s/overpass/v4/qFdD35WCmI96Ajtm81Gga7rqwjUMg1siNQ.ttf",
            "200italic": "http://fonts.gstatic.com/s/overpass/v4/qFdC35WCmI96Ajtm81GgaxbL4h8ij1I7LLE.ttf",
            "300italic": "http://fonts.gstatic.com/s/overpass/v4/qFdC35WCmI96Ajtm81Gga3LI4h8ij1I7LLE.ttf",
            regular: "http://fonts.gstatic.com/s/overpass/v4/qFdH35WCmI96Ajtm82GiWdrCwwcJ.ttf",
            italic: "http://fonts.gstatic.com/s/overpass/v4/qFdB35WCmI96Ajtm81GgU97gxhcJk1s.ttf",
            "600italic": "http://fonts.gstatic.com/s/overpass/v4/qFdC35WCmI96Ajtm81GgawbO4h8ij1I7LLE.ttf",
            "700italic": "http://fonts.gstatic.com/s/overpass/v4/qFdC35WCmI96Ajtm81Gga2LP4h8ij1I7LLE.ttf",
            "800italic": "http://fonts.gstatic.com/s/overpass/v4/qFdC35WCmI96Ajtm81Gga37M4h8ij1I7LLE.ttf",
            "900italic": "http://fonts.gstatic.com/s/overpass/v4/qFdC35WCmI96Ajtm81Gga1rN4h8ij1I7LLE.ttf",
          },
          brizyId: "qwhwsomltrpyogspgbomkxquvqsqfdlvcnfo",
        },
        {
          kind: "webfonts#webfont",
          family: "Red Hat Text",
          category: "sans-serif",
          variants: ["regular", "italic", "500", "500italic", "700", "700italic"],
          subsets: ["latin", "latin-ext"],
          version: "v1",
          lastModified: "2019-07-26",
          files: {
            500: "http://fonts.gstatic.com/s/redhattext/v1/RrQIbohi_ic6B3yVSzGBrMxYm4QIG-eFNVmULg.ttf",
            700: "http://fonts.gstatic.com/s/redhattext/v1/RrQIbohi_ic6B3yVSzGBrMxY04IIG-eFNVmULg.ttf",
            regular: "http://fonts.gstatic.com/s/redhattext/v1/RrQXbohi_ic6B3yVSzGBrMxgb60sE8yZPA.ttf",
            italic: "http://fonts.gstatic.com/s/redhattext/v1/RrQJbohi_ic6B3yVSzGBrMxQbacoMcmJPECN.ttf",
            "500italic":
              "http://fonts.gstatic.com/s/redhattext/v1/RrQKbohi_ic6B3yVSzGBrMxQbZ_cGO2BF1yELmgy.ttf",
            "700italic":
              "http://fonts.gstatic.com/s/redhattext/v1/RrQKbohi_ic6B3yVSzGBrMxQbZ-UHu2BF1yELmgy.ttf",
          },
          brizyId: "eytgthrgfzlrrzxlhynabspndabldgdbdjnm",
        },
        {
          kind: "webfonts#webfont",
          family: "DM Serif Text",
          category: "serif",
          variants: ["regular", "italic"],
          subsets: ["latin", "latin-ext"],
          version: "v3",
          lastModified: "2019-07-16",
          files: {
            regular: "http://fonts.gstatic.com/s/dmseriftext/v3/rnCu-xZa_krGokauCeNq1wWyafOPXHIJErY.ttf",
            italic: "http://fonts.gstatic.com/s/dmseriftext/v3/rnCw-xZa_krGokauCeNq1wWyWfGFWFAMArZKqQ.ttf",
          },
          brizyId: "pujmflqmocbjojknwlnidilgqedjzqftpnrv",
        },
        {
          kind: "webfonts#webfont",
          family: "Blinker",
          category: "sans-serif",
          variants: ["100", "200", "300", "regular", "600", "700", "800", "900"],
          subsets: ["latin", "latin-ext"],
          version: "v1",
          lastModified: "2019-07-26",
          files: {
            100: "http://fonts.gstatic.com/s/blinker/v1/cIf_MaFatEE-VTaP_E2hZEsCkIt9QQ.ttf",
            200: "http://fonts.gstatic.com/s/blinker/v1/cIf4MaFatEE-VTaP_OGARGEsnIJkWL4.ttf",
            300: "http://fonts.gstatic.com/s/blinker/v1/cIf4MaFatEE-VTaP_IWDRGEsnIJkWL4.ttf",
            600: "http://fonts.gstatic.com/s/blinker/v1/cIf4MaFatEE-VTaP_PGFRGEsnIJkWL4.ttf",
            700: "http://fonts.gstatic.com/s/blinker/v1/cIf4MaFatEE-VTaP_JWERGEsnIJkWL4.ttf",
            800: "http://fonts.gstatic.com/s/blinker/v1/cIf4MaFatEE-VTaP_ImHRGEsnIJkWL4.ttf",
            900: "http://fonts.gstatic.com/s/blinker/v1/cIf4MaFatEE-VTaP_K2GRGEsnIJkWL4.ttf",
            regular: "http://fonts.gstatic.com/s/blinker/v1/cIf9MaFatEE-VTaPxCmrYGkHgIs.ttf",
          },
          brizyId: "yhkoopjikembswaygkzktfmiiashwjcrvbxr",
        },
        {
          kind: "webfonts#webfont",
          family: "Aleo",
          category: "serif",
          variants: ["300", "300italic", "regular", "italic", "700", "700italic"],
          subsets: ["latin", "latin-ext"],
          version: "v3",
          lastModified: "2019-07-16",
          files: {
            300: "http://fonts.gstatic.com/s/aleo/v3/c4mg1nF8G8_syKbr9DVDno985KM.ttf",
            700: "http://fonts.gstatic.com/s/aleo/v3/c4mg1nF8G8_syLbs9DVDno985KM.ttf",
            "300italic": "http://fonts.gstatic.com/s/aleo/v3/c4mi1nF8G8_swAjxeDdJmq159KOnWA.ttf",
            regular: "http://fonts.gstatic.com/s/aleo/v3/c4mv1nF8G8_s8ArD0D1ogoY.ttf",
            italic: "http://fonts.gstatic.com/s/aleo/v3/c4mh1nF8G8_swAjJ1B9tkoZl_Q.ttf",
            "700italic": "http://fonts.gstatic.com/s/aleo/v3/c4mi1nF8G8_swAjxaDBJmq159KOnWA.ttf",
          },
          brizyId: "ucgecsrbcjkpsfctgzwsocokuydcdgiubroh",
        },
        {
          kind: "webfonts#webfont",
          family: "Nunito",
          category: "sans-serif",
          variants: [
            "200",
            "200italic",
            "300",
            "300italic",
            "regular",
            "italic",
            "600",
            "600italic",
            "700",
            "700italic",
            "800",
            "800italic",
            "900",
            "900italic",
          ],
          subsets: ["latin", "vietnamese", "latin-ext"],
          version: "v11",
          lastModified: "2019-07-22",
          files: {
            200: "http://fonts.gstatic.com/s/nunito/v11/XRXW3I6Li01BKofA-sekZuHJeTsfDQ.ttf",
            300: "http://fonts.gstatic.com/s/nunito/v11/XRXW3I6Li01BKofAnsSkZuHJeTsfDQ.ttf",
            600: "http://fonts.gstatic.com/s/nunito/v11/XRXW3I6Li01BKofA6sKkZuHJeTsfDQ.ttf",
            700: "http://fonts.gstatic.com/s/nunito/v11/XRXW3I6Li01BKofAjsOkZuHJeTsfDQ.ttf",
            800: "http://fonts.gstatic.com/s/nunito/v11/XRXW3I6Li01BKofAksCkZuHJeTsfDQ.ttf",
            900: "http://fonts.gstatic.com/s/nunito/v11/XRXW3I6Li01BKofAtsGkZuHJeTsfDQ.ttf",
            "200italic": "http://fonts.gstatic.com/s/nunito/v11/XRXQ3I6Li01BKofIMN5MZ-vNWz4PDWtj.ttf",
            "300italic": "http://fonts.gstatic.com/s/nunito/v11/XRXQ3I6Li01BKofIMN4oZOvNWz4PDWtj.ttf",
            regular: "http://fonts.gstatic.com/s/nunito/v11/XRXV3I6Li01BKof4MuyAbsrVcA.ttf",
            italic: "http://fonts.gstatic.com/s/nunito/v11/XRXX3I6Li01BKofIMOaETM_FcCIG.ttf",
            "600italic": "http://fonts.gstatic.com/s/nunito/v11/XRXQ3I6Li01BKofIMN5cYuvNWz4PDWtj.ttf",
            "700italic": "http://fonts.gstatic.com/s/nunito/v11/XRXQ3I6Li01BKofIMN44Y-vNWz4PDWtj.ttf",
            "800italic": "http://fonts.gstatic.com/s/nunito/v11/XRXQ3I6Li01BKofIMN4kYOvNWz4PDWtj.ttf",
            "900italic": "http://fonts.gstatic.com/s/nunito/v11/XRXQ3I6Li01BKofIMN4AYevNWz4PDWtj.ttf",
          },
          brizyId: "ppzycxqtiwtmjnfpbfluoynrnnfviuerjczz",
        },
        {
          kind: "webfonts#webfont",
          family: "Knewave",
          category: "display",
          variants: ["regular"],
          subsets: ["latin", "latin-ext"],
          version: "v8",
          lastModified: "2019-07-16",
          files: {
            regular: "http://fonts.gstatic.com/s/knewave/v8/sykz-yx0lLcxQaSItSq9-trEvlQ.ttf",
          },
          brizyId: "jojwyelvgkjknbgrosxcdphkpqfcczzdlcen",
        },
        {
          kind: "webfonts#webfont",
          family: "Palanquin",
          category: "sans-serif",
          variants: ["100", "200", "300", "regular", "500", "600", "700"],
          subsets: ["devanagari", "latin", "latin-ext"],
          version: "v5",
          lastModified: "2019-07-16",
          files: {
            100: "http://fonts.gstatic.com/s/palanquin/v5/9XUhlJ90n1fBFg7ceXwUEltI7rWmZzTH.ttf",
            200: "http://fonts.gstatic.com/s/palanquin/v5/9XUilJ90n1fBFg7ceXwUvnpoxJuqbi3ezg.ttf",
            300: "http://fonts.gstatic.com/s/palanquin/v5/9XUilJ90n1fBFg7ceXwU2nloxJuqbi3ezg.ttf",
            500: "http://fonts.gstatic.com/s/palanquin/v5/9XUilJ90n1fBFg7ceXwUgnhoxJuqbi3ezg.ttf",
            600: "http://fonts.gstatic.com/s/palanquin/v5/9XUilJ90n1fBFg7ceXwUrn9oxJuqbi3ezg.ttf",
            700: "http://fonts.gstatic.com/s/palanquin/v5/9XUilJ90n1fBFg7ceXwUyn5oxJuqbi3ezg.ttf",
            regular: "http://fonts.gstatic.com/s/palanquin/v5/9XUnlJ90n1fBFg7ceXwsdlFMzLC2Zw.ttf",
          },
          brizyId: "xnikbaszrjutnnfixmtprduwstoziivqiflp",
        },
        {
          kind: "webfonts#webfont",
          family: "Palanquin Dark",
          category: "sans-serif",
          variants: ["regular", "500", "600", "700"],
          subsets: ["devanagari", "latin", "latin-ext"],
          version: "v6",
          lastModified: "2019-07-16",
          files: {
            500: "http://fonts.gstatic.com/s/palanquindark/v6/xn76YHgl1nqmANMB-26xC7yuF8Z6ZW41fcvN2KT4.ttf",
            600: "http://fonts.gstatic.com/s/palanquindark/v6/xn76YHgl1nqmANMB-26xC7yuF8ZWYm41fcvN2KT4.ttf",
            700: "http://fonts.gstatic.com/s/palanquindark/v6/xn76YHgl1nqmANMB-26xC7yuF8YyY241fcvN2KT4.ttf",
            regular: "http://fonts.gstatic.com/s/palanquindark/v6/xn75YHgl1nqmANMB-26xC7yuF_6OTEo9VtfE.ttf",
          },
          brizyId: "gqzfchsrosvxegeymkyugyofaztsitibprrf",
        },
        {
          kind: "webfonts#webfont",
          family: "Roboto",
          category: "sans-serif",
          variants: [
            "100",
            "100italic",
            "300",
            "300italic",
            "regular",
            "italic",
            "500",
            "500italic",
            "700",
            "700italic",
            "900",
            "900italic",
          ],
          subsets: ["greek-ext", "latin", "cyrillic-ext", "vietnamese", "latin-ext", "greek", "cyrillic"],
          version: "v20",
          lastModified: "2019-07-24",
          files: {
            100: "http://fonts.gstatic.com/s/roboto/v20/KFOkCnqEu92Fr1MmgWxPKTM1K9nz.ttf",
            300: "http://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmSU5vAx05IsDqlA.ttf",
            500: "http://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmEU9vAx05IsDqlA.ttf",
            700: "http://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmWUlvAx05IsDqlA.ttf",
            900: "http://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmYUtvAx05IsDqlA.ttf",
            "100italic": "http://fonts.gstatic.com/s/roboto/v20/KFOiCnqEu92Fr1Mu51QrIzcXLsnzjYk.ttf",
            "300italic": "http://fonts.gstatic.com/s/roboto/v20/KFOjCnqEu92Fr1Mu51TjARc9AMX6lJBP.ttf",
            regular: "http://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Me5WZLCzYlKw.ttf",
            italic: "http://fonts.gstatic.com/s/roboto/v20/KFOkCnqEu92Fr1Mu52xPKTM1K9nz.ttf",
            "500italic": "http://fonts.gstatic.com/s/roboto/v20/KFOjCnqEu92Fr1Mu51S7ABc9AMX6lJBP.ttf",
            "700italic": "http://fonts.gstatic.com/s/roboto/v20/KFOjCnqEu92Fr1Mu51TzBhc9AMX6lJBP.ttf",
            "900italic": "http://fonts.gstatic.com/s/roboto/v20/KFOjCnqEu92Fr1Mu51TLBBc9AMX6lJBP.ttf",
          },
          brizyId: "wrqenoprsynrjiyxmfoeuwqddlnomrxemeec",
        },
        {
          kind: "webfonts#webfont",
          family: "Oswald",
          category: "sans-serif",
          variants: ["200", "300", "regular", "500", "600", "700"],
          subsets: ["latin", "cyrillic-ext", "vietnamese", "latin-ext", "cyrillic"],
          version: "v24",
          lastModified: "2019-07-23",
          files: {
            200: "http://fonts.gstatic.com/s/oswald/v24/TK3_WkUHHAIjg75cFRf3bXL8LICs13FvgUFoZAaRliE.ttf",
            300: "http://fonts.gstatic.com/s/oswald/v24/TK3_WkUHHAIjg75cFRf3bXL8LICs169vgUFoZAaRliE.ttf",
            500: "http://fonts.gstatic.com/s/oswald/v24/TK3_WkUHHAIjg75cFRf3bXL8LICs18NvgUFoZAaRliE.ttf",
            600: "http://fonts.gstatic.com/s/oswald/v24/TK3_WkUHHAIjg75cFRf3bXL8LICs1y9ogUFoZAaRliE.ttf",
            700: "http://fonts.gstatic.com/s/oswald/v24/TK3_WkUHHAIjg75cFRf3bXL8LICs1xZogUFoZAaRliE.ttf",
            regular: "http://fonts.gstatic.com/s/oswald/v24/TK3_WkUHHAIjg75cFRf3bXL8LICs1_FvgUFoZAaRliE.ttf",
          },
          brizyId: "ehiobdhupkijoltxyucnkenojglortpsupmp",
        },
        {
          kind: "webfonts#webfont",
          family: "Oxygen",
          category: "sans-serif",
          variants: ["300", "regular", "700"],
          subsets: ["latin", "latin-ext"],
          version: "v9",
          lastModified: "2019-07-22",
          files: {
            300: "http://fonts.gstatic.com/s/oxygen/v9/2sDcZG1Wl4LcnbuCJW8Db2-4C7wFZQ.ttf",
            700: "http://fonts.gstatic.com/s/oxygen/v9/2sDcZG1Wl4LcnbuCNWgDb2-4C7wFZQ.ttf",
            regular: "http://fonts.gstatic.com/s/oxygen/v9/2sDfZG1Wl4Lcnbu6iUcnZ0SkAg.ttf",
          },
          brizyId: "gzhhqjoyiaozuhrmbylqeknkdaqtxfdynaqt",
        },
        {
          kind: "webfonts#webfont",
          family: "Playfair Display",
          category: "serif",
          variants: ["regular", "italic", "700", "700italic", "900", "900italic"],
          subsets: ["latin", "vietnamese", "latin-ext", "cyrillic"],
          version: "v15",
          lastModified: "2019-07-22",
          files: {
            700: "http://fonts.gstatic.com/s/playfairdisplay/v15/nuFlD-vYSZviVYUb_rj3ij__anPXBYf9pWkU5xxiJKY.ttf",
            900: "http://fonts.gstatic.com/s/playfairdisplay/v15/nuFlD-vYSZviVYUb_rj3ij__anPXBb__pWkU5xxiJKY.ttf",
            regular:
              "http://fonts.gstatic.com/s/playfairdisplay/v15/nuFiD-vYSZviVYUb_rj3ij__anPXPTvSgWE_-xU.ttf",
            italic:
              "http://fonts.gstatic.com/s/playfairdisplay/v15/nuFkD-vYSZviVYUb_rj3ij__anPXDTnYhUM66xV7PQ.ttf",
            "700italic":
              "http://fonts.gstatic.com/s/playfairdisplay/v15/nuFnD-vYSZviVYUb_rj3ij__anPXDTngOWwe4z5nNKaV_w.ttf",
            "900italic":
              "http://fonts.gstatic.com/s/playfairdisplay/v15/nuFnD-vYSZviVYUb_rj3ij__anPXDTngAW4e4z5nNKaV_w.ttf",
          },
          brizyId: "bvbbabnggnnjzvtleuwdrnfuvssxrgeovjan",
        },
        {
          kind: "webfonts#webfont",
          family: "Fira Sans",
          category: "sans-serif",
          variants: [
            "100",
            "100italic",
            "200",
            "200italic",
            "300",
            "300italic",
            "regular",
            "italic",
            "500",
            "500italic",
            "600",
            "600italic",
            "700",
            "700italic",
            "800",
            "800italic",
            "900",
            "900italic",
          ],
          subsets: ["greek-ext", "latin", "cyrillic-ext", "vietnamese", "latin-ext", "greek", "cyrillic"],
          version: "v10",
          lastModified: "2019-07-22",
          files: {
            100: "http://fonts.gstatic.com/s/firasans/v10/va9C4kDNxMZdWfMOD5Vn9IjOazP3dUTP.ttf",
            200: "http://fonts.gstatic.com/s/firasans/v10/va9B4kDNxMZdWfMOD5VnWKnuQR37fF3Wlg.ttf",
            300: "http://fonts.gstatic.com/s/firasans/v10/va9B4kDNxMZdWfMOD5VnPKruQR37fF3Wlg.ttf",
            500: "http://fonts.gstatic.com/s/firasans/v10/va9B4kDNxMZdWfMOD5VnZKvuQR37fF3Wlg.ttf",
            600: "http://fonts.gstatic.com/s/firasans/v10/va9B4kDNxMZdWfMOD5VnSKzuQR37fF3Wlg.ttf",
            700: "http://fonts.gstatic.com/s/firasans/v10/va9B4kDNxMZdWfMOD5VnLK3uQR37fF3Wlg.ttf",
            800: "http://fonts.gstatic.com/s/firasans/v10/va9B4kDNxMZdWfMOD5VnMK7uQR37fF3Wlg.ttf",
            900: "http://fonts.gstatic.com/s/firasans/v10/va9B4kDNxMZdWfMOD5VnFK_uQR37fF3Wlg.ttf",
            "100italic": "http://fonts.gstatic.com/s/firasans/v10/va9A4kDNxMZdWfMOD5VvkrCqYTfVcFTPj0s.ttf",
            "200italic": "http://fonts.gstatic.com/s/firasans/v10/va9f4kDNxMZdWfMOD5VvkrAGQBf_XljGllLX.ttf",
            "300italic": "http://fonts.gstatic.com/s/firasans/v10/va9f4kDNxMZdWfMOD5VvkrBiQxf_XljGllLX.ttf",
            regular: "http://fonts.gstatic.com/s/firasans/v10/va9E4kDNxMZdWfMOD5VfkILKSTbndQ.ttf",
            italic: "http://fonts.gstatic.com/s/firasans/v10/va9C4kDNxMZdWfMOD5VvkojOazP3dUTP.ttf",
            "500italic": "http://fonts.gstatic.com/s/firasans/v10/va9f4kDNxMZdWfMOD5VvkrA6Qhf_XljGllLX.ttf",
            "600italic": "http://fonts.gstatic.com/s/firasans/v10/va9f4kDNxMZdWfMOD5VvkrAWRRf_XljGllLX.ttf",
            "700italic": "http://fonts.gstatic.com/s/firasans/v10/va9f4kDNxMZdWfMOD5VvkrByRBf_XljGllLX.ttf",
            "800italic": "http://fonts.gstatic.com/s/firasans/v10/va9f4kDNxMZdWfMOD5VvkrBuRxf_XljGllLX.ttf",
            "900italic": "http://fonts.gstatic.com/s/firasans/v10/va9f4kDNxMZdWfMOD5VvkrBKRhf_XljGllLX.ttf",
          },
          brizyId: "wndeuiwznzaqgsugjnojbhzjhjwtryegciis",
        },
        {
          kind: "webfonts#webfont",
          family: "Abril Fatface",
          category: "display",
          variants: ["regular"],
          subsets: ["latin", "latin-ext"],
          version: "v11",
          lastModified: "2019-07-17",
          files: {
            regular: "http://fonts.gstatic.com/s/abrilfatface/v11/zOL64pLDlL1D99S8g8PtiKchm-BsjOLhZBY.ttf",
          },
          brizyId: "fbyhozjmiqseimmgxerwiucacmaaljqitrdc",
        },
        {
          kind: "webfonts#webfont",
          family: "Comfortaa",
          category: "display",
          variants: ["300", "regular", "500", "600", "700"],
          subsets: ["latin", "cyrillic-ext", "vietnamese", "latin-ext", "greek", "cyrillic"],
          version: "v23",
          lastModified: "2019-07-17",
          files: {
            300: "http://fonts.gstatic.com/s/comfortaa/v23/1Pt_g8LJRfWJmhDAuUsSQamb1W0lwk4S4TbMPrQVIT9c2c8.ttf",
            500: "http://fonts.gstatic.com/s/comfortaa/v23/1Pt_g8LJRfWJmhDAuUsSQamb1W0lwk4S4VrMPrQVIT9c2c8.ttf",
            600: "http://fonts.gstatic.com/s/comfortaa/v23/1Pt_g8LJRfWJmhDAuUsSQamb1W0lwk4S4bbLPrQVIT9c2c8.ttf",
            700: "http://fonts.gstatic.com/s/comfortaa/v23/1Pt_g8LJRfWJmhDAuUsSQamb1W0lwk4S4Y_LPrQVIT9c2c8.ttf",
            regular:
              "http://fonts.gstatic.com/s/comfortaa/v23/1Pt_g8LJRfWJmhDAuUsSQamb1W0lwk4S4WjMPrQVIT9c2c8.ttf",
          },
          brizyId: "plspcdzrrelkhthvkmoocpwrtltvuzqcyraw",
        },
        {
          kind: "webfonts#webfont",
          family: "Kaushan Script",
          category: "handwriting",
          variants: ["regular"],
          subsets: ["latin", "latin-ext"],
          version: "v8",
          lastModified: "2019-07-17",
          files: {
            regular: "http://fonts.gstatic.com/s/kaushanscript/v8/vm8vdRfvXFLG3OLnsO15WYS5DF7_ytN3M48a.ttf",
          },
          brizyId: "simpmqjphttgbnwqaobwxuxoavrdlbpdjgzc",
        },
      ],
    },
  },
}

Overview​

Structure​

Top-Level Properties​

Style Object​

Requirements​

Color Palette Requirements​

Font Style Requirements​

Deletable Property​

Font Families​

Font Style Properties​

Basic Properties​

Text style and casing​

Superscript and subscript (optional)​

Variable font axes (optional)​

Responsive Properties​

Example Configuration​

Validation Checklist​

JSON Reference​

Font transform keys in fontStyles​

Extra Font Styles​

Purpose​

Data shape​

Recommended conventions​

Example extraFontStyles entry​

Validation notes​

Fonts object​

Creating Custom Styles​

Step 1: Create Style Structure​

Step 2: Define Color Palette​

Step 3: Create Font Styles​

Step 4: Validate Your Style​

Step 5: Add to Styles Array​

Styles Example​

Final version​