Skip to content

Instantly share code, notes, and snippets.

@sergejmueller
Last active November 15, 2025 22:07
Show Gist options
  • Select an option

  • Save sergejmueller/cf6b4f2133bcb3e2f64a to your computer and use it in GitHub Desktop.

Select an option

Save sergejmueller/cf6b4f2133bcb3e2f64a to your computer and use it in GitHub Desktop.

Revisions

  1. sergejmueller revised this gist Nov 10, 2018. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion ttf2woff2.md
    Original 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/font-woff2_ too):
    * 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

  2. sergejmueller revised this gist Nov 10, 2018. 1 changed file with 4 additions and 1 deletion.
    5 changes: 4 additions & 1 deletion ttf2woff2.md
    Original file line number Diff line number Diff line change
    @@ -59,7 +59,10 @@ AddType font/woff2 .woff2

    * Google Chrome 36
    * Opera 23
    * Firefox 35 (disabled by default)
    * Firefox 39
    * Opera 23
    * Edge 14
    * Safari 12


    ### Helpful links
  3. sergejmueller revised this gist Nov 10, 2018. 1 changed file with 3 additions and 3 deletions.
    6 changes: 3 additions & 3 deletions ttf2woff2.md
    Original 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) _application/font-woff2_):
    * 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 {
    application/font-woff2 woff2;
    font/woff2 woff2;
    }
    ```

    ###### APACHE: WOFF2 mime type

    ```apache
    AddType application/font-woff2 .woff2
    AddType font/woff2 .woff2
    ```


  4. Sergej Müller revised this gist Jan 30, 2016. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion ttf2woff2.md
    Original file line number Diff line number Diff line change
    @@ -73,4 +73,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](https://sergejmueller.github.io)
  5. Sergej Müller revised this gist May 7, 2015. No changes.
  6. Sergej Müller revised this gist Jan 13, 2015. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions ttf2woff2.md
    Original 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
  7. Sergej Müller revised this gist Dec 4, 2014. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion ttf2woff2.md
    Original 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
    ### Embed WOFF2 in CSS (with WOFF fallback)

    ```css
    @font-face {
  8. Sergej Müller revised this gist Oct 23, 2014. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions ttf2woff2.md
    Original 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/)
  9. Sergej Müller revised this gist Oct 23, 2014. 1 changed file with 2 additions and 17 deletions.
    19 changes: 2 additions & 17 deletions ttf2woff2.md
    Original 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

    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

    ```bash
    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 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!
    * http://www.fontsquirrel.com/tools/webfont-generator
    * http://everythingfonts.com/ttf-to-woff2


    ### Embed WOFF2 in CSS
  10. Sergej Müller revised this gist Aug 27, 2014. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions ttf2woff2.md
    Original 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

    * 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)):
    * 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

  11. Sergej Müller revised this gist Aug 7, 2014. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion ttf2woff2.md
    Original 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 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.
    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

  12. Sergej Müller revised this gist Jul 31, 2014. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion ttf2woff2.md
    Original file line number Diff line number Diff line change
    @@ -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 – [Flattr](https://flattr.com/profile/sergej.mueller) | [Twitter](https://twitter.com/wpseo) | [Google+](https://plus.google.com/110569673423509816572?rel=author) | [Projects](http://wpcoder.de)
  13. Sergej Müller revised this gist Jul 31, 2014. 1 changed file with 3 additions and 3 deletions.
    6 changes: 3 additions & 3 deletions ttf2woff2.md
    Original 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 will be available from Chrome M36 (beta) and there on.
    > 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 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.
    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) | [Google+](https://plus.google.com/110569673423509816572?rel=author) | [Projects](http://wpcoder.de)
    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)
  14. Sergej Müller revised this gist Jul 28, 2014. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions ttf2woff2.md
    Original 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
  15. Sergej Müller revised this gist Jul 3, 2014. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion ttf2woff2.md
    Original 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)):
    * 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

  16. Sergej Müller revised this gist Jul 3, 2014. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion ttf2woff2.md
    Original 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_):
    * 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

  17. Sergej Müller revised this gist Jul 3, 2014. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion ttf2woff2.md
    Original 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://www.w3.org/TR/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/)
    * [How to test WOFF 2.0](https://code.google.com/p/font-compression-reference/wiki/testing_woff2)
  18. Sergej Müller revised this gist Jul 3, 2014. No changes.
  19. Sergej Müller revised this gist Jul 3, 2014. 1 changed file with 3 additions and 3 deletions.
    6 changes: 3 additions & 3 deletions ttf2woff2.md
    Original 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](https://github.com/h5bp/server-configs-apache/issues/32#issuecomment-46683006) _application/font-woff2_):
    * 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 {
    font/woff2 woff2;
    application/font-woff2 woff2;
    }
    ```

    ###### APACHE: WOFF2 mime type

    ```apache
    AddType font/woff2 .woff2
    AddType application/font-woff2 .woff2
    ```


  20. Sergej Müller revised this gist Jul 1, 2014. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion ttf2woff2.md
    Original 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 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.
    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

  21. Sergej Müller revised this gist Jul 1, 2014. 1 changed file with 2 additions and 3 deletions.
    5 changes: 2 additions & 3 deletions ttf2woff2.md
    Original 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.

    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

    ```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!


  22. Sergej Müller revised this gist Jul 1, 2014. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion ttf2woff2.md
    Original 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, the WOFF2 file will be created.
    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
  23. Sergej Müller revised this gist Jul 1, 2014. 1 changed file with 6 additions and 2 deletions.
    8 changes: 6 additions & 2 deletions ttf2woff2.md
    Original 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. Web developers, make your life easier and webpages faster!
    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 size: 1 MB
    - Max TTF file size: 1 MB

    Webdevelopers, make your life easier and webpages faster!


    ### Embed WOFF2 in CSS
  24. Sergej Müller revised this gist Jun 29, 2014. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions ttf2woff2.md
    Original 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

  25. Sergej Müller revised this gist Jun 29, 2014. 1 changed file with 2 additions and 1 deletion.
    3 changes: 2 additions & 1 deletion ttf2woff2.md
    Original 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
    ```

    _Required adjustments:_
    _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
  26. Sergej Müller revised this gist Jun 27, 2014. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion ttf2woff2.md
    Original 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 value for WOFF 2.0 web fonts (Google uses _font/woff2_ as mime type):
    * 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

  27. Sergej Müller revised this gist Jun 3, 2014. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion ttf2woff2.md
    Original 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 in your CSS:
    Of course you can use WOFF2 as a Base64 encoded string:

    ```css
    @font-face {
  28. Sergej Müller revised this gist Jun 3, 2014. 2 changed files with 9 additions and 28 deletions.
    10 changes: 9 additions & 1 deletion ttf2woff2.md
    Original 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. See attached HTML file below.
    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
    27 changes: 0 additions & 27 deletions xbase64.html
    Original file line number Diff line number Diff line change
    @@ -1,27 +0,0 @@
    <!DOCTYPE html>

    <html>
    <head>
    <meta charset="utf-8" />

    <style>
    @font-face {
    font-family: 'MyFont';
    src:
    url('data:font/woff2;base64,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') format('woff2'),

    url('data:font/woff;base64,d09GRgABAAAAAAo0AA4AAAAAERAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABPUy8yAAABRAAAAEQAAABWPeFJMWNtYXAAAAGIAAAAOAAAAUrQERm3Y3Z0IAAAAcAAAAAUAAAAHAZL/5RmcGdtAAAB1AAABPkAAAmRigp4O2dhc3AAAAbQAAAACAAAAAgAAAAQZ2x5ZgAABtgAAADgAAAA4KGtKVhoZWFkAAAHuAAAADUAAAA2Ad2/ImhoZWEAAAfwAAAAHQAAACQHlgNVaG10eAAACBAAAAAIAAAACAfQAABsb2NhAAAIGAAAAAYAAAAGAHAAAG1heHAAAAggAAAAIAAAACAAvwnmbmFtZQAACEAAAAF3AAACzcydGhxwb3N0AAAJuAAAACIAAAA0CE/rTHByZXAAAAncAAAAVgAAAFaSoZr/eJxjYGR+wTiBgZWBg6mKaQ8DA0MPhGZ8wGDIyMTAwMTAysyAFQSkuaYwOLxgeMHAHPQ/iyGKmYfBHyjMCJIDAAdUC5B4nGNgYGBmgGAZBkYGEHAB8hjBfBYGDSDNBqQZGZgYGF4w/P8PUgChJRih6oGAkY1hxAMAY8cGrnicY2BAA0YMRsw8/zeCMAAQvgPjeJydVdl201YUlTxkcBI6ZKCgDtfcOFDryoQpGDBpKsV2IR0cCK0EHaQMdOSdxz7ra45Cu1Yf+bTufT0ktHSttiyWz75HW2fYOudGHCMqfRqIa9ShkpcDqaw9lkr3SVzXdS+PlQwGcV22Ek9Jm6idJEpq3exQLvFY6ypZJ1gn4+UgVk9VnmegDOIUHmVJRBtEG6mXJkniieMniRZnEB8lSSAloxCn0shQQjUaxFLVoUzp0KvXE3HTQMpGox51WFT3Q8UnxzWn1KwDRipXOcIV69VGvhunAy97kMQ6wbOthzEeeKx+lCqQipHpyD92Sk6UhoFUcdShVuLoMJNf95FMKs1ApoxiRaXugbjd/XTbFjE9dDq+LkqVRqq6uc4omu3R8aiDKA/Zxumk3NDZ9vDlGVNUq11xs+1AZg1cSslsdJ9EAB0mUuPpAU41nAKpGfVHxdnnzwESyVyUqjxVMod6A5kzO3txMe1uJ6uycKSfBzJvdnbjnYdDp1eHf9H6F0zhzEeP4mJ+PkL6UGp+Ik4kpUZYzPKnhh9xVyBCuTGICxfK4FOEOXRF2tlmXeO1MfaGz/lKqWE9Cdroo/h+Cv1OJCscZ1Gj9UiczWPXda3cZ1BLtbsXOzKvQ5Ui7u8LC64z54RhnhYLVV+e+d4FNP8GiGf8QN40hUv7lilKtG+boky7aIoK7RJUpV02xRTtiimmac+aYob2HVPM0p4zMuP/y9znkfsc3vGQm/Zd5KZ9D7lp30du2g+Qm1YhN20duWkvIDetRm7aVaM6dgQaBmkXUhVB0DSy+mHcVpv1QNaMNHxpYPIuYsj66kRHnbW1yh/Ff3XiCwdyaaKnuyIXm+Iur9sWPjzd7quPmkbdsNX4xpHyMB5Gehya0Fn5zeG/7U3dLpruMqoy6AEVTArAAGXtQALTOtsJpPWap/jyB2BchnjOSkO1VJ87hqbv5Xlf97E58b7H7cYut1x3eQlZ1g1yY/bw31Jkqusf5S2tVCdHrCsnj1VrGEMqvCi6vpKUe7S1G78oqbLyXpTWyueTkJs9gxtCW7buYbAjTGnKJR5eU6UoPdRSjrJDLG8pyjzglIsLWobEuA51D2prxOmhehgbCyGGobS9EHBIKV0V37TKd/Eeq2vY6PjFFeHpenISEZ/iKvtR8FTXRv3oDtq8Zt0ygylVqqf7jE+xr9v2UVlppI6zF7dUB9c06xo5FdNP5GvgdG84aN0DPVR8NEEjVTXH6MYoYzSWNeXfBHQxVn7DaNVi+z3cT52kVay5S5jsmxP34LS7/Sr7tZxbRtb91wa9beSKnyMxvy0K/DsHYrdkDdQ7k4EYC8hZ0BjGFiZ3GK6DbcRt9j8mp//fhoVFclc7Grt56sPVk1Eld9nyuMtNdlnXozZH1U4a+wiNLQ835tjhciy2xGBBtv7B/zHuAXdpUQLg0MhlmIjadKGe6uHqHquxbThXEgF2zbHjdAB6AC5B3xy71vMJgPXcI+cuwH1yCHbIIfiUHILPyLkF8Dk5BF+QQzAgh2CXnDsAD8gheEgOwR45BI/I2QT4khyCr8ghiMkhSMi5DfCYHIIn5BB8TQ7BN0auTmT+lgfZAPrOoptAqZ0aHNo4ZEauTdj7PFj2gUVkH1pE6pGR6xPqUx4s9XuLSP3BIlJ/NHJjQv2JB0v92SJSf7GI1GfGl5kjKa8OnvOODv4El+qtXgAAAAABAAH//wAPAAIAAP+xA+gDDAAcADkAL0AsMgEBABoBAwECQgABAAMAAQNoAgEAAARTBQEEBApDAAMDCwNEKCofFRUVBhUrATQuAw4DBwYiJy4DDgQHFBcJATY3FAcBBiInAScuAzU0NjcyHgIXPgMXMhYDoRgmNjI8QDwkEAoiCg4oOEQ4NjIqFAJpAUQBRGlHgP6lCh4K/qQPCioiGo59Ikg+LhMULEBGI32OAgUuRCoYDAQYMCASDQ0PJioeAgYeJEorXWn+yAE4aV17gP6xCgoBUA8KNDpMJ3uKARgqIhUUJCgaAYx4nGNgZGBgAOL+VyVT4vltvjJwM78AijCcz458AKEVFzAw/N/I/IKZB8jlYGACiQIAaKMMOwAAAHicY2BkYGAO+p/FEMX8ggEIgCQjAypgAgBmdAPzAAAAA+gAAAPoAAAAAAAAAHAAAAABAAAAAgA6AAIAAAAAAAIADAAZAG4AAABACZEAAAAAeJx1kMtqwkAUhv/x0otCW1rotrMqSmm8YDeCIFh0026kuC0xxiQSMzIZBV+j79CH6Uv0WfqbjKUoTZjMd745c+ZkAFzjGwL588SRs8AZo5wLOEXPcpH+2XKJ/GK5jCreLJ/Qv1uu4AGB5Spu8MEKonTOaIFPywJX4tJyARfiznKR/tFyidyzXMateLV8Qu9ZrmAiUstV3IuvgVptdRSERtYGddlutjpyupWKKkrcWLprEyqdyr6cq8T4cawcTy33PPaDdezqfbifJ75OI5XIltPcq5Gf+No1/mxXPd0EbWPmcq7VUg5thlxptfA944TGrLqNxt/zMIDCCltoRLyqEAYSNdo65zaaaKFDmjJDMjPPipDARUzjYs0dYbaSMu5zzBkltD4zYrIDj9/lkR+TAu6PWUUfrR7GE9LujCjzkn057O4wa0RKskw3s7Pf3lNseFqb1nDXrkuddSUxPKgheR+7tQWNR+9kt2Jou2jw/ef/fgDdX4RLAHicY2BigAAuBuwAKM/IxJ2RmlhUopuaW1BSycAAACYRBI0AAEu4AMhSWLEBAY5ZuQgACABjILABI0SwAyNwsgQoCUVSRLIKAgcqsQYBRLEkAYhRWLBAiFixBgNEsSYBiFFYuAQAiFixBgFEWVlZWbgB/4WwBI2xBQBEAAA=') format('woff');
    }

    span:before {
    display: block;
    content: '\e800';
    font-family: MyFont;
    }
    </style>
    </head>

    <body>
    <span></span>
    </body>
    </html>
  29. Sergej Müller revised this gist Jun 2, 2014. 1 changed file with 4 additions and 0 deletions.
    4 changes: 4 additions & 0 deletions ttf2woff2.md
    Original 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

  30. Sergej Müller renamed this gist Jun 2, 2014. 1 changed file with 0 additions and 0 deletions.
    File renamed without changes.