Element.Font

import Element
import Element.Font as Font


view =
    Element.el
        [ Font.color (Element.rgb 0 0 1)
        , Font.size 18
        , Font.family
            [ Font.typeface "Open Sans"
            , Font.sansSerif
            ]
        ]
        (Element.text "Woohoo, I'm stylish text")

Note: Font.color, Font.size, and Font.family are inherited, meaning you can set them at the top of your view and all subsequent nodes will have that value.

Other Note: If you're looking for something like line-height, it's handled by Element.spacing on a paragraph.

color : Color -> Attr decorative msg

size : Int -> Attr decorative msg

Font sizes are always given as px.

Typefaces

family : List Font -> Attribute msg

import Element
import Element.Font as Font


myElement =
    Element.el
        [ Font.family
            [ Font.typeface "Helvetica"
            , Font.sansSerif
            ]
        ]
        (text "")

type alias Font =

Font

typeface : String -> Font

serif : Font

sansSerif : Font

monospace : Font

external :

{ url : String

, name : String

}

-> Font

Note it's likely that Font.external will cause a flash on your page on loading.

To bypass this, import your fonts using a separate stylesheet and just use Font.typeface.

It's likely that Font.external will be removed or redesigned in the future to avoid the flashing.

Font.external can be used to import font files. Let's say you found a neat font on http://fonts.google.com:

import Element
import Element.Font as Font


view =
    Element.el
        [ Font.family
            [ Font.external
                { name = "Roboto"
                , url = "https://fonts.googleapis.com/css?family=Roboto"
                }
            , Font.sansSerif
            ]
        ]
        (Element.text "Woohoo, I'm stylish text")

Alignment and Spacing

alignLeft : Attr decorative msg

Align the font to the left.

alignRight : Attr decorative msg

Align the font to the right.

center : Attr decorative msg

Center align the font.

justify : Attr decorative msg

letterSpacing : Float -> Attr decorative msg

In px.

wordSpacing : Float -> Attr decorative msg

In px.

Font Styles

underline : Attr decorative msg

strike : Attr decorative msg

italic : Attr decorative msg

unitalicized : Attr decorative msg

This will reset bold and italic.

Font Weight

heavy : Attr decorative msg

extraBold : Attr decorative msg

bold : Attr decorative msg

semiBold : Attr decorative msg

medium : Attr decorative msg

regular : Attr decorative msg

light : Attr decorative msg

extraLight : Attr decorative msg

hairline : Attr decorative msg

weight : Int -> Attr decorative msg

Variants

type alias Variant =

Variant

variant : Variant -> Attr decorative msg

You can use this to set a single variant on an element itself such as:

el
    [ Font.variant Font.smallCaps
    ]
    (text "rendered with smallCaps")

Note These will not stack. If you want multiple variants, you should use Font.variantList.

variantList : List Variant -> Attr decorative msg

smallCaps : Variant

Small caps are rendered using uppercase glyphs, but at the size of lowercase glyphs.

slashedZero : Variant

Add a slash when rendering 0

ligatures : Variant

ordinal : Variant

Oridinal markers like 1st and 2nd will receive special glyphs.

tabularNumbers : Variant

Number figures will each take up the same space, allowing them to be easily aligned, such as in tables.

stackedFractions : Variant

Render fractions with the numerator stacked on top of the denominator.

diagonalFractions : Variant

Render fractions

swash : Int -> Variant

feature : String -> Bool -> Variant

Set a feature by name and whether it should be on or off.

Feature names are four-letter names as defined in the OpenType specification.

indexed : String -> Int -> Variant

A font variant might have multiple versions within the font.

In these cases we need to specify the index of the version we want.

Shadows

glow : Color -> Float -> Attr decorative msg

A glow is just a simplified shadow.

shadow :

{ offset : ( Float, Float )

, blur : Float

, color : Color

}

-> Attr decorative msg

flytreeleft/elm-ui/6.2.0