From cbf573f0e4a97bf567e686e6cc6fe2c6329d4b93 Mon Sep 17 00:00:00 2001 From: Schalk Neethling Date: Thu, 5 Jul 2018 16:45:42 +0200 Subject: [PATCH 1/2] fix(tabbed): load fonts as part of the editor css as @font-face does not work inside shadow dom --- css/editor-libs/shadow-fonts.css | 31 ++++++++++++++++++ .../content-sectioning/css/article.css | 11 ++----- .../content-sectioning/css/aside.css | 6 ---- .../content-sectioning/css/header.css | 16 ++------- .../document-metadata/css/style.css | 2 +- .../document-metadata/style.html | 2 +- .../html-examples/forms/css/fieldset.css | 6 ---- .../html-examples/forms/css/legend.css | 12 ++----- .../inline-text-semantics/css/span.css | 2 +- .../inline-text-semantics/css/sub.css | 6 ---- .../inline-text-semantics/css/sup.css | 6 ---- .../inline-text-semantics/css/u.css | 8 +---- .../html-examples/input/css/button.css | 6 ---- .../html-examples/input/css/checkbox.css | 6 ---- .../html-examples/input/css/color.css | 6 ---- .../html-examples/input/css/date.css | 6 ---- .../input/css/datetime-local.css | 6 ---- .../html-examples/input/css/email.css | 6 ---- .../html-examples/input/css/file.css | 6 ---- .../html-examples/input/css/image.css | 10 ++---- .../html-examples/input/css/input.css | 11 ++----- .../html-examples/input/css/month.css | 10 ++---- .../html-examples/input/css/number.css | 10 ++---- .../html-examples/input/css/password.css | 10 ++---- .../html-examples/input/css/radio.css | 6 ---- .../html-examples/input/css/range.css | 6 ---- .../html-examples/input/css/reset.css | 14 +++----- live-examples/html-examples/input/css/tel.css | 10 ++---- .../html-examples/input/css/text.css | 10 ++---- .../html-examples/input/css/time.css | 6 ---- live-examples/html-examples/input/css/url.css | 6 ---- .../html-examples/input/css/week.css | 6 ---- .../table-content/css/caption.css | 23 ++++--------- .../html-examples/text-content/css/dd.css | 6 ---- .../html-examples/text-content/css/dl.css | 9 ++--- .../html-examples/text-content/css/dt.css | 14 -------- .../html-examples/text-content/css/ol.css | 8 +---- .../DancingScript-Regular.ttf | Bin site.json | 1 + 39 files changed, 72 insertions(+), 254 deletions(-) create mode 100644 css/editor-libs/shadow-fonts.css rename media/{examples => fonts}/DancingScript-Regular.ttf (100%) diff --git a/css/editor-libs/shadow-fonts.css b/css/editor-libs/shadow-fonts.css new file mode 100644 index 000000000..9ec9cd335 --- /dev/null +++ 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 index 28a4b9a95..196e921f1 100644 --- 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 index 871e99eae..1f2a130cf 100644 --- 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 index f0e0036b0..f8a788001 100644 --- 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 index 35540f345..8ef38ca04 100644 --- 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 index 1304e6931..5bbf2f7ed 100644 --- a/live-examples/html-examples/document-metadata/style.html +++ b/live-examples/html-examples/document-metadata/style.html @@ -1,6 +1,6 @@

This text will be green. Inline styles take precedence over CSS included externally.

diff --git a/live-examples/html-examples/forms/css/fieldset.css b/live-examples/html-examples/forms/css/fieldset.css index 1361a6d88..28c9edcac 100644 --- 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 index e485ef1a2..b612705dd 100644 --- 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 index 723dbbbe2..fd9c2f6c4 100644 --- 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 index d7fab6827..0153ba48d 100644 --- 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 index d7fab6827..0153ba48d 100644 --- 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 index dce4c6b52..de17edde6 100644 --- 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 index 6c2432ca4..5770f7dc0 100644 --- 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 index 88841a0a7..b612705dd 100644 --- 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 index 88841a0a7..b612705dd 100644 --- 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 index 89232f279..354c890f3 100644 --- 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 index 1723bb88c..28c761ff0 100644 --- 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 index 3c281d145..cc224c437 100644 --- 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 index f42aeca69..fee3aa1b5 100644 --- 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 index 8821638be..64f944fe2 100644 --- 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 index 8254ade95..2531d4a9c 100644 --- 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 index 675bbf9cd..531b71f3d 100644 --- 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 index 2118af47d..52ba383c1 100644 --- 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 index 2efde6cea..44ceba687 100644 --- 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%; } diff --git a/live-examples/html-examples/input/css/radio.css b/live-examples/html-examples/input/css/radio.css index 88841a0a7..b612705dd 100644 --- a/live-examples/html-examples/input/css/radio.css +++ b/live-examples/html-examples/input/css/radio.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/range.css b/live-examples/html-examples/input/css/range.css index f42aeca69..fee3aa1b5 100644 --- a/live-examples/html-examples/input/css/range.css +++ b/live-examples/html-examples/input/css/range.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/reset.css b/live-examples/html-examples/input/css/reset.css index d8e410ca5..c0a17a7a2 100644 --- a/live-examples/html-examples/input/css/reset.css +++ b/live-examples/html-examples/input/css/reset.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; @@ -27,18 +21,18 @@ label { justify-self: end; } -input[type="reset"], -input[type="submit"] { +input[type='reset'], +input[type='submit'] { width: 5rem; justify-self: end; } -input[type="reset"] { +input[type='reset'] { grid-column: 2; grid-row: 3; } -input[type="submit"] { +input[type='submit'] { grid-column: 2; grid-row: 4; } diff --git a/live-examples/html-examples/input/css/tel.css b/live-examples/html-examples/input/css/tel.css index e5edd3f43..64dd30ae5 100644 --- a/live-examples/html-examples/input/css/tel.css +++ b/live-examples/html-examples/input/css/tel.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; @@ -27,12 +21,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/text.css b/live-examples/html-examples/input/css/text.css index f15decbdb..024aea391 100644 --- a/live-examples/html-examples/input/css/text.css +++ b/live-examples/html-examples/input/css/text.css @@ -1,9 +1,3 @@ -@font-face { - font-family: 'Fira Sans'; - src: local('FiraSans-Regular'), - url('/media/fonts/FiraSans-Regular.woff2') format('woff2'); -} - .output { font: 1rem 'Fira Sans', sans-serif; } @@ -24,12 +18,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/time.css b/live-examples/html-examples/input/css/time.css index a1d1842ba..c5a49ae45 100644 --- a/live-examples/html-examples/input/css/time.css +++ b/live-examples/html-examples/input/css/time.css @@ -1,9 +1,3 @@ -@font-face { - font-family: 'Fira Sans'; - src: local('FiraSans-Regular'), - url('/media/fonts/FiraSans-Regular.woff2') format('woff2'); -} - .output { font: 1rem 'Fira Sans', sans-serif; } diff --git a/live-examples/html-examples/input/css/url.css b/live-examples/html-examples/input/css/url.css index 7e8a6973e..812ed7eff 100644 --- a/live-examples/html-examples/input/css/url.css +++ b/live-examples/html-examples/input/css/url.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/week.css b/live-examples/html-examples/input/css/week.css index 7e8a6973e..812ed7eff 100644 --- a/live-examples/html-examples/input/css/week.css +++ b/live-examples/html-examples/input/css/week.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/table-content/css/caption.css b/live-examples/html-examples/table-content/css/caption.css index 5ce7b31ba..774f049e9 100644 --- a/live-examples/html-examples/table-content/css/caption.css +++ b/live-examples/html-examples/table-content/css/caption.css @@ -11,7 +11,8 @@ table { font-size: .8rem; } -td, th { +td, +th { border: 1px solid rgb(190, 190, 190); padding: 7px 15px; } @@ -32,25 +33,13 @@ tr:nth-child(odd) td { background-color: rgb(240, 240, 240); } -@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'); -} - .heman { font: 1.4rem molot; - text-shadow: 1px 1px 1px #fff, - 2px 2px 1px #000; + text-shadow: 1px 1px 1px #fff, 2px 2px 1px #000; } .skeletor { - font: 1.7rem rapscallion; - letter-spacing: 3px; - text-shadow: 1px 1px 0px #fff, - 0 0 9px #000; + font: 1.7rem rapscallion; + letter-spacing: 3px; + text-shadow: 1px 1px 0 #fff, 0 0 9px #000; } diff --git a/live-examples/html-examples/text-content/css/dd.css b/live-examples/html-examples/text-content/css/dd.css index af51c5038..71671431a 100644 --- a/live-examples/html-examples/text-content/css/dd.css +++ b/live-examples/html-examples/text-content/css/dd.css @@ -1,9 +1,3 @@ -@font-face { - font-family: 'Fira Sans'; - src: local('FiraSans-Regular'), - url('/media/fonts/FiraSans-Regular.woff2') -} - p, dl { font: 1rem 'Fira Sans', sans-serif; diff --git a/live-examples/html-examples/text-content/css/dl.css b/live-examples/html-examples/text-content/css/dl.css index 4989aed69..d262a7b8b 100644 --- a/live-examples/html-examples/text-content/css/dl.css +++ b/live-examples/html-examples/text-content/css/dl.css @@ -1,10 +1,5 @@ -@font-face { - font-family: 'Fira Sans'; - src: local('FiraSans-Regular'), - url('/media/fonts/FiraSans-Regular.woff2') -} - -p, dl { +p, +dl { font: 1rem 'Fira Sans', sans-serif; } diff --git a/live-examples/html-examples/text-content/css/dt.css b/live-examples/html-examples/text-content/css/dt.css index e185ddbf4..66ceb0cab 100644 --- a/live-examples/html-examples/text-content/css/dt.css +++ b/live-examples/html-examples/text-content/css/dt.css @@ -1,17 +1,3 @@ -@font-face { - font-family: 'Fira Sans'; - src: local('FiraSans-Regular'), - url('/media/fonts/FiraSans-Regular.woff2') -} - -@font-face { - font-family: 'Fira Sans'; - font-weight: normal; - font-style: oblique; - src: local('FiraSans-SemiBoldItalic'), - url('/media/fonts/FiraSans-SemiBoldItalic.woff2') -} - p, dl { font: 1rem 'Fira Sans', sans-serif; diff --git a/live-examples/html-examples/text-content/css/ol.css b/live-examples/html-examples/text-content/css/ol.css index 4a189a67f..495bc8ff7 100644 --- a/live-examples/html-examples/text-content/css/ol.css +++ b/live-examples/html-examples/text-content/css/ol.css @@ -1,9 +1,3 @@ -@font-face { - font-family: "Fira Sans"; - src: local("FiraSans-Regular"), - url("/media/fonts/FiraSans-Regular.woff2") format("woff2"); -} - li { - font: 1rem "Fira Sans", sans-serif; + font: 1rem 'Fira Sans', sans-serif; } diff --git a/media/examples/DancingScript-Regular.ttf b/media/fonts/DancingScript-Regular.ttf similarity index 100% rename from media/examples/DancingScript-Regular.ttf rename to media/fonts/DancingScript-Regular.ttf diff --git a/site.json b/site.json index 6f534e267..93f11955d 100644 --- a/site.json +++ b/site.json @@ -51,6 +51,7 @@ ], "css": [ "css/editor-libs/common.css", + "css/editor-libs/shadow-fonts.css", "css/editor-libs/tabby.css", "css/tabbed-editor.css" ], From a97b514ec43fae02107adacb34594a235da59719 Mon Sep 17 00:00:00 2001 From: Will Bamberg Date: Mon, 9 Jul 2018 14:12:54 -0700 Subject: [PATCH 2/2] Update docs --- CONTRIBUTING-HTML.md | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/CONTRIBUTING-HTML.md b/CONTRIBUTING-HTML.md index bbb9d751b..68cbb4a8c 100644 --- 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,