From c8a07a5a4593deed6383f120591d794550e03496 Mon Sep 17 00:00:00 2001 From: TeddTech Date: Fri, 15 May 2020 12:20:40 -0700 Subject: [PATCH 1/4] FLUID-6499: add font display swap for font faces --- demos/uiOptions/css/uiOptions.css | 6 ++++++ src/components/orator/css/Orator.css | 3 ++- src/components/overviewPanel/css/OverviewPanel.css | 5 +++++ src/framework/preferences/css/stylus/PrefsEditor.styl | 1 + .../css/stylus/SeparatedPanelPrefsEditor.styl | 3 +++ .../css/stylus/SeparatedPanelPrefsEditorFrame.styl | 3 +++ src/framework/preferences/css/stylus/utils/Fonts.styl | 9 +++++---- 7 files changed, 25 insertions(+), 5 deletions(-) diff --git a/demos/uiOptions/css/uiOptions.css b/demos/uiOptions/css/uiOptions.css index 62ef64bdc9..b570aba3be 100644 --- a/demos/uiOptions/css/uiOptions.css +++ b/demos/uiOptions/css/uiOptions.css @@ -4,26 +4,32 @@ @font-face { font-family: Lato; src: url(../fonts/Lato-Regular.woff); + font-display: swap; } @font-face { font-family: LatoLight; src: url(../fonts/Lato-Light.woff); + font-display: swap; } @font-face { font-family: LatoLightItalic; src: url(../fonts/Lato-LightItalic.woff); + font-display: swap; } @font-face { font-family: LatoBlack; src: url(../fonts/Lato-Black.woff); + font-display: swap; } @font-face { font-family: LatoRegular; src: url(../fonts/Lato-Regular.woff); + font-display: swap; } @font-face { font-family: LoveYaLikeASister; src: url(../fonts/LoveYaLikeASister.ttf); + font-display: swap; } diff --git a/src/components/orator/css/Orator.css b/src/components/orator/css/Orator.css index c42630bd09..267b48881d 100644 --- a/src/components/orator/css/Orator.css +++ b/src/components/orator/css/Orator.css @@ -1,6 +1,7 @@ @font-face { font-family:'Orator-Icons'; - src:url("../fonts/Orator-Icons.woff") + src:url("../fonts/Orator-Icons.woff"); + font-display: swap } /* controller */ diff --git a/src/components/overviewPanel/css/OverviewPanel.css b/src/components/overviewPanel/css/OverviewPanel.css index 3d42ad5a19..6d14f98cd8 100644 --- a/src/components/overviewPanel/css/OverviewPanel.css +++ b/src/components/overviewPanel/css/OverviewPanel.css @@ -2,27 +2,32 @@ @font-face { font-family: "Icons"; src:url('../fonts/OverviewPanel-Icons.woff'); + font-display: swap; } @font-face { font-family: 'OpenSans'; src: url('../../../lib/opensans/fonts/OpenSans-Regular.woff'); + font-display: swap; } @font-face { font-family: 'OpenSans'; src: url('../../../lib/opensans/fonts/OpenSans-Bold.woff'); + font-display: swap; font-weight: bold; } @font-face { font-family: 'RobotoSlab'; src: url('../../../lib/roboto/fonts/Roboto-Slab-Regular.woff'); + font-display: swap; } @font-face { font-family: 'RobotoSlab'; src: url('../../../lib/roboto/fonts/Roboto-Slab-Bold.woff'); + font-display: swap; font-weight: bold; } diff --git a/src/framework/preferences/css/stylus/PrefsEditor.styl b/src/framework/preferences/css/stylus/PrefsEditor.styl index c0fc919900..3160c5a32e 100644 --- a/src/framework/preferences/css/stylus/PrefsEditor.styl +++ b/src/framework/preferences/css/stylus/PrefsEditor.styl @@ -7,6 +7,7 @@ @font-face { font-family: 'PrefsFramework-Icons'; src: url('../fonts/PrefsFramework-Icons.woff'); + font-display: swap; } .fl-prefsEditor { diff --git a/src/framework/preferences/css/stylus/SeparatedPanelPrefsEditor.styl b/src/framework/preferences/css/stylus/SeparatedPanelPrefsEditor.styl index 0ff580ed78..170a277d79 100644 --- a/src/framework/preferences/css/stylus/SeparatedPanelPrefsEditor.styl +++ b/src/framework/preferences/css/stylus/SeparatedPanelPrefsEditor.styl @@ -5,6 +5,7 @@ src:url('../../../lib/opensans/fonts/OpenSans-Light.woff'); font-weight: 300; font-style: normal; + font-display: swap; } @font-face { @@ -12,6 +13,7 @@ src:url('../../../lib/opensans/fonts/OpenSans-Regular.woff'); font-weight: normal; font-style: normal; + font-display: swap; } @font-face { @@ -19,6 +21,7 @@ src:url('../../../lib/opensans/fonts/OpenSans-SemiBold.woff'); font-weight: 600; font-style: normal; + font-display: swap; } // Top bar and show/hide button diff --git a/src/framework/preferences/css/stylus/SeparatedPanelPrefsEditorFrame.styl b/src/framework/preferences/css/stylus/SeparatedPanelPrefsEditorFrame.styl index 19be9b03b2..bc57ce7173 100644 --- a/src/framework/preferences/css/stylus/SeparatedPanelPrefsEditorFrame.styl +++ b/src/framework/preferences/css/stylus/SeparatedPanelPrefsEditorFrame.styl @@ -5,6 +5,7 @@ src: url("../../../lib/opensans/fonts/OpenSans-Light.woff"); font-weight: 300; font-style: normal; + font-display: swap; } @font-face { @@ -12,6 +13,7 @@ src:url('../../../lib/opensans/fonts/OpenSans-Regular.woff'); font-weight: normal; font-style: normal; + font-display: swap; } @font-face { @@ -19,6 +21,7 @@ src:url('../../../lib/opensans/fonts/OpenSans-SemiBold.woff'); font-weight: 600; font-style: normal; + font-display: swap; } html { diff --git a/src/framework/preferences/css/stylus/utils/Fonts.styl b/src/framework/preferences/css/stylus/utils/Fonts.styl index 49ddfe7bae..878d18161f 100644 --- a/src/framework/preferences/css/stylus/utils/Fonts.styl +++ b/src/framework/preferences/css/stylus/utils/Fonts.styl @@ -35,7 +35,7 @@ fontFaces = { fontWeight: 600 fontStyle: normal }, - italic: { + italic: { filename:"OpenDyslexic-Italic.woff" fontWeight: normal fontStyle: italic @@ -56,25 +56,26 @@ build-fonts-Enactors(textFont, textFontFaces) { fontDirectory = textFontFaces[fontFamilyName].fontDirectory fontFamily = textFontFaces[fontFamilyName].fontFamily fontFamilyDefs = textFontFaces[fontFamilyName].definitions; - for def in fontFamilyDefs { + for def in fontFamilyDefs { fontDef = textFontFaces[fontFamilyName][definitions][def] @font-face { font-family: fontFamily; src: url(fontDirectory + fontDef.filename); font-weight: fontDef.fontWeight; font-style: fontDef.fontStyle; + font-display: swap; } } } for fontName in textFont { font = textFont[fontName].fontFamily; - + {fontName}, {fontName} * { &:not([class*='icon']) { font-family: unquote(font) !important; } } - } + } } From 240dd486a07a893f7a98ac999a12c512fa2c1ec5 Mon Sep 17 00:00:00 2001 From: TeddTech Date: Fri, 15 May 2020 13:13:36 -0700 Subject: [PATCH 2/4] FLUID-6499: added font display swap for font faces --- src/components/uploader/css/Uploader.css | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/uploader/css/Uploader.css b/src/components/uploader/css/Uploader.css index 6b96e99bb9..1e8d9f74af 100644 --- a/src/components/uploader/css/Uploader.css +++ b/src/components/uploader/css/Uploader.css @@ -1,6 +1,7 @@ @font-face { font-family: 'InfusionIcons'; src: url('../fonts/Uploader-Icons.woff'); + font-display: swap; } /* From 5610bc5c4c93e868375162276f87195737e905b9 Mon Sep 17 00:00:00 2001 From: TeddTech Date: Sun, 17 May 2020 17:56:42 -0700 Subject: [PATCH 3/4] FLUID-6499: add ; to end of line 4 --- src/components/orator/css/Orator.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/orator/css/Orator.css b/src/components/orator/css/Orator.css index 267b48881d..ce66d7db8f 100644 --- a/src/components/orator/css/Orator.css +++ b/src/components/orator/css/Orator.css @@ -1,7 +1,7 @@ @font-face { font-family:'Orator-Icons'; src:url("../fonts/Orator-Icons.woff"); - font-display: swap + font-display: swap; } /* controller */ From 270a76ebbd6ac4c9b258066b27bb6a440cce9bb1 Mon Sep 17 00:00:00 2001 From: TeddTech Date: Fri, 22 May 2020 10:03:21 -0700 Subject: [PATCH 4/4] FLUID-6499: remove font display swap from icon font faces --- src/components/orator/css/Orator.css | 1 - src/components/overviewPanel/css/OverviewPanel.css | 1 - src/components/uploader/css/Uploader.css | 1 - src/framework/preferences/css/stylus/PrefsEditor.styl | 1 - 4 files changed, 4 deletions(-) diff --git a/src/components/orator/css/Orator.css b/src/components/orator/css/Orator.css index ce66d7db8f..81095b0862 100644 --- a/src/components/orator/css/Orator.css +++ b/src/components/orator/css/Orator.css @@ -1,7 +1,6 @@ @font-face { font-family:'Orator-Icons'; src:url("../fonts/Orator-Icons.woff"); - font-display: swap; } /* controller */ diff --git a/src/components/overviewPanel/css/OverviewPanel.css b/src/components/overviewPanel/css/OverviewPanel.css index 6d14f98cd8..cfed9b1741 100644 --- a/src/components/overviewPanel/css/OverviewPanel.css +++ b/src/components/overviewPanel/css/OverviewPanel.css @@ -2,7 +2,6 @@ @font-face { font-family: "Icons"; src:url('../fonts/OverviewPanel-Icons.woff'); - font-display: swap; } @font-face { diff --git a/src/components/uploader/css/Uploader.css b/src/components/uploader/css/Uploader.css index 1e8d9f74af..6b96e99bb9 100644 --- a/src/components/uploader/css/Uploader.css +++ b/src/components/uploader/css/Uploader.css @@ -1,7 +1,6 @@ @font-face { font-family: 'InfusionIcons'; src: url('../fonts/Uploader-Icons.woff'); - font-display: swap; } /* diff --git a/src/framework/preferences/css/stylus/PrefsEditor.styl b/src/framework/preferences/css/stylus/PrefsEditor.styl index 3160c5a32e..c0fc919900 100644 --- a/src/framework/preferences/css/stylus/PrefsEditor.styl +++ b/src/framework/preferences/css/stylus/PrefsEditor.styl @@ -7,7 +7,6 @@ @font-face { font-family: 'PrefsFramework-Icons'; src: url('../fonts/PrefsFramework-Icons.woff'); - font-display: swap; } .fl-prefsEditor {