diff --git a/package.json b/package.json
index e8ba1030..3f55d089 100644
--- a/package.json
+++ b/package.json
@@ -37,7 +37,9 @@
   },
   "devDependencies": {
     "chai": "3.4.1",
-    "mocha": "2.3.4"
+    "mocha": "2.3.4",
+    "node-elm-compiler": "2.3.2",
+    "tmp": "0.0.28"
   },
   "engineStrict": true,
   "engines": {
diff --git a/tests/AtRules.elm b/tests/AtRules.elm
new file mode 100644
index 00000000..dfe51e38
--- /dev/null
+++ b/tests/AtRules.elm
@@ -0,0 +1,119 @@
+module AtRules exposing (all)
+
+import Test exposing (..)
+import Expect exposing (Expectation)
+import TestUtil exposing (outdented, prettyPrint)
+import Fixtures
+
+
+all : Test
+all =
+    describe "at-rules"
+        [ mediaQueryTests
+        , nestedAtRules
+        , fontFaceTests
+        ]
+
+
+fontFaceTests : Test
+fontFaceTests =
+    let
+        input =
+            Fixtures.fontFaceAtRule
+
+        output =
+            """
+        @font-face {
+          font-family: "MyFontName";
+          src: url(https://example.com/fonts/MyFont-Weird.ttf),
+            url(https://example.com/fonts/MyFont-Odd.ttf);
+          font-variant: small-caps;
+          font-weight: 500;
+          font-style: italic;
+        }
+
+        @font-face {
+          font-family: "MyFontName";
+          src: url(https://example.com/fonts/MyFont-Bold.woff);
+          font-weight: bold;
+        }
+    """
+    in
+        describe "@font-face"
+            [ test "pretty prints the expected output" <|
+                \_ ->
+                    outdented (prettyPrint input)
+                        |> Expect.equal (outdented output)
+            ]
+
+
+mediaQueryTests : Test
+mediaQueryTests =
+    let
+        input =
+            Fixtures.mediaQueryAtRule
+
+        output =
+            """
+          body {
+              padding: 0;
+          }
+
+          @media print {
+              body {
+                  margin: 2em;
+              }
+          }
+
+          @media screen and ( max-width: 600px ) {
+              body {
+                  margin: 3em;
+              }
+          }
+
+          button {
+              margin: auto;
+          }
+      """
+    in
+        describe "@media test"
+            [ test "pretty prints the expected output" <|
+                \_ ->
+                    outdented (prettyPrint input)
+                        |> Expect.equal (outdented output)
+            ]
+
+
+nestedAtRules : Test
+nestedAtRules =
+    let
+        input =
+            Fixtures.nestedAtRule
+
+        output =
+            """
+          button {
+              padding: 0;
+          }
+
+          body {
+              margin: auto;
+          }
+
+          @media print {
+              body {
+                  margin: 2em;
+              }
+          }
+
+          a {
+              text-decoration: none;
+          }
+      """
+    in
+        describe "nested @media test"
+            [ test "pretty prints the expected output" <|
+                \_ ->
+                    outdented (prettyPrint input)
+                        |> Expect.equal (outdented output)
+            ]
diff --git a/tests/Fixtures.elm b/tests/Fixtures.elm
index d2c8dd0f..e81e1d59 100644
--- a/tests/Fixtures.elm
+++ b/tests/Fixtures.elm
@@ -32,8 +32,30 @@ divWidthHeight =
         ]
 
 
-atRule : Stylesheet
-atRule =
+fontFaceAtRule : Stylesheet
+fontFaceAtRule =
+    -- NOTE: The following code is aspirational and does not compile (yet)
+    (stylesheet << namespace "homepage")
+        [ fontFace
+            [ fontFamily "MyFontName"
+            , src
+                [ url "https://example.com/fonts/MyFont-Weird.ttf"
+                , url "https://example.com/fonts/MyFont-Odd.ttf"
+                ]
+            , fontVariant smallCaps
+            , fontWeight <| int 500
+            , fontStyle italic
+            ]
+        , fontFace
+            [ fontFamily "MyFontName"
+            , src <| url "https://example.com/fonts/MyFont-Bold.woff"
+            , fontWeight bold
+            ]
+        ]
+
+
+mediaQueryAtRule : Stylesheet
+mediaQueryAtRule =
     (stylesheet << namespace "homepage")
         [ body [ padding zero ]
         , (media [ print ]) [ body [ margin (Css.em 2) ] ]
diff --git a/tests/Tests.elm b/tests/Tests.elm
index 0ca58b4d..4a335fcb 100644
--- a/tests/Tests.elm
+++ b/tests/Tests.elm
@@ -10,6 +10,7 @@ import Fixtures
 import Properties
 import Selectors
 import Colors
+import AtRules
 
 
 all : Test
@@ -23,8 +24,6 @@ all =
         , divWidthHeight
         , leftRightTopBottom
         , borders
-        , atRule
-        , nestedAtRule
         , bug99
         , bug140
         , universal
@@ -42,6 +41,7 @@ all =
         , Properties.all
         , Selectors.all
         , Arithmetic.all
+        , AtRules.all
         , backgrounds
         ]
 
@@ -145,78 +145,6 @@ leftRightTopBottom =
             ]
 
 
-atRule : Test
-atRule =
-    let
-        input =
-            Fixtures.atRule
-
-        output =
-            """
-          body {
-              padding: 0;
-          }
-
-          @media print {
-              body {
-                  margin: 2em;
-              }
-          }
-
-          @media screen and ( max-width: 600px ) {
-              body {
-                  margin: 3em;
-              }
-          }
-
-          button {
-              margin: auto;
-          }
-      """
-    in
-        describe "@media test"
-            [ test "pretty prints the expected output" <|
-                \_ ->
-                    outdented (prettyPrint input)
-                        |> Expect.equal (outdented output)
-            ]
-
-
-nestedAtRule : Test
-nestedAtRule =
-    let
-        input =
-            Fixtures.nestedAtRule
-
-        output =
-            """
-          button {
-              padding: 0;
-          }
-
-          body {
-              margin: auto;
-          }
-
-          @media print {
-              body {
-                  margin: 2em;
-              }
-          }
-
-          a {
-              text-decoration: none;
-          }
-      """
-    in
-        describe "nested @media test"
-            [ test "pretty prints the expected output" <|
-                \_ ->
-                    outdented (prettyPrint input)
-                        |> Expect.equal (outdented output)
-            ]
-
-
 {-| Regression test for https://github.com/rtfeldman/elm-css/issues/140
 -}
 bug140 : Test