mdgriffith / stylish-elephants / Element.Font
import Color exposing (blue)
import Element
import Element.Font as Font

view =
    Element.el
        [ Font.color blue
        , 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.

color : Element.Color -> Element.Attr decorative msg

size : Basics.Int -> Element.Attr decorative msg

Font sizes are always given as px.

Typefaces

family : List Font -> Element.Attribute msg

import Element
import Element.Font as Font

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


type alias Font =
Internal.Model.Font

typeface : String -> Font

serif : Font

sansSerif : Font

monospace : Font

external : { url : String, name : String } -> Font

Alignment and Spacing

alignLeft : Element.Attribute msg

Align the font to the left.

alignRight : Element.Attribute msg

Align the font to the right.

center : Element.Attribute msg

Center align the font.

justify : Element.Attribute msg

letterSpacing : Basics.Float -> Element.Attribute msg

In px.

wordSpacing : Basics.Float -> Element.Attribute msg

In px.

Font Styles

underline : Element.Attribute msg

strike : Element.Attribute msg

italic : Element.Attribute msg

unitalicized : Element.Attribute msg

This will reset bold and italic.

Font Weight

heavy : Element.Attribute msg

extraBold : Element.Attribute msg

bold : Element.Attribute msg

semiBold : Element.Attribute msg

medium : Element.Attribute msg

regular : Element.Attribute msg

light : Element.Attribute msg

extraLight : Element.Attribute msg

hairline : Element.Attribute msg

Shadows

glow : Element.Color -> Basics.Float -> Element.Attr decorative msg

A glow is just a simplified shadow

shadow : { offset : ( Basics.Float, Basics.Float ), blur : Basics.Float, color : Element.Color } -> Element.Attr decorative msg