Add configs for WOFF 2.0 font files (.woff2)

* Serve `.woff2` files with far-future expires headers and with the current specification suggested media type, namely `application/font-woff2` (note: this media type is not yet registered with IANA, however, things aren't likely to change). * Ensure that `.woff2` files aren't served with any of the `HTML` document related headers, and they are accessible even cross-domain. Node: There is no need to compress WOFF 2.0 fonts as they are already compressed! - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Huge thanks to Vladimir Levantovsky for all his help! Ref: http://www.w3.org/TR/WOFF2/ #32 Close #32
h5bp · Jul 3, 2014 · 6ce3707 · 6ce3707
1 parent bb33819
commit 6ce3707
Show file tree

Hide file tree

Showing 6 changed files with 50 additions and 44 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,7 @@
 ### HEAD
 
+* Add configs for WOFF 2.0 font files (`.woff2`)
+  [[#32](https://github.com/h5bp/server-configs-apache/issues/32)].
 * Add configs for GeoJSON files (`.geojson`)
   [[16d3965](https://github.com/h5bp/server-configs-apache/commit/16d39657164a397c8584843296fa04dc297c4b55)].
 

diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "private": true,
   "devDependencies": {
-    "server-configs-test": "https://github.com/h5bp/server-configs-test/tarball/0.1.0"
+    "server-configs-test": "https://github.com/h5bp/server-configs-test/tarball/0.2.0"
   },
   "scripts": {
     "test": "server-configs-test"

diff --git a/src/.htaccess b/src/.htaccess
@@ -28,7 +28,7 @@
 # By default allow cross-origin access to web fonts.
 
 <IfModule mod_headers.c>
-    <FilesMatch "\.(eot|otf|tt[cf]|woff)$">
+    <FilesMatch "\.(eot|otf|tt[cf]|woff2?)$">
         Header set Access-Control-Allow-Origin "*"
     </FilesMatch>
 </IfModule>
@@ -97,7 +97,7 @@ Options -MultiViews
     Header set X-UA-Compatible "IE=edge"
     # `mod_headers` cannot match based on the content-type, however, this header
     # should be send only for HTML documents and not for the other resources
-    <FilesMatch "\.(appcache|atom|crx|css|cur|eot|f4[abpv]|flv|geojson|gif|htc|ico|jpe?g|js|json(ld)?|m4[av]|manifest|map|mp4|oex|og[agv]|opus|otf|pdf|png|rdf|rss|safariextz|svgz?|swf|tt[cf]|txt|vcf|vtt|webapp|web[mp]|woff|xml|xpi)$">
+    <FilesMatch "\.(appcache|atom|crx|css|cur|eot|f4[abpv]|flv|geojson|gif|htc|ico|jpe?g|js|json(ld)?|m4[av]|manifest|map|mp4|oex|og[agv]|opus|otf|pdf|png|rdf|rss|safariextz|svgz?|swf|tt[cf]|txt|vcf|vtt|webapp|web[mp]|woff2?|xml|xpi)$">
         Header unset X-UA-Compatible
     </FilesMatch>
 </IfModule>
@@ -184,6 +184,7 @@ Options -MultiViews
 
   # Web fonts
     AddType application/font-woff                       woff
+    AddType application/font-woff2                      woff2
     AddType application/vnd.ms-fontobject               eot
 
     # Browsers usually ignore the font media types and simply sniff
@@ -331,7 +332,7 @@ AddDefaultCharset utf-8
 
 # <IfModule mod_headers.c>
 #     Header set X-Frame-Options "DENY"
-#     <FilesMatch "\.(appcache|atom|crx|css|cur|eot|f4[abpv]|flv|geojson|gif|htc|ico|jpe?g|js|json(ld)?|m4[av]|manifest|map|mp4|oex|og[agv]|opus|otf|pdf|png|rdf|rss|safariextz|svgz?|swf|tt[cf]|txt|vcf|vtt|webapp|web[mp]|woff|xml|xpi)$">
+#     <FilesMatch "\.(appcache|atom|crx|css|cur|eot|f4[abpv]|flv|geojson|gif|htc|ico|jpe?g|js|json(ld)?|m4[av]|manifest|map|mp4|oex|og[agv]|opus|otf|pdf|png|rdf|rss|safariextz|svgz?|swf|tt[cf]|txt|vcf|vtt|webapp|web[mp]|woff2?|xml|xpi)$">
 #         Header unset X-Frame-Options
 #     </FilesMatch>
 # </IfModule>
@@ -356,7 +357,7 @@ AddDefaultCharset utf-8
 
 # <IfModule mod_headers.c>
 #     Header set Content-Security-Policy "script-src 'self'; object-src 'self'"
-#     <FilesMatch "\.(appcache|atom|crx|css|cur|eot|f4[abpv]|flv|geojson|gif|htc|ico|jpe?g|js|json(ld)?|m4[av]|manifest|map|mp4|oex|og[agv]|opus|otf|pdf|png|rdf|rss|safariextz|svgz?|swf|tt[cf]|txt|vcf|vtt|webapp|web[mp]|woff|xml|xpi)$">
+#     <FilesMatch "\.(appcache|atom|crx|css|cur|eot|f4[abpv]|flv|geojson|gif|htc|ico|jpe?g|js|json(ld)?|m4[av]|manifest|map|mp4|oex|og[agv]|opus|otf|pdf|png|rdf|rss|safariextz|svgz?|swf|tt[cf]|txt|vcf|vtt|webapp|web[mp]|woff2?|xml|xpi)$">
 #         Header unset Content-Security-Policy
 #     </FilesMatch>
 # </IfModule>
@@ -486,7 +487,7 @@ AddDefaultCharset utf-8
 # <IfModule mod_headers.c>
 #     #                           (1)    (2)
 #     Header set X-XSS-Protection "1; mode=block"
-#     <FilesMatch "\.(appcache|atom|crx|css|cur|eot|f4[abpv]|flv|geojson|gif|htc|ico|jpe?g|js|json(ld)?|m4[av]|manifest|map|mp4|oex|og[agv]|opus|otf|pdf|png|rdf|rss|safariextz|svgz?|swf|tt[cf]|txt|vcf|vtt|webapp|web[mp]|woff|xml|xpi)$">
+#     <FilesMatch "\.(appcache|atom|crx|css|cur|eot|f4[abpv]|flv|geojson|gif|htc|ico|jpe?g|js|json(ld)?|m4[av]|manifest|map|mp4|oex|og[agv]|opus|otf|pdf|png|rdf|rss|safariextz|svgz?|swf|tt[cf]|txt|vcf|vtt|webapp|web[mp]|woff2?|xml|xpi)$">
 #         Header unset X-XSS-Protection
 #     </FilesMatch>
 # </IfModule>
@@ -689,6 +690,7 @@ FileETag None
 
   # Web fonts
     ExpiresByType application/font-woff                 "access plus 1 month"
+    ExpiresByType application/font-woff2                "access plus 1 month"
     ExpiresByType application/vnd.ms-fontobject         "access plus 1 month"
     ExpiresByType application/x-font-ttf                "access plus 1 month"
     ExpiresByType font/opentype                         "access plus 1 month"

diff --git a/test/fixtures/.htaccess b/test/fixtures/.htaccess
@@ -10,7 +10,7 @@
 # ------------------------------------------------------------------------------
 
 <IfModule mod_headers.c>
-    <FilesMatch "\.(eot|otf|tt[cf]|woff)$">
+    <FilesMatch "\.(eot|otf|tt[cf]|woff2?)$">
         Header set Access-Control-Allow-Origin "*"
     </FilesMatch>
 </IfModule>
@@ -64,7 +64,7 @@ ErrorDocument 404 /404.html
     Header set X-UA-Compatible "IE=edge"
     # `mod_headers` cannot match based on the content-type, however, this header
     # should be send only for HTML documents and not for the other resources
-    <FilesMatch "\.(appcache|atom|crx|css|cur|eot|f4[abpv]|flv|geojson|gif|htc|ico|jpe?g|js|json(ld)?|m4[av]|manifest|map|mp4|oex|og[agv]|opus|otf|pdf|png|rdf|rss|safariextz|svgz?|swf|tt[cf]|txt|vcf|vtt|webapp|web[mp]|woff|xml|xpi)$">
+    <FilesMatch "\.(appcache|atom|crx|css|cur|eot|f4[abpv]|flv|geojson|gif|htc|ico|jpe?g|js|json(ld)?|m4[av]|manifest|map|mp4|oex|og[agv]|opus|otf|pdf|png|rdf|rss|safariextz|svgz?|swf|tt[cf]|txt|vcf|vtt|webapp|web[mp]|woff2?|xml|xpi)$">
         Header unset X-UA-Compatible
     </FilesMatch>
 </IfModule>
@@ -119,6 +119,7 @@ ErrorDocument 404 /404.html
 
   # Web fonts
     AddType application/font-woff                       woff
+    AddType application/font-woff2                      woff2
     AddType application/vnd.ms-fontobject               eot
 
     AddType application/x-font-ttf                      ttc ttf
@@ -207,7 +208,7 @@ AddDefaultCharset utf-8
 
 <IfModule mod_headers.c>
     Header set X-Frame-Options "DENY"
-    <FilesMatch "\.(appcache|atom|crx|css|cur|eot|f4[abpv]|flv|geojson|gif|htc|ico|jpe?g|js|json(ld)?|m4[av]|manifest|map|mp4|oex|og[agv]|opus|otf|pdf|png|rdf|rss|safariextz|svgz?|swf|tt[cf]|txt|vcf|vtt|webapp|web[mp]|woff|xml|xpi)$">
+    <FilesMatch "\.(appcache|atom|crx|css|cur|eot|f4[abpv]|flv|geojson|gif|htc|ico|jpe?g|js|json(ld)?|m4[av]|manifest|map|mp4|oex|og[agv]|opus|otf|pdf|png|rdf|rss|safariextz|svgz?|swf|tt[cf]|txt|vcf|vtt|webapp|web[mp]|woff2?|xml|xpi)$">
         Header unset X-Frame-Options
     </FilesMatch>
 </IfModule>
@@ -218,7 +219,7 @@ AddDefaultCharset utf-8
 
 <IfModule mod_headers.c>
     Header set Content-Security-Policy "script-src 'self'; object-src 'self'"
-    <FilesMatch "\.(appcache|atom|crx|css|cur|eot|f4[abpv]|flv|geojson|gif|htc|ico|jpe?g|js|json(ld)?|m4[av]|manifest|map|mp4|oex|og[agv]|opus|otf|pdf|png|rdf|rss|safariextz|svgz?|swf|tt[cf]|txt|vcf|vtt|webapp|web[mp]|woff|xml|xpi)$">
+    <FilesMatch "\.(appcache|atom|crx|css|cur|eot|f4[abpv]|flv|geojson|gif|htc|ico|jpe?g|js|json(ld)?|m4[av]|manifest|map|mp4|oex|og[agv]|opus|otf|pdf|png|rdf|rss|safariextz|svgz?|swf|tt[cf]|txt|vcf|vtt|webapp|web[mp]|woff2?|xml|xpi)$">
         Header unset Content-Security-Policy
     </FilesMatch>
 </IfModule>
@@ -279,7 +280,7 @@ AddDefaultCharset utf-8
 
 <IfModule mod_headers.c>
     Header set X-XSS-Protection "1; mode=block"
-    <FilesMatch "\.(appcache|atom|crx|css|cur|eot|f4[abpv]|flv|geojson|gif|htc|ico|jpe?g|js|json(ld)?|m4[av]|manifest|map|mp4|oex|og[agv]|opus|otf|pdf|png|rdf|rss|safariextz|svgz?|swf|tt[cf]|txt|vcf|vtt|webapp|web[mp]|woff|xml|xpi)$">
+    <FilesMatch "\.(appcache|atom|crx|css|cur|eot|f4[abpv]|flv|geojson|gif|htc|ico|jpe?g|js|json(ld)?|m4[av]|manifest|map|mp4|oex|og[agv]|opus|otf|pdf|png|rdf|rss|safariextz|svgz?|swf|tt[cf]|txt|vcf|vtt|webapp|web[mp]|woff2?|xml|xpi)$">
         Header unset X-XSS-Protection
     </FilesMatch>
 </IfModule>
@@ -416,6 +417,7 @@ FileETag None
 
   # Web fonts
     ExpiresByType application/font-woff                 "access plus 1 month"
+    ExpiresByType application/font-woff2                "access plus 1 month"
     ExpiresByType application/vnd.ms-fontobject         "access plus 1 month"
     ExpiresByType application/x-font-ttf                "access plus 1 month"
     ExpiresByType font/opentype                         "access plus 1 month"

diff --git a/test/fixtures/test.woff2 b/test/fixtures/test.woff2
diff --git a/test/tests.js b/test/tests.js
@@ -27,11 +27,11 @@ exports = module.exports = {
                         '<!doctype html>\n' +
                         '<html lang="en">\n' +
                         '<head>\n' +
-                        ' <meta charset="utf-8">\n' +
-                        ' <title>404</title>\n' +
+                        '    <meta charset="utf-8">\n'+
+                        '    <title>404</title>\n' +
                         '</head>\n' +
                         '<body>\n' +
-                        ' 404\n' +
+                        '    404\n' +
                         '</body>\n' +
                         '</html>\n',
                     responseHeaders: null,
@@ -53,11 +53,11 @@ exports = module.exports = {
                         '<!doctype html>\n' +
                         '<html lang="en">\n' +
                         '<head>\n' +
-                        ' <meta charset="utf-8">\n' +
-                        ' <title>404</title>\n' +
+                        '    <meta charset="utf-8">\n' +
+                        '    <title>404</title>\n' +
                         '</head>\n' +
                         '<body>\n' +
-                        ' 404\n' +
+                        '    404\n' +
                         '</body>\n' +
                         '</html>\n',
                     responseHeaders: null,
@@ -106,21 +106,21 @@ exports = module.exports = {
                     requestHeaders: null,
                     responseBody:
                         '{\n' +
-                        ' "name": "test",\n' +
-                        ' "icons": [{\n' +
-                        ' "src": "icon/lowres",\n' +
-                        ' "sizes": "64x64",\n' +
-                        ' "type": "image/webp"\n' +
-                        ' }, {\n' +
-                        ' "src": "icon/hd_small",\n' +
-                        ' "sizes": "64x64"\n' +
-                        ' }, {\n' +
-                        ' "src": "icon/hd_hi",\n' +
-                        ' "sizes": "128x128"\n' +
-                        ' }],\n' +
-                        ' "start_url": "/start.html",\n' +
-                        ' "display": "fullscreen",\n' +
-                        ' "orientation": "landscape"\n' +
+                        '    "name": "test",\n' +
+                        '    "icons": [{\n' +
+                        '        "src": "icon/lowres",\n' +
+                        '        "sizes": "64x64",\n' +
+                        '        "type": "image/webp"\n' +
+                        '    }, {\n' +
+                        '        "src": "icon/hd_small",\n' +
+                        '        "sizes": "64x64"\n' +
+                        '    }, {\n' +
+                        '        "src": "icon/hd_hi",\n' +
+                        '        "sizes": "128x128"\n' +
+                        '    }],\n' +
+                        '    "start_url": "/start.html",\n' +
+                        '    "display": "fullscreen",\n' +
+                        '    "orientation": "landscape"\n' +
                         '}\n',
                     responseHeaders: null,
                 },
@@ -146,11 +146,11 @@ exports = module.exports = {
                         '<!doctype html>\n' +
                         '<html lang="en">\n' +
                         '<head>\n' +
-                        ' <meta charset="utf-8">\n' +
-                        ' <title>test</title>\n' +
+                        '    <meta charset="utf-8">\n' +
+                        '    <title>test</title>\n' +
                         '</head>\n' +
                         '<body>\n' +
-                        ' test\n' +
+                        '    test\n' +
                         '</body>\n' +
                         '</html>\n',
                     responseHeaders: null
@@ -317,9 +317,9 @@ exports = module.exports = {
                     requestHeaders: null,
                     responseBody:
                         '#test {\n' +
-                        ' background: green;\n' +
-                        ' border: 1px solid green;\n' +
-                        ' color: green;\n' +
+                        '    background: green;\n' +
+                        '    border: 1px solid green;\n' +
+                        '    color: green;\n' +
                         '}\n',
                     responseHeaders: null
                 },
@@ -391,14 +391,14 @@ exports = module.exports = {
                     requestHeaders: null,
                     responseBody:
                         '#test {\n' +
-                        ' background: green;\n' +
-                        ' border: 1px solid green;\n' +
-                        ' color: green;\n' +
+                        '    background: green;\n' +
+                        '    border: 1px solid green;\n' +
+                        '    color: green;\n' +
                         '}\n\n' +
                         '#test {\n' +
-                        ' background: hotpink;\n' +
-                        ' border: 1px solid hotpink;\n' +
-                        ' color: hotpink;\n' +
+                        '    background: hotpink;\n' +
+                        '    border: 1px solid hotpink;\n' +
+                        '    color: hotpink;\n' +
                         '}\n\n',
                     responseHeaders: null
                 },