Last active
November 15, 2025 22:07
-
Star
(411)
You must be signed in to star a gist -
Fork
(33)
You must be signed in to fork a gist
-
-
Save sergejmueller/cf6b4f2133bcb3e2f64a to your computer and use it in GitHub Desktop.
Revisions
-
sergejmueller revised this gist
Nov 10, 2018 . 1 changed file with 1 addition and 1 deletion.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -38,7 +38,7 @@ Of course you can use WOFF2 as a Base64 encoded string: ### Good to know * Please no serverside GZIP compression for WOFF files, because WOFF already contains compressed data. * Think about the correct mime type for WOFF 2.0 files (Google uses _font/woff2_. W3C [recommends](http://dev.w3.org/webfonts/WOFF2/spec/#IMT) _font/woff2_ too): ###### NGINX: WOFF2 mime type -
sergejmueller revised this gist
Nov 10, 2018 . 1 changed file with 4 additions and 1 deletion.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -59,7 +59,10 @@ AddType font/woff2 .woff2 * Google Chrome 36 * Opera 23 * Firefox 39 * Opera 23 * Edge 14 * Safari 12 ### Helpful links -
sergejmueller revised this gist
Nov 10, 2018 . 1 changed file with 3 additions and 3 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -38,20 +38,20 @@ Of course you can use WOFF2 as a Base64 encoded string: ### Good to know * Please no serverside GZIP compression for WOFF files, because WOFF already contains compressed data. * Think about the correct mime type for WOFF 2.0 files (Google uses _font/woff2_. W3C [recommends](http://dev.w3.org/webfonts/WOFF2/spec/#IMT) _font/font-woff2_ too): ###### NGINX: WOFF2 mime type ```nginx types { font/woff2 woff2; } ``` ###### APACHE: WOFF2 mime type ```apache AddType font/woff2 .woff2 ``` -
Sergej Müller revised this gist
Jan 30, 2016 . 1 changed file with 1 addition and 1 deletion.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -73,4 +73,4 @@ AddType application/font-woff2 .woff2 ### Powered by [Sergej Müller](https://sergejmueller.github.io) -
Sergej Müller revised this gist
May 7, 2015 . No changes.There are no files selected for viewing
-
Sergej Müller revised this gist
Jan 13, 2015 . 1 changed file with 1 addition and 0 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -59,6 +59,7 @@ AddType application/font-woff2 .woff2 * Google Chrome 36 * Opera 23 * Firefox 35 (disabled by default) ### Helpful links -
Sergej Müller revised this gist
Dec 4, 2014 . 1 changed file with 1 addition and 1 deletion.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -11,7 +11,7 @@ Some examples of file size differences: [WOFF vs. WOFF2](https://twitter.com/wps * http://everythingfonts.com/ttf-to-woff2 ### Embed WOFF2 in CSS (with WOFF fallback) ```css @font-face { -
Sergej Müller revised this gist
Oct 23, 2014 . 1 changed file with 1 addition and 0 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -63,6 +63,7 @@ AddType application/font-woff2 .woff2 ### Helpful links * [Can I use WOFF2](http://caniuse.com/#feat=woff2) * [W3C: WOFF File Format 2.0](http://dev.w3.org/webfonts/WOFF2/spec/) * [A better web font compression format: WOFF 2.0](https://groups.google.com/a/chromium.org/forum/#!topic/chromium-dev/j27Ou4RtvQI/discussion) * [Progress on smaller and more colorful fonts](http://lwn.net/Articles/573348/) -
Sergej Müller revised this gist
Oct 23, 2014 . 1 changed file with 2 additions and 17 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -7,23 +7,8 @@ Some examples of file size differences: [WOFF vs. WOFF2](https://twitter.com/wps ### TTF to WOFF2 converting * http://www.fontsquirrel.com/tools/webfont-generator * http://everythingfonts.com/ttf-to-woff2 ### Embed WOFF2 in CSS -
Sergej Müller revised this gist
Aug 27, 2014 . 1 changed file with 2 additions and 2 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -52,8 +52,8 @@ Of course you can use WOFF2 as a Base64 encoded string: ### Good to know * Please no serverside GZIP compression for WOFF files, because WOFF already contains compressed data. * Think about the correct mime type for WOFF 2.0 files (Google uses _font/woff2_. W3C [recommends](http://dev.w3.org/webfonts/WOFF2/spec/#IMT) _application/font-woff2_): ###### NGINX: WOFF2 mime type -
Sergej Müller revised this gist
Aug 7, 2014 . 1 changed file with 1 addition and 1 deletion.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -7,7 +7,7 @@ Some examples of file size differences: [WOFF vs. WOFF2](https://twitter.com/wps ### TTF to WOFF2 converting I installed [Googles compression library](https://code.google.com/p/font-compression-reference/) on a [DigitalOcean](https://www.digitalocean.com/?refcode=8e93f78ed2ab) _(ref)_ server. Feel free to start the convert from TTF to WOFF2. *No software installation required.* Simply use your terminal window. ###### Terminal make the magic -
Sergej Müller revised this gist
Jul 31, 2014 . 1 changed file with 1 addition and 1 deletion.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -86,4 +86,4 @@ AddType application/font-woff2 .woff2 ### Powered by Sergej Müller – [Flattr](https://flattr.com/profile/sergej.mueller) | [Twitter](https://twitter.com/wpseo) | [Google+](https://plus.google.com/110569673423509816572?rel=author) | [Projects](http://wpcoder.de) -
Sergej Müller revised this gist
Jul 31, 2014 . 1 changed file with 3 additions and 3 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -1,13 +1,13 @@ ### Prolog Google Chrome Developers [says](http://blog.chromium.org/2014/05/chrome-36-beta-elementanimate-html.html): > The new WOFF 2.0 Web Font compression format offers a 30% average gain over WOFF 1.0 (up to 50%+ in some cases). WOFF 2.0 is available since Chrome 36 and Opera 23. Some examples of file size differences: [WOFF vs. WOFF2](https://twitter.com/wpseo/status/482516050303807490) ### TTF to WOFF2 converting I have installed [Googles compression library](https://code.google.com/p/font-compression-reference/) on a [DigitalOcean](https://www.digitalocean.com/?refcode=8e93f78ed2ab) _(ref)_ server. Feel free to start the convert from TTF to WOFF2. *No software installation required.* Simply use your terminal window. ###### Terminal make the magic @@ -86,4 +86,4 @@ AddType application/font-woff2 .woff2 ### Powered by Sergej Müller – [Twitter](https://twitter.com/wpseo) | [Flattr](https://flattr.com/profile/sergej.mueller) | [Google+](https://plus.google.com/110569673423509816572?rel=author) | [Projects](http://wpcoder.de) -
Sergej Müller revised this gist
Jul 28, 2014 . 1 changed file with 1 addition and 0 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -73,6 +73,7 @@ AddType application/font-woff2 .woff2 ### Browser Support * Google Chrome 36 * Opera 23 ### Helpful links -
Sergej Müller revised this gist
Jul 3, 2014 . 1 changed file with 1 addition and 1 deletion.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -53,7 +53,7 @@ Of course you can use WOFF2 as a Base64 encoded string: ### Good to know * No serverside GZIP compression for WOFF files, because WOFF already contains compressed data. * Think about the correct mime type for WOFF 2.0 files (Google uses _font/woff2_. W3C [recommends](http://dev.w3.org/webfonts/WOFF2/spec/#IMT) _application/font-woff2_, currently not without [warnings](https://github.com/h5bp/server-configs-apache/issues/32#issuecomment-47935393)): ###### NGINX: WOFF2 mime type -
Sergej Müller revised this gist
Jul 3, 2014 . 1 changed file with 1 addition and 1 deletion.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -53,7 +53,7 @@ Of course you can use WOFF2 as a Base64 encoded string: ### Good to know * No serverside GZIP compression for WOFF files, because WOFF already contains compressed data. * Think about the correct mime type for WOFF 2.0 files (Google uses _font/woff2_, W3C [recommends](http://dev.w3.org/webfonts/WOFF2/spec/#IMT) _application/font-woff2_, currently not without [warnings](https://github.com/h5bp/server-configs-apache/issues/32#issuecomment-47935393)): ###### NGINX: WOFF2 mime type -
Sergej Müller revised this gist
Jul 3, 2014 . 1 changed file with 1 addition and 1 deletion.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -77,7 +77,7 @@ AddType application/font-woff2 .woff2 ### Helpful links * [W3C: WOFF File Format 2.0](http://dev.w3.org/webfonts/WOFF2/spec/) * [A better web font compression format: WOFF 2.0](https://groups.google.com/a/chromium.org/forum/#!topic/chromium-dev/j27Ou4RtvQI/discussion) * [Progress on smaller and more colorful fonts](http://lwn.net/Articles/573348/) * [How to test WOFF 2.0](https://code.google.com/p/font-compression-reference/wiki/testing_woff2) -
Sergej Müller revised this gist
Jul 3, 2014 . No changes.There are no files selected for viewing
-
Sergej Müller revised this gist
Jul 3, 2014 . 1 changed file with 3 additions and 3 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -53,20 +53,20 @@ Of course you can use WOFF2 as a Base64 encoded string: ### Good to know * No serverside GZIP compression for WOFF files, because WOFF already contains compressed data. * Think about the correct mime type for WOFF 2.0 files (Google uses _font/woff2_, W3C [recommends](http://dev.w3.org/webfonts/WOFF2/spec/#IMT) _application/font-woff2_): ###### NGINX: WOFF2 mime type ```nginx types { application/font-woff2 woff2; } ``` ###### APACHE: WOFF2 mime type ```apache AddType application/font-woff2 .woff2 ``` -
Sergej Müller revised this gist
Jul 1, 2014 . 1 changed file with 1 addition and 1 deletion.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -7,7 +7,7 @@ Some examples of file size differences: [WOFF vs. WOFF2](https://twitter.com/wps ### TTF to WOFF2 converting I installed [Googles compression library](https://code.google.com/p/font-compression-reference/) on a [DigitalOcean](https://www.digitalocean.com/?refcode=8e93f78ed2ab) _(ref)_ server. Feel free to start the convert from TTF to WOFF2. *No software installation required.* Simply use your terminal window. ###### Terminal make the magic -
Sergej Müller revised this gist
Jul 1, 2014 . 1 changed file with 2 additions and 3 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -9,9 +9,6 @@ Some examples of file size differences: [WOFF vs. WOFF2](https://twitter.com/wps I have installed [Googles compression library](https://code.google.com/p/font-compression-reference/) on a [DigitalOcean](https://www.digitalocean.com/?refcode=8e93f78ed2ab) _(ref)_ server. Feel free to start the convert from TTF to WOFF2. *No software installation required.* Simply use your terminal window. ###### Terminal make the magic ```bash @@ -24,6 +21,8 @@ _Notes:_ - Please don't change the header (_Content-Type_ and _Accept_). - Max TTF file size: 1 MB Mac OS users can use the [TTF to WOFF2](https://db.tt/aRGD6tQf) application (created with Automator). Drag your TTF file to the application, WOFF2 will be created. Webdevelopers, make your life easier and webpages faster! -
Sergej Müller revised this gist
Jul 1, 2014 . 1 changed file with 1 addition and 1 deletion.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -9,7 +9,7 @@ Some examples of file size differences: [WOFF vs. WOFF2](https://twitter.com/wps I have installed [Googles compression library](https://code.google.com/p/font-compression-reference/) on a [DigitalOcean](https://www.digitalocean.com/?refcode=8e93f78ed2ab) _(ref)_ server. Feel free to start the convert from TTF to WOFF2. *No software installation required.* Simply use your terminal window. Mac OS users can use the [TTF to WOFF2](https://db.tt/aRGD6tQf) application (created with Automator). Drag your TTF file to the application, WOFF2 will be created. ###### Terminal make the magic -
Sergej Müller revised this gist
Jul 1, 2014 . 1 changed file with 6 additions and 2 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -7,7 +7,9 @@ Some examples of file size differences: [WOFF vs. WOFF2](https://twitter.com/wps ### TTF to WOFF2 converting I have installed [Googles compression library](https://code.google.com/p/font-compression-reference/) on a [DigitalOcean](https://www.digitalocean.com/?refcode=8e93f78ed2ab) _(ref)_ server. Feel free to start the convert from TTF to WOFF2. *No software installation required.* Simply use your terminal window. Mac OS users can use the [TTF to WOFF2](https://db.tt/aRGD6tQf) application (created with Automator). Drag your TTF file to the application, the WOFF2 file will be created. ###### Terminal make the magic @@ -20,7 +22,9 @@ _Notes:_ - `@/local/path/font.ttf` is the local path to your TTF file (including the leading _@_ character). - `/local/path/font.woff2` is the local path for the converted WOFF2 file. - Please don't change the header (_Content-Type_ and _Accept_). - Max TTF file size: 1 MB Webdevelopers, make your life easier and webpages faster! ### Embed WOFF2 in CSS -
Sergej Müller revised this gist
Jun 29, 2014 . 1 changed file with 1 addition and 0 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -3,6 +3,7 @@ Google Chrome Developers [says](http://blog.chromium.org/2014/05/chrome-36-beta-elementanimate-html.html): > The new WOFF 2.0 Web Font compression format offers a 30% average gain over WOFF 1.0 (up to 50%+ in some cases). WOFF 2.0 will be available from Chrome M36 (beta) and there on. Some examples of file size differences: [WOFF vs. WOFF2](https://twitter.com/wpseo/status/482516050303807490) ### TTF to WOFF2 converting -
Sergej Müller revised this gist
Jun 29, 2014 . 1 changed file with 2 additions and 1 deletion.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -15,10 +15,11 @@ I have installed [Googles compression library](https://code.google.com/p/font-co curl --data-binary "@/local/path/font.ttf" -o "/local/path/font.woff2" -H "Content-Type: font/ttf" -H "Accept: font/woff2" -X POST http://188.226.250.76 ``` _Notes:_ - `@/local/path/font.ttf` is the local path to your TTF file (including the leading _@_ character). - `/local/path/font.woff2` is the local path for the converted WOFF2 file. - Please don't change the header (_Content-Type_ and _Accept_). - Max TTF size: 1 MB ### Embed WOFF2 in CSS -
Sergej Müller revised this gist
Jun 27, 2014 . 1 changed file with 1 addition and 1 deletion.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -48,7 +48,7 @@ Of course you can use WOFF2 as a Base64 encoded string: ### Good to know * No serverside GZIP compression for WOFF files, because WOFF already contains compressed data. * Think about the correct mime type for WOFF 2.0 files (Google uses _font/woff2_, W3C [recommends](https://github.com/h5bp/server-configs-apache/issues/32#issuecomment-46683006) _application/font-woff2_): ###### NGINX: WOFF2 mime type -
Sergej Müller revised this gist
Jun 3, 2014 . 1 changed file with 1 addition and 1 deletion.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -33,7 +33,7 @@ _Required adjustments:_ ``` ###### Base64 Data-URI Of course you can use WOFF2 as a Base64 encoded string: ```css @font-face { -
Sergej Müller revised this gist
Jun 3, 2014 . 2 changed files with 9 additions and 28 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -33,8 +33,16 @@ _Required adjustments:_ ``` ###### Base64 Data-URI Of course you can use WOFF2 as a Base64 encoded string in your CSS: ```css @font-face { font-family: MyFont; src: url('data:font/woff2;base64,...') format('woff2'), url('data:font/woff;base64,...') format('woff'); } ``` ### Good to know This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -1,27 +0,0 @@ -
Sergej Müller revised this gist
Jun 2, 2014 . 1 changed file with 4 additions and 0 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -32,6 +32,10 @@ _Required adjustments:_ } ``` ###### Base64 Data-URI Of course you can use WOFF2 as a Base64 encoded string in your CSS. See attached HTML file below. ### Good to know -
Sergej Müller renamed this gist
Jun 2, 2014 . 1 changed file with 0 additions and 0 deletions.There are no files selected for viewing
File renamed without changes.
NewerOlder