mdn · schalkneethling · Jul 10, 2018 · Jul 5, 2018 · Jul 9, 2018
diff --git a/CONTRIBUTING-HTML.md b/CONTRIBUTING-HTML.md
@@ -163,6 +163,18 @@ thead {
 
 Follow the [mdn-fiori CSS formatting guidelines](https://mdn.github.io/mdn-fiori/patterns/css/formatting/).
 
+### Fonts
+
+Because the editor uses Shadow DOM to isolate the example, you can't use `@font-face` to include extra fonts in your example. We've included a number of extra fonts in the [shadow-fonts.css](https://github.com/mdn/interactive-examples/blob/master/css/editor-libs/shadow-fonts.css) file, and you can use these with a normal `font-family` declaration:
+
+```
+p {
+    font-family: 'molot';
+}
+```
+
+If you need to include some additional fonts, add them to your pull request and update the "shadow-fonts.css" file to include them.
+
 ## Updating the metadata
 
 In "live-examples/html-examples/table-content/" you'll need a file called "meta.json". This tells the site builder about the examples inside the directory. If it doesn't exist, create it. If it does, open it,

diff --git a/css/editor-libs/shadow-fonts.css b/css/editor-libs/shadow-fonts.css
@@ -0,0 +1,31 @@
+/* fonts used by the examples rendered inside the shadow dom. Because
+   @font-face does not work in shadow dom:
+   http://robdodson.me/at-font-face-doesnt-work-in-shadow-dom/ */
+@font-face {
+    font-family: 'Fira Sans';
+    src: local('FiraSans-Regular'),
+        url('/media/fonts/FiraSans-Regular.woff2') format('woff2');
+}
+
+@font-face {
+    font-family: 'Fira Sans';
+    font-weight: normal;
+    font-style: oblique;
+    src: local('FiraSans-SemiBoldItalic'),
+        url('/media/fonts/FiraSans-SemiBoldItalic.woff2');
+}
+
+@font-face {
+    font-family: 'Dancing Script';
+    src: url(/media/fonts/DancingScript-Regular.ttf);
+}
+
+@font-face {
+    font-family: 'molot';
+    src: url('/media/fonts/molot.woff2') format('woff2');
+}
+
+@font-face {
+    font-family: 'rapscallion';
+    src: url('/media/fonts/rapscall.woff2') format('woff2');
+}
diff --git a/live-examples/html-examples/content-sectioning/css/article.css b/live-examples/html-examples/content-sectioning/css/article.css
@@ -13,17 +13,12 @@
 }
 
 .day-forecast {
-    background: right/contain content-box border-box no-repeat url('/media/examples/rain.svg') white;
+    background: right/contain content-box border-box no-repeat
+        url('/media/examples/rain.svg') white;
 }
 
 .day-forecast > h2,
-.day-forecast>p {
+.day-forecast > p {
     margin: .2rem;
     font-size: 1rem;
 }
-
-@font-face {
-    font-family: 'Fira Sans';
-    src: local('FiraSans-Regular'),
-    url('/media/fonts/FiraSans-Regular.woff2') format('woff2');
-}
diff --git a/live-examples/html-examples/content-sectioning/css/aside.css b/live-examples/html-examples/content-sectioning/css/aside.css
@@ -12,12 +12,6 @@ aside > p {
     margin: .5rem;
 }
 
-@font-face {
-    font-family: 'Fira Sans';
-    src: local('FiraSans-Regular'),
-    url('/media/fonts/FiraSans-Regular.woff2') format('woff2');
-}
-
 p {
     font-family: 'Fira Sans', sans-serif;
 }
diff --git a/live-examples/html-examples/content-sectioning/css/header.css b/live-examples/html-examples/content-sectioning/css/header.css
@@ -5,25 +5,15 @@ header.page-header {
     min-width: 120px;
     align-items: center;
     color: #fff;
-    text-shadow: #000 0 0 0.2em;
+    text-shadow: #000 0 0 .2em;
 }
 
 header.page-header > h1 {
-    font: bold calc(1em + 2 * (100vw - 120px) / 100) 'Dancing Script', cursive, fantasy;
+    font: bold calc(1em + 2 * (100vw - 120px) / 100) 'Dancing Script', cursive,
+        fantasy;
     margin: 2%;
 }
 
 main {
     font: 1rem 'Fira Sans', sans-serif;
 }
-
-@font-face {
-    font-family: 'Dancing Script';
-    src: url(/media/examples/DancingScript-Regular.ttf);
-}
-
-@font-face {
-    font-family: 'Fira Sans';
-    src: local('FiraSans-Regular'),
-    url(/media/fonts/FiraSans-Regular.woff2);
-}
diff --git a/live-examples/html-examples/document-metadata/css/style.css b/live-examples/html-examples/document-metadata/css/style.css
@@ -1,3 +1,3 @@
 p {
-    color: red;
+    color: #f00;
 }
diff --git a/live-examples/html-examples/document-metadata/style.html b/live-examples/html-examples/document-metadata/style.html
@@ -1,6 +1,6 @@
 <style type="text/css">
 p {
-  color: green;
+  color: #26b72b;
 }
 </style>
 <p>This text will be green. Inline styles take precedence over CSS included externally.</p>

diff --git a/live-examples/html-examples/forms/css/fieldset.css b/live-examples/html-examples/forms/css/fieldset.css
@@ -2,12 +2,6 @@
     font: 1rem 'Fira Sans', sans-serif;
 }
 
-@font-face {
-    font-family: 'Fira Sans';
-    src: local('FiraSans-Regular'),
-    url('/media/fonts/FiraSans-Regular.woff2') format('woff2');
-}
-
 input {
     margin: .4rem;
 }
diff --git a/live-examples/html-examples/forms/css/legend.css b/live-examples/html-examples/forms/css/legend.css
@@ -1,19 +1,13 @@
 legend {
-  background-color: #000;
-  color: #fff;
-  padding: 3px 6px;
+    background-color: #000;
+    color: #fff;
+    padding: 3px 6px;
 }
 
 .output {
     font: 1rem 'Fira Sans', sans-serif;
 }
 
-@font-face {
-    font-family: 'Fira Sans';
-    src: local('FiraSans-Regular'),
-    url('/media/fonts/FiraSans-Regular.woff2') format('woff2');
-}
-
 input {
     margin: .4rem;
 }
diff --git a/live-examples/html-examples/inline-text-semantics/css/span.css b/live-examples/html-examples/inline-text-semantics/css/span.css
@@ -1,3 +1,3 @@
 span.ingredient {
-    color: red;
+    color: #f00;
 }
diff --git a/live-examples/html-examples/inline-text-semantics/css/sub.css b/live-examples/html-examples/inline-text-semantics/css/sub.css
@@ -1,9 +1,3 @@
 p {
     font: 1rem 'Fira Sans', sans-serif;
 }
-
-@font-face {
-    font-family: 'Fira Sans';
-    src: local('FiraSans-Regular'),
-    url('/media/fonts/FiraSans-Regular.woff2') format('woff2');
-}
diff --git a/live-examples/html-examples/inline-text-semantics/css/sup.css b/live-examples/html-examples/inline-text-semantics/css/sup.css
@@ -1,9 +1,3 @@
 p {
     font: 1rem 'Fira Sans', sans-serif;
 }
-
-@font-face {
-    font-family: 'Fira Sans';
-    src: local('FiraSans-Regular'),
-    url('/media/fonts/FiraSans-Regular.woff2') format('woff2');
-}
diff --git a/live-examples/html-examples/inline-text-semantics/css/u.css b/live-examples/html-examples/inline-text-semantics/css/u.css
@@ -3,11 +3,5 @@ p {
 }
 
 u {
-    text-decoration: red wavy underline;
-}
-
-@font-face {
-    font-family: 'Fira Sans';
-    src: local('FiraSans-Regular'),
-    url('/media/fonts/FiraSans-Regular.woff2') format('woff2');
+    text-decoration: #f00 wavy underline;
 }
diff --git a/live-examples/html-examples/input/css/button.css b/live-examples/html-examples/input/css/button.css
@@ -1,9 +1,3 @@
-@font-face {
-    font-family: 'Fira Sans';
-    src: local('FiraSans-Regular'),
-    url('/media/fonts/FiraSans-Regular.woff2') format('woff2');
-}
-
 legend {
     background-color: #000;
     color: #fff;

diff --git a/live-examples/html-examples/input/css/checkbox.css b/live-examples/html-examples/input/css/checkbox.css
@@ -1,9 +1,3 @@
-@font-face {
-    font-family: 'Fira Sans';
-    src: local('FiraSans-Regular'),
-    url('/media/fonts/FiraSans-Regular.woff2') format('woff2');
-}
-
 legend {
     background-color: #000;
     color: #fff;

diff --git a/live-examples/html-examples/input/css/color.css b/live-examples/html-examples/input/css/color.css
@@ -1,9 +1,3 @@
-@font-face {
-    font-family: 'Fira Sans';
-    src: local('FiraSans-Regular'),
-    url('/media/fonts/FiraSans-Regular.woff2') format('woff2');
-}
-
 legend {
     background-color: #000;
     color: #fff;

diff --git a/live-examples/html-examples/input/css/date.css b/live-examples/html-examples/input/css/date.css
@@ -1,9 +1,3 @@
-@font-face {
-    font-family: 'Fira Sans';
-    src: local('FiraSans-Regular'),
-    url('/media/fonts/FiraSans-Regular.woff2') format('woff2');
-}
-
 legend {
     background-color: #000;
     color: #fff;

diff --git a/live-examples/html-examples/input/css/datetime-local.css b/live-examples/html-examples/input/css/datetime-local.css
@@ -1,9 +1,3 @@
-@font-face {
-    font-family: 'Fira Sans';
-    src: local('FiraSans-Regular'),
-    url('/media/fonts/FiraSans-Regular.woff2') format('woff2');
-}
-
 legend {
     background-color: #000;
     color: #fff;

diff --git a/live-examples/html-examples/input/css/email.css b/live-examples/html-examples/input/css/email.css
@@ -1,9 +1,3 @@
-@font-face {
-    font-family: 'Fira Sans';
-    src: local('FiraSans-Regular'),
-    url('/media/fonts/FiraSans-Regular.woff2') format('woff2');
-}
-
 legend {
     background-color: #000;
     color: #fff;

diff --git a/live-examples/html-examples/input/css/file.css b/live-examples/html-examples/input/css/file.css
@@ -1,9 +1,3 @@
-@font-face {
-    font-family: 'Fira Sans';
-    src: local('FiraSans-Regular'),
-    url('/media/fonts/FiraSans-Regular.woff2') format('woff2');
-}
-
 legend {
     background-color: #000;
     color: #fff;

diff --git a/live-examples/html-examples/input/css/image.css b/live-examples/html-examples/input/css/image.css
@@ -1,9 +1,3 @@
-@font-face {
-    font-family: 'Fira Sans';
-    src: local('FiraSans-Regular'),
-    url('/media/fonts/FiraSans-Regular.woff2') format('woff2');
-}
-
 legend {
     background-color: #000;
     color: #fff;
@@ -20,10 +14,10 @@ label {
 }
 
 label,
-input[type="image"] {
+input[type='image'] {
     margin-top: 1rem;
 }
 
-input[type="image"] {
+input[type='image'] {
     width: 80px;
 }
diff --git a/live-examples/html-examples/input/css/input.css b/live-examples/html-examples/input/css/input.css
@@ -1,9 +1,3 @@
-@font-face {
-    font-family: 'Fira Sans';
-    src: local('FiraSans-Regular'),
-    url('/media/fonts/FiraSans-Regular.woff2') format('woff2');
-}
-
 legend {
     background-color: #000;
     color: #fff;
@@ -29,13 +23,13 @@ label {
 
 input:invalid + span:after {
     content: '✖';
-    color: red;
+    color: #f00;
     padding-left: 5px;
 }
 
 input:valid + span:after {
     content: '✓';
-    color: green;
+    color: #26b72b;
     padding-left: 5px;
 }
 
@@ -48,4 +42,3 @@ input:valid + span:after {
     width: 92%;
     margin: 0 auto;
 }
-
diff --git a/live-examples/html-examples/input/css/month.css b/live-examples/html-examples/input/css/month.css
@@ -1,9 +1,3 @@
-@font-face {
-    font-family: 'Fira Sans';
-    src: local('FiraSans-Regular'),
-    url('/media/fonts/FiraSans-Regular.woff2') format('woff2');
-}
-
 legend {
     background-color: #000;
     color: #fff;
@@ -23,13 +17,13 @@ label {
 input:invalid + span:after {
     position: absolute;
     content: '✖';
-    color: red;
+    color: #f00;
     padding-left: 5px;
 }
 
 input:valid + span:after {
     position: absolute;
     content: '✓';
-    color: green;
+    color: #26b72b;
     padding-left: 5px;
 }
diff --git a/live-examples/html-examples/input/css/number.css b/live-examples/html-examples/input/css/number.css
@@ -1,9 +1,3 @@
-@font-face {
-    font-family: 'Fira Sans';
-    src: local('FiraSans-Regular'),
-    url('/media/fonts/FiraSans-Regular.woff2') format('woff2');
-}
-
 legend {
     background-color: #000;
     color: #fff;
@@ -30,12 +24,12 @@ label {
 
 input:invalid + span:after {
     content: '✖';
-    color: red;
+    color: #f00;
     padding-left: 5px;
 }
 
 input:valid + span:after {
     content: '✓';
-    color: green;
+    color: #26b72b;
     padding-left: 5px;
 }
diff --git a/live-examples/html-examples/input/css/password.css b/live-examples/html-examples/input/css/password.css
@@ -1,9 +1,3 @@
-@font-face {
-    font-family: 'Fira Sans';
-    src: local('FiraSans-Regular'),
-    url('/media/fonts/FiraSans-Regular.woff2') format('woff2');
-}
-
 legend {
     background-color: #000;
     color: #fff;
@@ -20,8 +14,8 @@ label {
     width: 35%;
 }
 
-input[type="text"],
-input[type="password"] {
+input[type='text'],
+input[type='password'] {
     width: 60%;
 }