Favor FontFaceObserver

modules/user_preferences/css/user-preferences.css

@@ -10,6 +10,11 @@
   --font-family-dyslexic: "Open Dyslexic", "Lexia Readable", "Dyslexie", sans-serif;
 }
 
+@font-face {
+  font-family: "Open Dyslexic";
+  src: url("https://cdn.jsdelivr.net/gh/antijingoist/open-dyslexic@20160623-Stable/woff/OpenDyslexic-Regular.woff") format('woff');
+}
+
 #sidebar_first {
   -webkit-transition: all 0.3s ease;
   -o-transition: all 0.3s ease;

modules/user_preferences/css/user-preferences.min.css

-:root{--font-family-sans-serif:"Open Sans",-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;--font-family-serif:"Apple Garamond",Garamond,Georgia,"Times New Roman",Times,serif;--font-family-dyslexic:"Open Dyslexic","Lexia Readable","Dyslexie",sans-serif}#sidebar_first{transition:all .3s ease}#font-sans{font-size:20px;padding:0 1rem}#font-dyslexic{font-size:20px;padding:3px 1rem 0}.sidebar.collapsed{display:none}.links .nav-link{padding:0}.links .nav-link a{padding:0 .75rem}.links .nav-link:first-child a{padding-left:0}.links .nav-link:last-child a{padding-right:0}.modal-content{background-color:#f5f5f3}.modal-content dt{margin-bottom:.25rem}.modal-content kbd{cursor:help}.dark-mode{opacity:.75}.dark-mode .modal-content{color:#becbda;background-color:#1e2631!important}.dark-mode .modal-header{border-bottom:1px solid #283340}.dark-mode .modal-footer{border-top:1px solid #283340}.dark-mode .breadcrumb{box-shadow:none}.dark-mode .breadcrumb,.dark-mode .card,.dark-mode .jumbotron{background-color:#283340}.dark-mode .paragraph-title{color:#99adc5!important;border-bottom:1px solid rgba(190,203,218,.45)!important}.dark-mode svg.svg-inline--fa path{fill:#99adc5!important}.dark-mode .glossary-term{color:#99adc5}.dark-mode .nav-item a,.dark-mode .nav-link,.dark-mode a{color:#48b1ce}.dark-mode .nav-pills .nav-link:active,.dark-mode .nav-pills .nav-link:focus,.dark-mode .nav-pills .nav-link:hover{background-color:#3b444f}.dark-mode .btn-secondary{color:#becbda}.dark-mode .btn-outline-secondary:hover,.dark-mode .btn-secondary{background-color:#3b4c60;border-color:#3b4c60}.dark-mode.reading-mode .card{color:#becbda;background-color:transparent}.dark-mode.reading-mode .breadcrumb{background-color:transparent;padding-left:0}.dark-mode body{color:#becbda;background-color:#1e2631!important}.reading-mode body{background-color:#fff}.reading-mode .breadcrumb{box-shadow:none;background-color:transparent;padding:.75rem 1rem .75rem 0}.reading-mode .card{box-shadow:none;border-radius:0;background-color:transparent}.reading-mode .paragraph{border:none!important}.reading-mode .paragraph,.reading-mode .paragraph-title{background-color:transparent!important}.reading-mode .card-block,.reading-mode .card-body,.reading-mode .field__item>.card-block{padding:1rem 0}.reading-mode .jumbotron{box-shadow:none;border-radius:0;padding:0;background-color:transparent}.reading-mode iframe{border-radius:0}.reading-mode .paragraph--type-minitab-example .thumbnail{margin:0 .65rem 0 0}.font-sans,.font-sans body{font-family:Open Sans,-apple-system,system-ui,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Droid Sans,Helvetica Neue,Arial,sans-serif;font-family:var(--font-family-sans-serif)}.font-serif,.font-serif body{font-family:Apple Garamond,Garamond,Georgia,Times New Roman,Times,serif;font-family:var(--font-family-serif)}.font-dyslexic,.font-dyslexic body{font-family:Open Dyslexic,Lexia Readable,Dyslexie,sans-serif;font-family:var(--font-family-dyslexic)}.col-form-label{display:block;font-size:80%}.btn-outline-secondary{color:#adb5bd;background-color:transparent;background-image:none;border-color:#adb5bd}.btn-outline-secondary:hover{color:#fff;background-color:#adb5bd;border-color:#adb5bd}@media (min-width:768px){.sidebar.collapsed{display:block;opacity:0;margin-left:-25%}}@media (max-width:768px){.togglesidebar{margin-left:-.75rem}}
\ No newline at end of file
+:root{--font-family-sans-serif:"Open Sans",-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;--font-family-serif:"Apple Garamond",Garamond,Georgia,"Times New Roman",Times,serif;--font-family-dyslexic:"Open Dyslexic","Lexia Readable","Dyslexie",sans-serif}@font-face{font-family:Open Dyslexic;src:url(https://cdn.jsdelivr.net/gh/antijingoist/open-dyslexic@20160623-Stable/woff/OpenDyslexic-Regular.woff) format("woff")}#sidebar_first{transition:all .3s ease}#font-sans{font-size:20px;padding:0 1rem}#font-dyslexic{font-size:20px;padding:3px 1rem 0}.sidebar.collapsed{display:none}.links .nav-link{padding:0}.links .nav-link a{padding:0 .75rem}.links .nav-link:first-child a{padding-left:0}.links .nav-link:last-child a{padding-right:0}.modal-content{background-color:#f5f5f3}.modal-content dt{margin-bottom:.25rem}.modal-content kbd{cursor:help}.dark-mode{opacity:.75}.dark-mode .modal-content{color:#becbda;background-color:#1e2631!important}.dark-mode .modal-header{border-bottom:1px solid #283340}.dark-mode .modal-footer{border-top:1px solid #283340}.dark-mode .breadcrumb{box-shadow:none}.dark-mode .breadcrumb,.dark-mode .card,.dark-mode .jumbotron{background-color:#283340}.dark-mode .paragraph-title{color:#99adc5!important;border-bottom:1px solid rgba(190,203,218,.45)!important}.dark-mode svg.svg-inline--fa path{fill:#99adc5!important}.dark-mode .glossary-term{color:#99adc5}.dark-mode .nav-item a,.dark-mode .nav-link,.dark-mode a{color:#48b1ce}.dark-mode .nav-pills .nav-link:active,.dark-mode .nav-pills .nav-link:focus,.dark-mode .nav-pills .nav-link:hover{background-color:#3b444f}.dark-mode .btn-secondary{color:#becbda}.dark-mode .btn-outline-secondary:hover,.dark-mode .btn-secondary{background-color:#3b4c60;border-color:#3b4c60}.dark-mode.reading-mode .card{color:#becbda;background-color:transparent}.dark-mode.reading-mode .breadcrumb{background-color:transparent;padding-left:0}.dark-mode body{color:#becbda;background-color:#1e2631!important}.reading-mode body{background-color:#fff}.reading-mode .breadcrumb{box-shadow:none;background-color:transparent;padding:.75rem 1rem .75rem 0}.reading-mode .card{box-shadow:none;border-radius:0;background-color:transparent}.reading-mode .paragraph{border:none!important}.reading-mode .paragraph,.reading-mode .paragraph-title{background-color:transparent!important}.reading-mode .card-block,.reading-mode .card-body,.reading-mode .field__item>.card-block{padding:1rem 0}.reading-mode .jumbotron{box-shadow:none;border-radius:0;padding:0;background-color:transparent}.reading-mode iframe{border-radius:0}.reading-mode .paragraph--type-minitab-example .thumbnail{margin:0 .65rem 0 0}.font-sans,.font-sans body{font-family:Open Sans,-apple-system,system-ui,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Droid Sans,Helvetica Neue,Arial,sans-serif;font-family:var(--font-family-sans-serif)}.font-serif,.font-serif body{font-family:Apple Garamond,Garamond,Georgia,Times New Roman,Times,serif;font-family:var(--font-family-serif)}.font-dyslexic,.font-dyslexic body{font-family:Open Dyslexic,Lexia Readable,Dyslexie,sans-serif;font-family:var(--font-family-dyslexic)}.col-form-label{display:block;font-size:80%}.btn-outline-secondary{color:#adb5bd;background-color:transparent;background-image:none;border-color:#adb5bd}.btn-outline-secondary:hover{color:#fff;background-color:#adb5bd;border-color:#adb5bd}@media (min-width:768px){.sidebar.collapsed{display:block;opacity:0;margin-left:-25%}}@media (max-width:768px){.togglesidebar{margin-left:-.75rem}}
\ No newline at end of file

modules/user_preferences/js/src/user-preferences.js

@@ -73,7 +73,8 @@ const userPreferences = ({
     return this;
   },
   fetchFontFace(params){
-    var font = new FontFace(params.name, "url("+params.url+")");
+    let FontFaceObserver = require('fontfaceobserver');
+    let font = new FontFaceObserver(params.name);
 
     font.load().then(function() {
       document.fonts.add(font);