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.lineHeight 1.3 -- line height is given as a ratio of Font.size.
        , Font.family
            [ Font.typeface "Open Sans"
            , Font.sansSerif
            ]
        ]
        (Element.text "Woohoo, I'm stylish text")

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

color : Color -> Attribute msg

mouseOverColor : Color -> Attribute msg

size : Int -> Attribute msg

Font sizes are always given as px.

lineHeight : Float -> Attribute msg

This is the only unitless value in the library that isn't px.

It's given as a proportion of the Font.size.

This means the final lineHeight in px is:

  Font.size * Font.lineHeight == lineHeightInPx

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

bold : Attribute msg

light : Attribute msg

weight : Int -> Attribute msg

Shadows

glow : Color -> Float -> Attribute msg

A glow is just a simplified shadow

shadow :

{ offset : ( Float, Float )

, blur : Float

, color : Color

}

-> Attribute msg

mdgriffith/stylish-elephants/3.0.1