Adding custom CSS

Use Utils.insertCSS() to add custom CSS to your prototype.

As you know, you can add CSS styling to a layer by setting properties on style, like you do when using a common layer for text (instead of a Text Layer).

textLayer = new Layer
    html: "The quick brown fox jumps."
    style:
        fontFamily: "Menlo, Monaco, Courier"
        fontWeight: 300
        fontSize: "40px"
        lineHeight: "40px"

With insertCSS() you can insert extra CSS code to your prototype. You can write CSS declarations like you would in a website’s CSS file.

You can, for example, define a CSS class:

# CSS class for use in <span>
Utils.insertCSS ".blue "

… that you then use to give part of the text in the HTML layer a different color:

# The text inside the <span> will be blue
layerA.html = """layer = <span class="blue">new Layer</span>"""

There’s an example of this use in Using common layers for text.

You can also use it to insert a @font-face at-rule for loading fonts that you added to your project folder.

# Loading the TTF file in the /fonts/ folder
Utils.insertCSS """
    @font-face {
        font-family: "Walt";
        src: url("fonts/New Walt Disney.ttf");
    }
"""

textLayerA.fontFamily = "Walt"

For an example of this use: see Embedding a font file in your project, in the Text Layers chapter.