Element.Font

Style your fonts!

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 : 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

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 : Attribute msg

Align the font to the left.

alignRight : Attribute msg

Align the font to the right.

center : Attribute msg

Center align the font.

justify : Attribute msg

letterSpacing : Float -> Attribute msg

In px.

wordSpacing : Float -> Attribute msg

In px.

Font Styles

underline : Attribute msg

strike : Attribute msg

italic : Attribute msg

unitalicized : Attribute msg

This will reset bold and italic.

Font Weight

heavy : Attribute msg

extraBold : Attribute msg

bold : Attribute msg

semiBold : Attribute msg

medium : Attribute msg

regular : Attribute msg

light : Attribute msg

extraLight : Attribute msg

hairline : Attribute msg

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

mdgriffith/stylish-elephants/8.0.0