Custom style formats

Quick example:

{
    "_config_name": "tinymce.profiles.testing",
    "name": "testing",
    "label": "Testing",
    "filter_allowed_html": "a,em,strong,cite,blockquote,ul,ol,li,h3,h4,h5,p,span",
    "tiny_options": {
        "toolbar": "bold italic blockquote | styles | bullist numlist | backdroplink unlink | backdropimage code",
        "plugins": "link backdroplink lists autoresize backdropimage code",
        "contextmenu": "backdropimage backdroplink",
        "formats": {
            "mycustom": {
                "selector": "p",
                "classes": "my-class"
            },
            "small": {
                "inline": "span",
                "classes": "small"
            },
            "x-large": {
                "inline": "span",
                "classes": "x-large"
            }
        },
        "style_formats": [
            {
                "title": "Paragraph",
                "format": "p"
            },
            {
                "title": "Heading 3",
                "format": "h3"
            },
            {
                "title": "Heading 4",
                "format": "h4"
            },
            {
                "title": "Heading 5",
                "format": "h5"
            },
            {
                "title": "My custom",
                "format": "mycustom"
            },
            {
                "title": "Small text",
                "format": "small"
            },
            {
                "title": "Large text",
                "format": "x-large"
            }
        ]
    }
}

In formats you define your custom block or inline formats and which classes TinyMCE should apply.

In style_formats you define the elements to display in the styles dropdown (see toolbar settings). There you can set the order of elements and define the title to display your custom formats.

The actual styles should go to a CSS file (in your theme), and that could get added to the "Content CSS files" admin setting on /admin/config/content/formats/FORMAT.

Example CSS in your theme:

p.my-class {
  font-size: 2rem;
  color: blue;
}
span.small {
  font-size: .7rem;
}
span.x-large {
  font-size: 2rem;
}