Support preloading for Google Fonts

see #3916
see #4029

diff --git a/wcfsetup/install/files/font/families/Open Sans/font.css b/wcfsetup/install/files/font/families/Open Sans/font.css
index 7c2b71c6ed3808597b6db95a8f7ad7d763fc3b5f..1d023b7f7fc6463eeb95268699a6eb644e3b0db2 100644 (file)
--- a/wcfsetup/install/files/font/families/Open Sans/font.css
+++ b/wcfsetup/install/files/font/families/Open Sans/font.css
@@ -8,7 +8,7 @@
        font-family: 'Open Sans';
        font-style: normal;
        font-weight: 300;
-       src: local('Open Sans Light'), local('OpenSans-Light'),  url(getFont("OpenSans-Light.woff2", "Open%20Sans", "1595938323")) format('woff2');
+       src: local('Open Sans Light'), local('OpenSans-Light'), url(getFont("OpenSans-Light.woff2", "Open%20Sans", "1614334343")) format('woff2');
 }
 
 @font-face {
@@ -16,7 +16,7 @@
        font-family: 'Open Sans';
        font-style: italic;
        font-weight: 300;
-       src: local('Open Sans Light Italic'), local('OpenSans-LightItalic'),  url(getFont("OpenSans-LightItalic.woff2", "Open%20Sans", "1595938323")) format('woff2');
+       src: local('Open Sans Light Italic'), local('OpenSans-LightItalic'), url(getFont("OpenSans-LightItalic.woff2", "Open%20Sans", "1614334343")) format('woff2');
 }
 
 @font-face {
@@ -24,7 +24,7 @@
        font-family: 'Open Sans';
        font-style: normal;
        font-weight: 400;
-       src: local('Open Sans Regular'), local('OpenSans-Regular'),  url(getFont("OpenSans-Regular.woff2", "Open%20Sans", "1595938323")) format('woff2');
+       src: local('Open Sans Regular'), local('OpenSans-Regular'), url(getFont("OpenSans-Regular.woff2", "Open%20Sans", "1614334343")) format('woff2');
 }
 
 @font-face {
@@ -32,7 +32,7 @@
        font-family: 'Open Sans';
        font-style: italic;
        font-weight: 400;
-       src: local('Open Sans Italic'), local('OpenSans-Italic'),  url(getFont("OpenSans-Italic.woff2", "Open%20Sans", "1595938323")) format('woff2');
+       src: local('Open Sans Italic'), local('OpenSans-Italic'), url(getFont("OpenSans-Italic.woff2", "Open%20Sans", "1614334343")) format('woff2');
 }
 
 @font-face {
@@ -40,7 +40,7 @@
        font-family: 'Open Sans';
        font-style: normal;
        font-weight: 600;
-       src: local('Open Sans SemiBold'), local('OpenSans-SemiBold'),  url(getFont("OpenSans-SemiBold.woff2", "Open%20Sans", "1595938323")) format('woff2');
+       src: local('Open Sans SemiBold'), local('OpenSans-SemiBold'), url(getFont("OpenSans-SemiBold.woff2", "Open%20Sans", "1614334343")) format('woff2');
 }
 
 @font-face {
@@ -48,7 +48,7 @@
        font-family: 'Open Sans';
        font-style: italic;
        font-weight: 600;
-       src: local('Open Sans SemiBold Italic'), local('OpenSans-SemiBoldItalic'),  url(getFont("OpenSans-SemiBoldItalic.woff2", "Open%20Sans", "1595938323")) format('woff2');
+       src: local('Open Sans SemiBold Italic'), local('OpenSans-SemiBoldItalic'), url(getFont("OpenSans-SemiBoldItalic.woff2", "Open%20Sans", "1614334343")) format('woff2');
 }
 
 @font-face {
@@ -56,7 +56,7 @@
        font-family: 'Open Sans';
        font-style: normal;
        font-weight: 700;
-       src: local('Open Sans Bold'), local('OpenSans-Bold'),  url(getFont("OpenSans-Bold.woff2", "Open%20Sans", "1595938323")) format('woff2');
+       src: local('Open Sans Bold'), local('OpenSans-Bold'), url(getFont("OpenSans-Bold.woff2", "Open%20Sans", "1614334343")) format('woff2');
 }
 
 @font-face {
@@ -64,7 +64,7 @@
        font-family: 'Open Sans';
        font-style: italic;
        font-weight: 700;
-       src: local('Open Sans Bold Italic'), local('OpenSans-BoldItalic'),  url(getFont("OpenSans-BoldItalic.woff2", "Open%20Sans", "1595938323")) format('woff2');
+       src: local('Open Sans Bold Italic'), local('OpenSans-BoldItalic'), url(getFont("OpenSans-BoldItalic.woff2", "Open%20Sans", "1614334343")) format('woff2');
 }
 
 @font-face {
@@ -72,7 +72,7 @@
        font-family: 'Open Sans';
        font-style: normal;
        font-weight: 800;
-       src: local('Open Sans ExtraBold'), local('OpenSans-ExtraBold'),  url(getFont("OpenSans-ExtraBold.woff2", "Open%20Sans", "1595938323")) format('woff2');
+       src: local('Open Sans ExtraBold'), local('OpenSans-ExtraBold'), url(getFont("OpenSans-ExtraBold.woff2", "Open%20Sans", "1614334343")) format('woff2');
 }
 
 @font-face {
@@ -80,6 +80,11 @@
        font-family: 'Open Sans';
        font-style: italic;
        font-weight: 800;
-       src: local('Open Sans ExtraBold Italic'), local('OpenSans-ExtraBoldItalic'),  url(getFont("OpenSans-ExtraBoldItalic.woff2", "Open%20Sans", "1595938323")) format('woff2');
+       src: local('Open Sans ExtraBold Italic'), local('OpenSans-ExtraBoldItalic'), url(getFont("OpenSans-ExtraBoldItalic.woff2", "Open%20Sans", "1614334343")) format('woff2');
 }
 
+woltlab-suite-preload:root {                     --woltlab-suite-preload: #{preload(
+                        getFont("OpenSans-Regular.woff2", "Open%20Sans", "1614334343"),
+                        $as: "font",
+                        $crossorigin: true
+                    )}; }
\ No newline at end of file

diff --git a/wcfsetup/install/files/lib/system/style/FontManager.class.php b/wcfsetup/install/files/lib/system/style/FontManager.class.php
index d573067b0232704f2a4b843414eaff95f49f50a9..f93d09b555d29e6b9105355ade3e7ace777dbe14 100644 (file)
--- a/wcfsetup/install/files/lib/system/style/FontManager.class.php
+++ b/wcfsetup/install/files/lib/system/style/FontManager.class.php
@@ -92,6 +92,12 @@ class FontManager extends SingletonFactory
 
             $css = $manifest['css'];
 
+            $preload = [];
+            if (isset($manifest['preload']) && \is_array($manifest['preload'])) {
+                $preload = $manifest['preload'];
+            }
+
+            $preloadRequests = "";
             foreach ($manifest['font_files'] as $filename) {
                 if ($filename !== \basename($filename)) {
                     throw new \InvalidArgumentException("Invalid filename '" . $filename . "' given.");
@@ -117,8 +123,29 @@ class FontManager extends SingletonFactory
                     ),
                     $css
                 );
+
+                if (\in_array($filename, $preload)) {
+                    $preloadRequests .= \sprintf(
+<<<'EOT'
+                    --woltlab-suite-preload: #{preload(
+                        %s,
+                        $as: "font",
+                        $crossorigin: true
+                    )};
+EOT
+                        ,
+                        \sprintf(
+                            'getFont("%s", "%s", "%d")',
+                            \rawurlencode($filename),
+                            \rawurlencode($family),
+                            TIME_NOW
+                        )
+                    );
+                }
             }
 
+            $css .= "woltlab-suite-preload:root { ${preloadRequests} }";
+
             \file_put_contents($this->getCssFilename($family), $css);
 
             return $manifest;