232 lines
No EOL
35 KiB
HTML
232 lines
No EOL
35 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en-US">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Gzipping @font-face with Nginx – BigDino Blog</title>
|
|
<meta name='robots' content='max-image-preview:large' />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1"><link href='https://fonts.gstatic.com' crossorigin rel='preconnect' />
|
|
<link href='https://fonts.googleapis.com' crossorigin rel='preconnect' />
|
|
<link rel="alternate" type="application/rss+xml" title="BigDino Blog » Feed" href="https://blog.bigdinosaur.org/feed/" />
|
|
<link rel="alternate" type="application/rss+xml" title="BigDino Blog » Comments Feed" href="https://blog.bigdinosaur.org/comments/feed/" />
|
|
<script>
|
|
window._wpemojiSettings = {"baseUrl":"https:\/\/s.w.org\/images\/core\/emoji\/14.0.0\/72x72\/","ext":".png","svgUrl":"https:\/\/s.w.org\/images\/core\/emoji\/14.0.0\/svg\/","svgExt":".svg","source":{"concatemoji":"https:\/\/blog.bigdinosaur.org\/wp-includes\/js\/wp-emoji-release.min.js?ver=6.2"}};
|
|
/*! This file is auto-generated */
|
|
!function(e,a,t){var n,r,o,i=a.createElement("canvas"),p=i.getContext&&i.getContext("2d");function s(e,t){p.clearRect(0,0,i.width,i.height),p.fillText(e,0,0);e=i.toDataURL();return p.clearRect(0,0,i.width,i.height),p.fillText(t,0,0),e===i.toDataURL()}function c(e){var t=a.createElement("script");t.src=e,t.defer=t.type="text/javascript",a.getElementsByTagName("head")[0].appendChild(t)}for(o=Array("flag","emoji"),t.supports={everything:!0,everythingExceptFlag:!0},r=0;r<o.length;r++)t.supports[o[r]]=function(e){if(p&&p.fillText)switch(p.textBaseline="top",p.font="600 32px Arial",e){case"flag":return s("\ud83c\udff3\ufe0f\u200d\u26a7\ufe0f","\ud83c\udff3\ufe0f\u200b\u26a7\ufe0f")?!1:!s("\ud83c\uddfa\ud83c\uddf3","\ud83c\uddfa\u200b\ud83c\uddf3")&&!s("\ud83c\udff4\udb40\udc67\udb40\udc62\udb40\udc65\udb40\udc6e\udb40\udc67\udb40\udc7f","\ud83c\udff4\u200b\udb40\udc67\u200b\udb40\udc62\u200b\udb40\udc65\u200b\udb40\udc6e\u200b\udb40\udc67\u200b\udb40\udc7f");case"emoji":return!s("\ud83e\udef1\ud83c\udffb\u200d\ud83e\udef2\ud83c\udfff","\ud83e\udef1\ud83c\udffb\u200b\ud83e\udef2\ud83c\udfff")}return!1}(o[r]),t.supports.everything=t.supports.everything&&t.supports[o[r]],"flag"!==o[r]&&(t.supports.everythingExceptFlag=t.supports.everythingExceptFlag&&t.supports[o[r]]);t.supports.everythingExceptFlag=t.supports.everythingExceptFlag&&!t.supports.flag,t.DOMReady=!1,t.readyCallback=function(){t.DOMReady=!0},t.supports.everything||(n=function(){t.readyCallback()},a.addEventListener?(a.addEventListener("DOMContentLoaded",n,!1),e.addEventListener("load",n,!1)):(e.attachEvent("onload",n),a.attachEvent("onreadystatechange",function(){"complete"===a.readyState&&t.readyCallback()})),(e=t.source||{}).concatemoji?c(e.concatemoji):e.wpemoji&&e.twemoji&&(c(e.twemoji),c(e.wpemoji)))}(window,document,window._wpemojiSettings);
|
|
</script>
|
|
<style>
|
|
img.wp-smiley,
|
|
img.emoji {
|
|
display: inline !important;
|
|
border: none !important;
|
|
box-shadow: none !important;
|
|
height: 1em !important;
|
|
width: 1em !important;
|
|
margin: 0 0.07em !important;
|
|
vertical-align: -0.1em !important;
|
|
background: none !important;
|
|
padding: 0 !important;
|
|
}
|
|
</style>
|
|
<link rel='stylesheet' id='wp-block-library-css' href='https://blog.bigdinosaur.org/wp-includes/css/dist/block-library/style.min.css?ver=6.2' media='all' />
|
|
<link rel='stylesheet' id='classic-theme-styles-css' href='https://blog.bigdinosaur.org/wp-includes/css/classic-themes.min.css?ver=6.2' media='all' />
|
|
<style id='global-styles-inline-css'>
|
|
body{--wp--preset--color--black: #000000;--wp--preset--color--cyan-bluish-gray: #abb8c3;--wp--preset--color--white: #ffffff;--wp--preset--color--pale-pink: #f78da7;--wp--preset--color--vivid-red: #cf2e2e;--wp--preset--color--luminous-vivid-orange: #ff6900;--wp--preset--color--luminous-vivid-amber: #fcb900;--wp--preset--color--light-green-cyan: #7bdcb5;--wp--preset--color--vivid-green-cyan: #00d084;--wp--preset--color--pale-cyan-blue: #8ed1fc;--wp--preset--color--vivid-cyan-blue: #0693e3;--wp--preset--color--vivid-purple: #9b51e0;--wp--preset--color--contrast: var(--contrast);--wp--preset--color--contrast-2: var(--contrast-2);--wp--preset--color--contrast-3: var(--contrast-3);--wp--preset--color--base: var(--base);--wp--preset--color--base-2: var(--base-2);--wp--preset--color--base-3: var(--base-3);--wp--preset--color--accent: var(--accent);--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple: linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%);--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan: linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%);--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange: linear-gradient(135deg,rgba(252,185,0,1) 0%,rgba(255,105,0,1) 100%);--wp--preset--gradient--luminous-vivid-orange-to-vivid-red: linear-gradient(135deg,rgba(255,105,0,1) 0%,rgb(207,46,46) 100%);--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray: linear-gradient(135deg,rgb(238,238,238) 0%,rgb(169,184,195) 100%);--wp--preset--gradient--cool-to-warm-spectrum: linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%);--wp--preset--gradient--blush-light-purple: linear-gradient(135deg,rgb(255,206,236) 0%,rgb(152,150,240) 100%);--wp--preset--gradient--blush-bordeaux: linear-gradient(135deg,rgb(254,205,165) 0%,rgb(254,45,45) 50%,rgb(107,0,62) 100%);--wp--preset--gradient--luminous-dusk: linear-gradient(135deg,rgb(255,203,112) 0%,rgb(199,81,192) 50%,rgb(65,88,208) 100%);--wp--preset--gradient--pale-ocean: linear-gradient(135deg,rgb(255,245,203) 0%,rgb(182,227,212) 50%,rgb(51,167,181) 100%);--wp--preset--gradient--electric-grass: linear-gradient(135deg,rgb(202,248,128) 0%,rgb(113,206,126) 100%);--wp--preset--gradient--midnight: linear-gradient(135deg,rgb(2,3,129) 0%,rgb(40,116,252) 100%);--wp--preset--duotone--dark-grayscale: url('#wp-duotone-dark-grayscale');--wp--preset--duotone--grayscale: url('#wp-duotone-grayscale');--wp--preset--duotone--purple-yellow: url('#wp-duotone-purple-yellow');--wp--preset--duotone--blue-red: url('#wp-duotone-blue-red');--wp--preset--duotone--midnight: url('#wp-duotone-midnight');--wp--preset--duotone--magenta-yellow: url('#wp-duotone-magenta-yellow');--wp--preset--duotone--purple-green: url('#wp-duotone-purple-green');--wp--preset--duotone--blue-orange: url('#wp-duotone-blue-orange');--wp--preset--font-size--small: 13px;--wp--preset--font-size--medium: 20px;--wp--preset--font-size--large: 36px;--wp--preset--font-size--x-large: 42px;--wp--preset--spacing--20: 0.44rem;--wp--preset--spacing--30: 0.67rem;--wp--preset--spacing--40: 1rem;--wp--preset--spacing--50: 1.5rem;--wp--preset--spacing--60: 2.25rem;--wp--preset--spacing--70: 3.38rem;--wp--preset--spacing--80: 5.06rem;--wp--preset--shadow--natural: 6px 6px 9px rgba(0, 0, 0, 0.2);--wp--preset--shadow--deep: 12px 12px 50px rgba(0, 0, 0, 0.4);--wp--preset--shadow--sharp: 6px 6px 0px rgba(0, 0, 0, 0.2);--wp--preset--shadow--outlined: 6px 6px 0px -3px rgba(255, 255, 255, 1), 6px 6px rgba(0, 0, 0, 1);--wp--preset--shadow--crisp: 6px 6px 0px rgba(0, 0, 0, 1);}:where(.is-layout-flex){gap: 0.5em;}body .is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-constrained > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-constrained > .aligncenter{margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){max-width: var(--wp--style--global--content-size);margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > .alignwide{max-width: var(--wp--style--global--wide-size);}body .is-layout-flex{display: flex;}body .is-layout-flex{flex-wrap: wrap;align-items: center;}body .is-layout-flex > *{margin: 0;}:where(.wp-block-columns.is-layout-flex){gap: 2em;}.has-black-color{color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-color{color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-color{color: var(--wp--preset--color--white) !important;}.has-pale-pink-color{color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-color{color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-color{color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-color{color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-color{color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-color{color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-color{color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-color{color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-color{color: var(--wp--preset--color--vivid-purple) !important;}.has-black-background-color{background-color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-background-color{background-color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-background-color{background-color: var(--wp--preset--color--white) !important;}.has-pale-pink-background-color{background-color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-background-color{background-color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-background-color{background-color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-background-color{background-color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-background-color{background-color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-background-color{background-color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-background-color{background-color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-background-color{background-color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-background-color{background-color: var(--wp--preset--color--vivid-purple) !important;}.has-black-border-color{border-color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-border-color{border-color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-border-color{border-color: var(--wp--preset--color--white) !important;}.has-pale-pink-border-color{border-color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-border-color{border-color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-border-color{border-color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-border-color{border-color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-border-color{border-color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-border-color{border-color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-border-color{border-color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-border-color{border-color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-border-color{border-color: var(--wp--preset--color--vivid-purple) !important;}.has-vivid-cyan-blue-to-vivid-purple-gradient-background{background: var(--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple) !important;}.has-light-green-cyan-to-vivid-green-cyan-gradient-background{background: var(--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan) !important;}.has-luminous-vivid-amber-to-luminous-vivid-orange-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange) !important;}.has-luminous-vivid-orange-to-vivid-red-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-orange-to-vivid-red) !important;}.has-very-light-gray-to-cyan-bluish-gray-gradient-background{background: var(--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray) !important;}.has-cool-to-warm-spectrum-gradient-background{background: var(--wp--preset--gradient--cool-to-warm-spectrum) !important;}.has-blush-light-purple-gradient-background{background: var(--wp--preset--gradient--blush-light-purple) !important;}.has-blush-bordeaux-gradient-background{background: var(--wp--preset--gradient--blush-bordeaux) !important;}.has-luminous-dusk-gradient-background{background: var(--wp--preset--gradient--luminous-dusk) !important;}.has-pale-ocean-gradient-background{background: var(--wp--preset--gradient--pale-ocean) !important;}.has-electric-grass-gradient-background{background: var(--wp--preset--gradient--electric-grass) !important;}.has-midnight-gradient-background{background: var(--wp--preset--gradient--midnight) !important;}.has-small-font-size{font-size: var(--wp--preset--font-size--small) !important;}.has-medium-font-size{font-size: var(--wp--preset--font-size--medium) !important;}.has-large-font-size{font-size: var(--wp--preset--font-size--large) !important;}.has-x-large-font-size{font-size: var(--wp--preset--font-size--x-large) !important;}
|
|
.wp-block-navigation a:where(:not(.wp-element-button)){color: inherit;}
|
|
:where(.wp-block-columns.is-layout-flex){gap: 2em;}
|
|
.wp-block-pullquote{font-size: 1.5em;line-height: 1.6;}
|
|
</style>
|
|
<link rel='stylesheet' id='dashicons-css' href='https://blog.bigdinosaur.org/wp-includes/css/dashicons.min.css?ver=6.2' media='all' />
|
|
<link rel='stylesheet' id='prismCSS-css' href='https://blog.bigdinosaur.org/prism/prism.css?ver=6.2' media='all' />
|
|
<link rel='stylesheet' id='generate-style-css' href='https://blog.bigdinosaur.org/wp-content/themes/generatepress/assets/css/main.min.css?ver=3.3.0' media='all' />
|
|
<style id='generate-style-inline-css'>
|
|
.is-right-sidebar{width:30%;}.is-left-sidebar{width:30%;}.site-content .content-area{width:100%;}@media (max-width:768px){.main-navigation .menu-toggle,.sidebar-nav-mobile:not(#sticky-placeholder){display:block;}.main-navigation ul,.gen-sidebar-nav,.main-navigation:not(.slideout-navigation):not(.toggled) .main-nav > ul,.has-inline-mobile-toggle #site-navigation .inside-navigation > *:not(.navigation-search):not(.main-nav){display:none;}.nav-align-right .inside-navigation,.nav-align-center .inside-navigation{justify-content:space-between;}}
|
|
.dynamic-author-image-rounded{border-radius:100%;}.dynamic-featured-image, .dynamic-author-image{vertical-align:middle;}.one-container.blog .dynamic-content-template:not(:last-child), .one-container.archive .dynamic-content-template:not(:last-child){padding-bottom:0px;}.dynamic-entry-excerpt > p:last-child{margin-bottom:0px;}
|
|
</style>
|
|
<link rel='stylesheet' id='generate-google-fonts-css' href='https://fonts.googleapis.com/css?family=Hind%3A300%2Cregular%2C500%2C600%2C700%7CCopse%3Aregular&display=auto&ver=3.3.0' media='all' />
|
|
<link rel='stylesheet' id='generatepress-dynamic-css' href='https://blog.bigdinosaur.org/wp-content/uploads/generatepress/style.min.css?ver=1679525474' media='all' />
|
|
<link rel='stylesheet' id='generate-blog-columns-css' href='https://blog.bigdinosaur.org/wp-content/plugins/gp-premium/blog/functions/css/columns.min.css?ver=2.2.2' media='all' />
|
|
<script src='https://blog.bigdinosaur.org/prism/prism.js?ver=6.2' id='prismJS-js'></script>
|
|
<link rel="https://api.w.org/" href="https://blog.bigdinosaur.org/wp-json/" /><link rel="alternate" type="application/json" href="https://blog.bigdinosaur.org/wp-json/wp/v2/posts/178" /><link rel="EditURI" type="application/rsd+xml" title="RSD" href="https://blog.bigdinosaur.org/xmlrpc.php?rsd" />
|
|
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="https://blog.bigdinosaur.org/wp-includes/wlwmanifest.xml" />
|
|
<meta name="generator" content="WordPress 6.2" />
|
|
<link rel="canonical" href="https://blog.bigdinosaur.org/gzipping-font-face-with-nginx/" />
|
|
<link rel='shortlink' href='https://blog.bigdinosaur.org/?p=178' />
|
|
<link rel="alternate" type="application/json+oembed" href="https://blog.bigdinosaur.org/wp-json/oembed/1.0/embed?url=https%3A%2F%2Fblog.bigdinosaur.org%2Fgzipping-font-face-with-nginx%2F" />
|
|
<link rel="alternate" type="text/xml+oembed" href="https://blog.bigdinosaur.org/wp-json/oembed/1.0/embed?url=https%3A%2F%2Fblog.bigdinosaur.org%2Fgzipping-font-face-with-nginx%2F&format=xml" />
|
|
<style>.recentcomments a{display:inline !important;padding:0 !important;margin:0 !important;}</style><link rel="icon" href="https://blog.bigdinosaur.org/wp-content/uploads/2021/02/cropped-bigdino200-32x32.png" sizes="32x32" />
|
|
<link rel="icon" href="https://blog.bigdinosaur.org/wp-content/uploads/2021/02/cropped-bigdino200-192x192.png" sizes="192x192" />
|
|
<link rel="apple-touch-icon" href="https://blog.bigdinosaur.org/wp-content/uploads/2021/02/cropped-bigdino200-180x180.png" />
|
|
<meta name="msapplication-TileImage" content="https://blog.bigdinosaur.org/wp-content/uploads/2021/02/cropped-bigdino200-270x270.png" />
|
|
<style id="wp-custom-css">
|
|
p a:link, p a:hover, p a:active, p a:visited {
|
|
font-weight:600;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.site-description > a, span.dashicons {
|
|
text-decoration: none !important;
|
|
font-weight:400 !important;
|
|
}
|
|
|
|
span.posted-on {
|
|
font-size:110%;
|
|
}
|
|
|
|
span.dashicons {
|
|
font-size:120%;
|
|
width:auto;
|
|
vertical-align:sub;
|
|
}
|
|
|
|
#site-navigation > div {
|
|
padding-bottom:.5em;
|
|
}
|
|
|
|
#masthead > div > p {
|
|
margin-top:0;
|
|
margin-bottom:.5em;
|
|
} </style>
|
|
</head>
|
|
|
|
<body class="post-template-default single single-post postid-178 single-format-standard wp-custom-logo wp-embed-responsive post-image-above-header post-image-aligned-center no-sidebar nav-below-header separate-containers header-aligned-center dropdown-hover" itemtype="https://schema.org/Blog" itemscope>
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 0 0" width="0" height="0" focusable="false" role="none" style="visibility: hidden; position: absolute; left: -9999px; overflow: hidden;" ><defs><filter id="wp-duotone-dark-grayscale"><feColorMatrix color-interpolation-filters="sRGB" type="matrix" values=" .299 .587 .114 0 0 .299 .587 .114 0 0 .299 .587 .114 0 0 .299 .587 .114 0 0 " /><feComponentTransfer color-interpolation-filters="sRGB" ><feFuncR type="table" tableValues="0 0.49803921568627" /><feFuncG type="table" tableValues="0 0.49803921568627" /><feFuncB type="table" tableValues="0 0.49803921568627" /><feFuncA type="table" tableValues="1 1" /></feComponentTransfer><feComposite in2="SourceGraphic" operator="in" /></filter></defs></svg><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 0 0" width="0" height="0" focusable="false" role="none" style="visibility: hidden; position: absolute; left: -9999px; overflow: hidden;" ><defs><filter id="wp-duotone-grayscale"><feColorMatrix color-interpolation-filters="sRGB" type="matrix" values=" .299 .587 .114 0 0 .299 .587 .114 0 0 .299 .587 .114 0 0 .299 .587 .114 0 0 " /><feComponentTransfer color-interpolation-filters="sRGB" ><feFuncR type="table" tableValues="0 1" /><feFuncG type="table" tableValues="0 1" /><feFuncB type="table" tableValues="0 1" /><feFuncA type="table" tableValues="1 1" /></feComponentTransfer><feComposite in2="SourceGraphic" operator="in" /></filter></defs></svg><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 0 0" width="0" height="0" focusable="false" role="none" style="visibility: hidden; position: absolute; left: -9999px; overflow: hidden;" ><defs><filter id="wp-duotone-purple-yellow"><feColorMatrix color-interpolation-filters="sRGB" type="matrix" values=" .299 .587 .114 0 0 .299 .587 .114 0 0 .299 .587 .114 0 0 .299 .587 .114 0 0 " /><feComponentTransfer color-interpolation-filters="sRGB" ><feFuncR type="table" tableValues="0.54901960784314 0.98823529411765" /><feFuncG type="table" tableValues="0 1" /><feFuncB type="table" tableValues="0.71764705882353 0.25490196078431" /><feFuncA type="table" tableValues="1 1" /></feComponentTransfer><feComposite in2="SourceGraphic" operator="in" /></filter></defs></svg><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 0 0" width="0" height="0" focusable="false" role="none" style="visibility: hidden; position: absolute; left: -9999px; overflow: hidden;" ><defs><filter id="wp-duotone-blue-red"><feColorMatrix color-interpolation-filters="sRGB" type="matrix" values=" .299 .587 .114 0 0 .299 .587 .114 0 0 .299 .587 .114 0 0 .299 .587 .114 0 0 " /><feComponentTransfer color-interpolation-filters="sRGB" ><feFuncR type="table" tableValues="0 1" /><feFuncG type="table" tableValues="0 0.27843137254902" /><feFuncB type="table" tableValues="0.5921568627451 0.27843137254902" /><feFuncA type="table" tableValues="1 1" /></feComponentTransfer><feComposite in2="SourceGraphic" operator="in" /></filter></defs></svg><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 0 0" width="0" height="0" focusable="false" role="none" style="visibility: hidden; position: absolute; left: -9999px; overflow: hidden;" ><defs><filter id="wp-duotone-midnight"><feColorMatrix color-interpolation-filters="sRGB" type="matrix" values=" .299 .587 .114 0 0 .299 .587 .114 0 0 .299 .587 .114 0 0 .299 .587 .114 0 0 " /><feComponentTransfer color-interpolation-filters="sRGB" ><feFuncR type="table" tableValues="0 0" /><feFuncG type="table" tableValues="0 0.64705882352941" /><feFuncB type="table" tableValues="0 1" /><feFuncA type="table" tableValues="1 1" /></feComponentTransfer><feComposite in2="SourceGraphic" operator="in" /></filter></defs></svg><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 0 0" width="0" height="0" focusable="false" role="none" style="visibility: hidden; position: absolute; left: -9999px; overflow: hidden;" ><defs><filter id="wp-duotone-magenta-yellow"><feColorMatrix color-interpolation-filters="sRGB" type="matrix" values=" .299 .587 .114 0 0 .299 .587 .114 0 0 .299 .587 .114 0 0 .299 .587 .114 0 0 " /><feComponentTransfer color-interpolation-filters="sRGB" ><feFuncR type="table" tableValues="0.78039215686275 1" /><feFuncG type="table" tableValues="0 0.94901960784314" /><feFuncB type="table" tableValues="0.35294117647059 0.47058823529412" /><feFuncA type="table" tableValues="1 1" /></feComponentTransfer><feComposite in2="SourceGraphic" operator="in" /></filter></defs></svg><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 0 0" width="0" height="0" focusable="false" role="none" style="visibility: hidden; position: absolute; left: -9999px; overflow: hidden;" ><defs><filter id="wp-duotone-purple-green"><feColorMatrix color-interpolation-filters="sRGB" type="matrix" values=" .299 .587 .114 0 0 .299 .587 .114 0 0 .299 .587 .114 0 0 .299 .587 .114 0 0 " /><feComponentTransfer color-interpolation-filters="sRGB" ><feFuncR type="table" tableValues="0.65098039215686 0.40392156862745" /><feFuncG type="table" tableValues="0 1" /><feFuncB type="table" tableValues="0.44705882352941 0.4" /><feFuncA type="table" tableValues="1 1" /></feComponentTransfer><feComposite in2="SourceGraphic" operator="in" /></filter></defs></svg><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 0 0" width="0" height="0" focusable="false" role="none" style="visibility: hidden; position: absolute; left: -9999px; overflow: hidden;" ><defs><filter id="wp-duotone-blue-orange"><feColorMatrix color-interpolation-filters="sRGB" type="matrix" values=" .299 .587 .114 0 0 .299 .587 .114 0 0 .299 .587 .114 0 0 .299 .587 .114 0 0 " /><feComponentTransfer color-interpolation-filters="sRGB" ><feFuncR type="table" tableValues="0.098039215686275 1" /><feFuncG type="table" tableValues="0 0.66274509803922" /><feFuncB type="table" tableValues="0.84705882352941 0.41960784313725" /><feFuncA type="table" tableValues="1 1" /></feComponentTransfer><feComposite in2="SourceGraphic" operator="in" /></filter></defs></svg><a class="screen-reader-text skip-link" href="#content" title="Skip to content">Skip to content</a> <header class="site-header" id="masthead" aria-label="Site" itemtype="https://schema.org/WPHeader" itemscope>
|
|
<div class="inside-header grid-container">
|
|
<div class="site-logo">
|
|
<a href="https://blog.bigdinosaur.org/" rel="home">
|
|
<img class="header-image is-logo-image" alt="BigDino Blog" src="https://blog.bigdinosaur.org/wp-content/uploads/2021/02/bigdino-blog-title-white.png" width="700" height="200" />
|
|
</a>
|
|
</div><p class="site-description">Tales of hacking and stomping on things, by <a href="/email">Lee Hutchinson <span class="dashicons dashicons-email-alt"></span></a></p> </div>
|
|
</header>
|
|
<nav class="main-navigation nav-align-center has-menu-bar-items sub-menu-left" id="site-navigation" aria-label="Primary" itemtype="https://schema.org/SiteNavigationElement" itemscope>
|
|
<div class="inside-navigation grid-container">
|
|
<button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false">
|
|
<span class="gp-icon icon-menu-bars"><svg viewBox="0 0 512 512" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em"><path d="M0 96c0-13.255 10.745-24 24-24h464c13.255 0 24 10.745 24 24s-10.745 24-24 24H24c-13.255 0-24-10.745-24-24zm0 160c0-13.255 10.745-24 24-24h464c13.255 0 24 10.745 24 24s-10.745 24-24 24H24c-13.255 0-24-10.745-24-24zm0 160c0-13.255 10.745-24 24-24h464c13.255 0 24 10.745 24 24s-10.745 24-24 24H24c-13.255 0-24-10.745-24-24z" /></svg><svg viewBox="0 0 512 512" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em"><path d="M71.029 71.029c9.373-9.372 24.569-9.372 33.942 0L256 222.059l151.029-151.03c9.373-9.372 24.569-9.372 33.942 0 9.372 9.373 9.372 24.569 0 33.942L289.941 256l151.03 151.029c9.372 9.373 9.372 24.569 0 33.942-9.373 9.372-24.569 9.372-33.942 0L256 289.941l-151.029 151.03c-9.373 9.372-24.569 9.372-33.942 0-9.372-9.373-9.372-24.569 0-33.942L222.059 256 71.029 104.971c-9.372-9.373-9.372-24.569 0-33.942z" /></svg></span><span class="mobile-menu">Menu</span> </button>
|
|
<div id="primary-menu" class="main-nav"><ul id="menu-site-main" class=" menu sf-menu"><li id="menu-item-442" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-442"><a href="https://www.bigdinosaur.org">Home</a></li>
|
|
<li id="menu-item-440" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-440"><a href="/about">About</a></li>
|
|
<li id="menu-item-441" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-441"><a href="https://cog.discourse.group">Forum</a></li>
|
|
<li id="menu-item-438" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-438"><a href="https://blog.bigdinosaur.org/">Blog</a></li>
|
|
<li id="menu-item-443" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-443"><a href="https://www.chroniclesofgeorge.com">George</a></li>
|
|
<li id="menu-item-444" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-444"><a href="https://fangs.ink">Fangs</a></li>
|
|
</ul></div><div class="menu-bar-items"></div> </div>
|
|
</nav>
|
|
|
|
<div class="site grid-container container hfeed" id="page">
|
|
<div class="site-content" id="content">
|
|
|
|
<div class="content-area" id="primary">
|
|
<main class="site-main" id="main">
|
|
|
|
<article id="post-178" class="post-178 post type-post status-publish format-standard hentry category-web-stuff tag-code tag-nginx infinite-scroll-item" itemtype="https://schema.org/CreativeWork" itemscope>
|
|
<div class="inside-article">
|
|
<header class="entry-header" aria-label="Content">
|
|
<h1 class="entry-title" itemprop="headline">Gzipping @font-face with Nginx</h1> <div class="entry-meta">
|
|
<span class="posted-on"><time class="updated" datetime="2021-03-05T08:11:45-06:00" itemprop="dateModified">March 5, 2021</time><time class="entry-date published" datetime="2012-01-27T07:00:00-06:00" itemprop="datePublished">January 27, 2012</time></span> </div>
|
|
</header>
|
|
|
|
<div class="entry-content" itemprop="text">
|
|
|
|
<p><em>This is an <strong>old post.</strong> It may contain broken links and outdated information.</em></p>
|
|
|
|
|
|
|
|
<div class="wp-block-image"><figure class="alignleft size-large"><img decoding="async" width="200" height="200" src="https://blog.bigdinosaur.org/wp-content/uploads/2021/02/blog-title-morefontface.gif" alt="" class="wp-image-252"/></figure></div>
|
|
|
|
|
|
|
|
<p>In a previous post, I discussed <a href="https://blog.bigdinosaur.org/using-at-font-face-with-octopress/">how to alter Octopress’s configuration to serve web fonts via the @font-face CSS method</a>. This works great and will get your Octopress site working with locally-served web fonts, but there’s some optimization that can be done on the web server side; specifically, three of the four types of web font files are compressable and benfit from being gzipped by Nginx (or whatever web server you’re using) as they’re served out to your site’s readers.</p>
|
|
|
|
|
|
|
|
<p>We use Nginx here at the Bigdinosaur.org compound, and so this post will focus only on how to enable gzipping web font files with Nginx. Instructions for doing this with other web servers are easily locatable via the googles.</p>
|
|
|
|
|
|
|
|
<span id="more-178"></span>
|
|
|
|
|
|
|
|
<h3 class="wp-block-heading" id="butfirstmimetypes">But first, mime types</h3>
|
|
|
|
|
|
|
|
<p>You should already have gzip compression enabled in your nginx configuration—it can provide a significant speed boost to your web site for a negligible amount of CPU usage. Nginx uses a file’s mime type declaration to decide whether or not to apply compression to that file, and so we must first ensure that the four types of web font files have mime types configured. Without a properly configured mime type, the web server won’t really know what kind of file it’s serving; in most cases, this isn’t a problem, since modern web browsers are very good at guessing what type of data they’re receiving, but in this particular case we need our mime types explicitly defined.</p>
|
|
|
|
|
|
|
|
<p>The file to edit is <code>/etc/nginx/mime.types</code>. Add the following lines:</p>
|
|
|
|
|
|
|
|
<pre class="wp-block-code lang-nginx"><code>application/vnd.ms-fontobject eot;
|
|
application/x-font-ttf ttf;
|
|
font/opentype ott;
|
|
font/x-woff woff;</code></pre>
|
|
|
|
|
|
|
|
<p>You might already have an existing declaration for <code>eot</code> as <code>application/octet-stream</code>; if so, change it to <code>application/vnd.ms-fontobject</code> as indicated above. Also, <code>svg</code> isn’t listed here because it should already have a mime type defined, so we won’t worry about that one.</p>
|
|
|
|
|
|
|
|
<h3 class="wp-block-heading" id="nobodymesswiththegzip">Nobody mess with the gzip!</h3>
|
|
|
|
|
|
|
|
<p>OK, misleading section heading for the sake of humor, because we’re going to mess with the gzip. You’ll want to alter the <code>gzip_types</code> line in <code>/etc/nginx/nginx.conf</code> so that the mime types we’ve just added are included in the list of compressible files. Here’s how mine reads:</p>
|
|
|
|
|
|
|
|
<pre class="wp-block-code lang-nginx"><code>gzip_types text/plain text/css application/json application/x-javascript text/xml application/xml application/rss+xml text/javascript image/svg+xml application/vnd.ms-fontobject application/x-font-ttf font/opentype;</code></pre>
|
|
|
|
|
|
|
|
<p>The <code>woff</code> format isn’t included here because it’s already compressed, so adding it would gain us nothing.</p>
|
|
|
|
|
|
|
|
<p>To verify that your web fonts are being served compressed, you can take a peek at your site’s headers as pages load, or you can go hit up Google’s <a href="https://developers.google.com/pagespeed/">Page Speed Online</a> tool, which will tell you whether or not the web font files it receives as it benchmarks your site are compressed. It also has a bunch of other handy tips and tricks for decreasing page load time, so it’s a good site to check out anyway.</p>
|
|
|
|
|
|
|
|
<p>For an idea of exactly how many bytes you’re saving from gzipping web fonts, <a href="http://www.phpied.com/gzip-your-font-face-files/">check out this article on phpied.com</a>. It usually results in a reduction of 40-50%, which makes this an excellent, low-effort tweak that you definitely should do.</p>
|
|
|
|
|
|
|
|
<p><a href="https://discourse.bigdinosaur.org/t/gzipping-font-face-with-nginx-bigdinosaur-blog/652"><em>Discuss this post on the BigDinosaur forums</em></a> <span class="dashicons dashicons-format-chat"></span></p>
|
|
</div>
|
|
|
|
<footer class="entry-meta" aria-label="Entry meta">
|
|
<nav id="nav-below" class="post-navigation" aria-label="Posts">
|
|
<div class="nav-previous"><span class="gp-icon icon-arrow-left"><svg viewBox="0 0 192 512" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path d="M178.425 138.212c0 2.265-1.133 4.813-2.832 6.512L64.276 256.001l111.317 111.277c1.7 1.7 2.832 4.247 2.832 6.513 0 2.265-1.133 4.813-2.832 6.512L161.43 394.46c-1.7 1.7-4.249 2.832-6.514 2.832-2.266 0-4.816-1.133-6.515-2.832L16.407 262.514c-1.699-1.7-2.832-4.248-2.832-6.513 0-2.265 1.133-4.813 2.832-6.512l131.994-131.947c1.7-1.699 4.249-2.831 6.515-2.831 2.265 0 4.815 1.132 6.514 2.831l14.163 14.157c1.7 1.7 2.832 3.965 2.832 6.513z" fill-rule="nonzero" /></svg></span><span class="prev"><a href="https://blog.bigdinosaur.org/running-bind9-and-isc-dhcp/" rel="prev">Running BIND9 and ISC-DHCP</a></span></div><div class="nav-next"><span class="gp-icon icon-arrow-right"><svg viewBox="0 0 192 512" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path d="M178.425 256.001c0 2.266-1.133 4.815-2.832 6.515L43.599 394.509c-1.7 1.7-4.248 2.833-6.514 2.833s-4.816-1.133-6.515-2.833l-14.163-14.162c-1.699-1.7-2.832-3.966-2.832-6.515 0-2.266 1.133-4.815 2.832-6.515l111.317-111.316L16.407 144.685c-1.699-1.7-2.832-4.249-2.832-6.515s1.133-4.815 2.832-6.515l14.163-14.162c1.7-1.7 4.249-2.833 6.515-2.833s4.815 1.133 6.514 2.833l131.994 131.993c1.7 1.7 2.832 4.249 2.832 6.515z" fill-rule="nonzero" /></svg></span><span class="next"><a href="https://blog.bigdinosaur.org/securing-your-server-with-denyhosts/" rel="next">Securing your server with DenyHosts</a></span></div> </nav>
|
|
</footer>
|
|
</div>
|
|
</article>
|
|
</main>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="site-footer">
|
|
<footer class="site-info" aria-label="Site" itemtype="https://schema.org/WPFooter" itemscope>
|
|
<div class="inside-site-info grid-container">
|
|
<div class="copyright-bar">
|
|
© 2023 <a href="https://bigdinosaur.org">BigDinosaur.org</a>. <a href="/copyright-statement/">Some rights reserved</a>. <br />Questions? Comments? <a href="/email">E-mail me</a>. </div>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
|
|
<script id="generate-a11y">!function(){"use strict";if("querySelector"in document&&"addEventListener"in window){var e=document.body;e.addEventListener("mousedown",function(){e.classList.add("using-mouse")}),e.addEventListener("keydown",function(){e.classList.remove("using-mouse")})}}();</script><!--[if lte IE 11]>
|
|
<script src='https://blog.bigdinosaur.org/wp-content/themes/generatepress/assets/js/classList.min.js?ver=3.3.0' id='generate-classlist-js'></script>
|
|
<![endif]-->
|
|
<script id='generate-menu-js-extra'>
|
|
var generatepressMenu = {"toggleOpenedSubMenus":"1","openSubMenuLabel":"Open Sub-Menu","closeSubMenuLabel":"Close Sub-Menu"};
|
|
</script>
|
|
<script src='https://blog.bigdinosaur.org/wp-content/themes/generatepress/assets/js/menu.min.js?ver=3.3.0' id='generate-menu-js'></script>
|
|
|
|
</body>
|
|
</html>
|
|
|
|
<!-- Page generated by LiteSpeed Cache 5.4 on 2023-05-06 07:33:32 --> |