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
object Demo extends StyleSheet.Inline {
  import dsl._

  val ff = fontFace("myFont")(
      .unicodeRange(0, 5))

  val ff2 = fontFace("myFont2")(

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

  val myFontText = style(

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;