ScalaCSS

Font faces

ScalaCSS provides support for CSS3 @font-face rule.

def fontFace                    (config: FontSrcSelector => FontFace): FontFace
def fontFace(fontFamily: String)(config: FontSrcSelector => FontFace): FontFace

fontFace method takes two arguments:

• fontFamily - name of the font face. (Optional)
• config - additional configuration. At a minimum the font sources .src(…) must be specified. Next you can specify the following optional attributes:
  • fontStretch
  • fontStyle
  • fontWeight
  • unicodeRange

Example:

object Demo extends StyleSheet.Inline {
  import dsl._

  val ff = fontFace("myFont")(
    _.src("url(font.woff)")
      .fontStretch.expanded
      .fontStyle.italic
      .unicodeRange(0, 5))

  val ff2 = fontFace("myFont2")(
    _.src("url(font2.woff)")
      .fontStyle.oblique
      .fontWeight._200)

  val ff3 = fontFace("myFont3")(
    _.src("local(HelveticaNeue)", "url(font2.woff)")
      .fontStretch.ultraCondensed
      .fontWeight._200)

  val myFontText = style(
    fontFamily(ff))
}

which produces this CSS:

@font-face {
  font-family: myFont;
  src: url(font.woff);
  font-stretch: expanded;
  font-style: italic;
  unicode-range: U+0-5;
}

@font-face {
  font-family: myFont2;
  src: url(font2.woff);
  font-style: oblique;
  font-weight: 200;
}

@font-face {
  font-family: myFont3;
  src: local(HelveticaNeue),url(font2.woff);
  font-stretch: ultra-condensed;
  font-weight: 200;
}

.MyInlineWithFontFace-myFontText {
  font-family: MyInlineWithFontFace-myFont;
}