CODEWITHSUNDEEP
csstornadofx
thlinde
thlinde

Reputation: 47

How to load custom font with typesafe css?

I want to load a custom font in a tornadofx-app with typesafe css, is this possible? Thanks and best regards.

Upvotes: 4

Views: 1092

Answers (2)

Ruckus T-Boom
Ruckus T-Boom

Reputation: 4786

As long as a font is loaded, it can be used in CSS, so we've added a loadFont helper in TornadoFX that can be used like so:

class FontTest : App(Main::class, Styles::class)

class Main : View("Font Test") {
    override val root = stackpane {
        label("This is my Label") {
            addClass(Styles.custom)
        }
    }
}

class Styles : Stylesheet() {
    companion object {
        val custom by cssclass()
        // Note that loadFont() returns Font?
        val riesling = loadFont("/fonts/riesling.ttf", 48.0)
    }

    init {
        custom {
            padding = box(25.px)
            riesling?.let { font = it }
            // or if you just want to set the font family:
            // riesling?.let { fontFamily = it.family }
        }
    }
}

enter image description here

If you know for sure the font exists (e.g. you're including in your build), that can be simplified to:

class Styles : Stylesheet() {
    companion object {
        val custom by cssclass()
        val riesling = loadFont("/fonts/riesling.ttf", 48.0)!!
    }
    
    init {
        custom {
            padding = box(25.px)

            font = riesling
            // or if you just want to set the font family:
            // fontFamily = riesling.family
        }
    }
}

Upvotes: 5

Victor
Victor

Reputation: 520

By the way since 29 days as Ruckus T-Boom answered this question he added the loadFont function :) , with which it's possible to write:

class Styles : Stylesheet() {
    private val customFont = loadFont("/fonts/custom-font.ttf", 14)!!

    init {
        root {
            font = customFont
            fontSize = 11.px
        }
    }
}

Upvotes: 2

Related Questions