Apache .htaccess : serve precompressed #font-face fonts - apache

I need Apache to serve precompressed fonts (not using deflate).
My .htaccess in the /path_to/fonts/ folder look like
RewriteEngine On
RewriteBase /path_to/fonts/
RewriteCond %{HTTP:Accept-Encoding} .*gzip.*
RewriteRule (.*)\.ttf $1.ttf.gz
AddEncoding x-gzip gz
RemoveType application/x-gzip .gz
Response Headers:
Accept-Ranges bytes
Connection Keep-Alive
Content-Encoding **gzip**
Content-Length **31709**
Content-Type **text/plain**
Date Tue, 06 Mar 2012 18:14:51 GMT
Etag "7200000008e241-7bdd-4ba954a7395a8"
Keep-Alive timeout=5, max=99
Last-Modified Tue, 06 Mar 2012 16:11:08 GMT
Server Apache/2.2.11 (Win32) PHP/5.2.9
Vary Accept-Encoding
The Content Length says 31709, that would be the compressed size, but I'm not able to download it.
Could you give a hint?

Here is my solution. It has a bit more polish mostly.
It wont set the type and encoding unless the client supports gzip. Also declares the modules that are used so nothing happens if not all modules are supported.
Folder structure:
fonts/
Shanti-Regular.ttf.gz
Federo-Regular.ttf.gz
Shanti-Regular.ttf
Federo-Regular.ttf
.htaccess
Then .htaccess contains:
# Rewrite URLs to add gzipped version of font when it exits.
<IfModule mod_rewrite.c>
<IfModule mod_mime.c>
RewriteEngine on
#Serve gzip compressed TTF files if they exist and the client accepts gzip.
RewriteCond %{HTTP:Accept-encoding} gzip
RewriteCond %{REQUEST_FILENAME}\.gz -s
RewriteRule ^(.*)\.ttf $1\.ttf\.gz [QSA]
# update the response header of compressed file
# makes browser think mod_gzip did it.
<FilesMatch "\.ttf\.gz$">
AddEncoding gzip .gz
ForceType "application/x-font-ttf"
</FilesMatch>
</IfModule>
</IfModule>

Related

How can I update .htaccess to conditionally gzip on-the-fly

Note
Someone suggested that this is a duplicate of How to serve precompressed gzip/brotli files with .htaccess. That question seeks only to serve pre-compressed files. This question is different. Please see below.
My Goal
I want to serve pre-compressed brotli files when they exist. If no pre-compressed brotli file exists, fall back to on-the-fly gzip-compression.
Current Code
I'm working on a site that already has on-the-fly gzip enabled from its .htaccess file as follows:
<ifmodule mod_deflate.c>
AddOutputFilterByType DEFLATE text/text text/html text/plain text/xml...
</ifmodule>
Modified Code
I've setup a build script that compresses many static assets with brotli. In order to serve them, I've replaced the above mod_deflate block with the following:
<IfModule mod_headers.c>
# Serve brotli compressed CSS and JS files if they exist
# and the client accepts brotli.
RewriteCond "%{HTTP:Accept-encoding}" "br"
RewriteCond "%{REQUEST_FILENAME}\.br" "-s"
RewriteRule "^(.*)\.(js|css)" "$1\.$2\.br" [QSA]
# Serve correct content types, and prevent double compression.
RewriteRule "\.css\.br$" "-" [T=text/css,E=no-brotli:1]
RewriteRule "\.js\.br$" "-" [T=text/javascript,E=no-brotli:1]
<FilesMatch "(\.js\.br|\.css\.br)$">
# Serve correct encoding type.
Header append Content-Encoding br
# Force proxies to cache brotli &
# non-brotli css/js files separately.
Header append Vary Accept-Encoding
</FilesMatch>
</IfModule>
The Problem
This serves brotli-encoded files when they exist as expected. However, the problem I face now is that, because the remaining assets are not brotli-encoded at build time, they are now served with no compression.
I've been unable to figure out how I might serve brotli with a gzip fallback that does not require me to pre-compress for gzip output.
Any help is appreciated, thank you!
Your problem is you’ve replaced the dynamic gzip config with the static.
You need both bits of config in place but also to change your Brotli code to set the environment to no-gzip so it won’t fallback. The below should work;
<ifmodule mod_deflate.c>
AddOutputFilterByType DEFLATE text/text text/html text/plain text/xml...
</ifmodule>
<IfModule mod_headers.c>
# Serve brotli compressed CSS and JS files if they exist
# and the client accepts brotli.
RewriteCond "%{HTTP:Accept-encoding}" "br"
RewriteCond "%{REQUEST_FILENAME}\.br" "-s"
RewriteRule "^(.*)\.(js|css)" "$1\.$2\.br" [QSA]
# Serve correct content types, and prevent double compression.
RewriteRule "\.css\.br$" "-" [T=text/css,E=no-gzip:1]
RewriteRule "\.js\.br$" "-" [T=text/javascript,E=no-gzip:1]
<FilesMatch "(\.js\.br|\.css\.br)$">
# Serve correct encoding type.
Header append Content-Encoding br
# Force proxies to cache brotli &
# non-brotli css/js files separately.
Header append Vary Accept-Encoding
</FilesMatch>
</IfModule>

How to serve precompressed gzip/brotli files with .htaccess

Im trying to serve precompressed gzip/brotli files for html, js and css.
With the following code.
RewriteEngine on
# Brotli
# If the web browser accept brotli encoding…
RewriteCond %{HTTP:Accept-encoding} br
# …and the web browser is fetching a probably pre-compressed file…
RewriteCond %{REQUEST_URI} .*\.(css|html|js)
# …and a matching pre-compressed file exists…
RewriteCond %{REQUEST_FILENAME}.br -s
# …then rewrite the request to deliver the brotli file
RewriteRule ^(.+) $1.br
# For each file format set the correct mime type (otherwise brotli mime type is returned) and prevent Apache for recompressing the files
RewriteRule "\.css\.br$" "-" [T=text/css,E=no-brotli,E=no-gzip]
RewriteRule "\.html\.br$" "-" [T=text/html,E=no-brotli,E=no-gzip]
RewriteRule "\.js\.br$" "-" [T=application/javascript,E=no-brotli,E=no-gzip]
# Gzip
# If the web browser accept gzip encoding…
RewriteCond %{HTTP:Accept-Encoding} gzip
# …and the web browser is fetching a probably pre-compressed file…
RewriteCond %{REQUEST_URI} .*\.(css|html|js)
# …and a matching pre-compressed file exists…
RewriteCond %{REQUEST_FILENAME}.gz -s
# …then rewrite the request to deliver the gzip file
RewriteRule ^(.+) $1.gz
# For each file format set the correct mime type (otherwise gzip mime type is returned) and prevent Apache for recompressing the files
RewriteRule "\.css\.gz$" "-" [T=text/css,E=no-brotli,E=no-gzip]
RewriteRule "\.html\.gz$" "-" [T=text/html,E=no-brotli,E=no-gzip]
RewriteRule "\.js\.gz$" "-" [T=application/javascript,E=no-brotli,E=no-gzip]
<FilesMatch "\.(css|html|js)\.br$">
# Prevent mime module to set brazilian language header (because the file ends with .br)
RemoveLanguage .br
# Set the correct encoding type
Header set Content-Encoding br
# Force proxies to cache brotli & non-brotli files separately
Header append Vary Accept-Encoding
</FilesMatch>
<FilesMatch "\.(css|html|js)\.gz$">
# Serve correct encoding type
Header set Content-Encoding gzip
# Force proxies to cache gzip & non-gzip files separately
Header append Vary Accept-Encoding
</FilesMatch>
My Folderstructure looks like this:
.htaccess
index.php
/css/
/css/main.css
/css/main.css.gz
/css/main.css.br
But I get 404s when using the code above.
Setting the RewriteBase fixed it.
RewriteBase /
Writing this to help others. I had to add %{DOCUMENT_ROOT} in the RewriteCond to get it to work.
Essentially, change all RewriteCond to
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_FILENAME}\.br -s
For me the problem was, that brotli compression is not supported for http connections. See Why is Brotli not supported on HTTP?

How to remove gzip encoding from nonexistent images in httpd-deflate.conf?

What I have at this moment.
In httpd-deflate.conf in Location section:
SetEnvIfNoCase Request_URI \
\\.(?:gif|jpe?g|jpg|png|rar|zip|exe|flv|swf|mov|wma|mp3|mp4|avi|mp?g)$ no-gzip dont-vary
In .htaccess:
Options +FollowSymlinks
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_URI} !^/index\.php$ [NC]
RewriteRule ^(.+)$ /index.php?_route_=$1 [L,QSA]
With these settings images that are actually on the server are processed as needed - without gzip encoding and without "Content-Encoding: gzip" header in the server response.
But nonexistent images are processed in index.php file.
http://example.com/nonexistent-path/non-existent-image.jpg
The response body:
Cache-Control: max-age=84148768
Connection: keep-alive
Content-Encoding: gzip
Content-Length: 49860
Content-Type: image/jpeg - ((I set it in php manually after image generation before output))
Date: Mon, 01 May 2017 22:04:48 GMT
Expires: Tue, 31 Dec 2019 20:44:16 GMT
Last-Modified: Thu, 17 Nov 2016 14:51:10 GMT
Server: nginx
Strict-Transport-Security: max-age=2592000
Vary: Accept-Encoding
X-XSS-Protection: 1; mode=block
x-content-type-options nosniff
As you see this nonexistent image was processed as a document, not as a .jpg image.
On the server I have Apache and nginx proxy, as I understand. What should I paste in httpd-deflate.conf or in any other place to remove gzip encoding for nonexistent images and to remove "Content-Encoding: gzip" in the server response?
Thank you.
Use
apache_setenv( 'no-gzip', '1' );
in your PHP script before output.

Apache settings to send gzipped CSS/JS files to browser

I use precomposed gzipped CSS and JS files, so that server doesn't do this on the fly.
So in the same folder I have file.css (gzipped version), file.nozip.css (nogzipped version). Then depending whether browser accepts gzipped files or not, send proper version.
So I have the following in .htaccess:
RewriteEngine On
RewriteRule ^(.*)\.[0-9]+\.css$ $1.css [L]
#redirect Konqueror and "old browsers"
RewriteCond %{REQUEST_FILENAME} !\.nogzip\.css$
RewriteCond %{HTTP:Accept-encoding} !gzip [OR]
RewriteCond %{HTTP_USER_AGENT} Konqueror
RewriteRule ^(.*)\.css$ $1.nogzip.css [L]
<IfModule mod_headers.c>
Header set Vary User-Agent
#set Content-Encoding for all css files
<FilesMatch .*\.css$>
Header set Content-Encoding: gzip
Header set Cache-control: private
</FilesMatch>
#drop Content-Encoding in case we send not gzipped file
<FilesMatch .*\.nogzip\.css$>
Header unset Content-Encoding
</FilesMatch>
</IfModule>
<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault A36000000
</IfModule>
This approach I used many times before both as on Windows as well on Linux servers. Worked fine always.
However, recently while developing another site I face issue with the browser not recognizing the gzipped file as gzipped.
On localhost is working, here is the response header:
Accept-Ranges:bytes
Cache-control:private
Connection:Keep-Alive
Content-Encoding:gzip
Content-Length:39115
Content-Type:text/css
Date:Wed, 17 Jun 2015 11:27:28 GMT
ETag:"98cb-517998d9e690c"
Keep-Alive:timeout=5, max=100
Last-Modified:Wed, 03 Jun 2015 09:19:16 GMT
Server:Apache/2.4.12 (Win64) OpenSSL/1.0.1m PHP/5.6.9
Vary:User-Agent
X-Distributed-by:AHC
Here is the header received from the production server (not working - css file displayed as zipped in the browser):
Accept-Ranges:bytes
Cache-control:private
Connection:Keep-Alive
Content-Encoding:gzip
Content-Length:39099
Content-Type:text/css
Date:Wed, 17 Jun 2015 11:30:08 GMT
ETag:"98cb-517998d8fcd00-gzip"
Keep-Alive:timeout=5, max=99
Last-Modified:Wed, 03 Jun 2015 09:19:16 GMT
Server:Apache/2.4.10 (Debian)
Vary:User-Agent
The only difference is "X-Distributed-by:AHC", but this hardly be the reason for problem.
Any ideas what else to check?
In case 2, it strongly implies mod_deflate compressed it on the fly due to the etag:
ETag:"98cb-517998d8fcd00-gzip"
Maybe it would be best to set no-gzip for e.g. the konqueror case?

How to serve a gziped font using .htaccess? (no mod gzip or deflate)

Here's a list of stuff I tried in random order:
AddHandler application/x-httpd-php .otf
AddType
default_mimetype
auto_prepend_file = "otf.php"
zlib.output_compression = On
output_handler = ob_gzhandler
header("Content-type: application/octet-stream");
Even though all the PHP files of the server get gzipped using zlib, replacing the .otf extension by .php didn't work either.
With .htaccess, you could do like this, assuming font file is fontfile.otf.gz, browser request that as fontfile.otf
RewriteEngine On
#Check for browser's Accept-Encoding, remove it for force return gzipped one
RewriteCond "%{HTTP:Accept-Encoding}" "gzip.*deflate|deflate.*gzip"
#check file name is endswith otf
RewriteCond %{REQUEST_FILENAME} "\.(otf)$"
#check existance of .gz file name
RewriteCond %{REQUEST_FILENAME}.gz -s
#rewrite it to .otf.gz
RewriteRule ^.*$ %{REQUEST_URI}.gz [L]
#update some response header
<FilesMatch "\.otf\.gz$">
AddEncoding gzip .gz
ForceType "text/plain"
</FilesMatch>
And if font file and web site is cross-domain, you need to put Access-Control-Allow-Origin, firefox will not load font objects cross-domain.
In Gecko, web fonts are subject to the
same domain restriction (font files
must be on the same domain as the page
using them), unless HTTP access
controls are used to relax this
restriction.
Header set Access-Control-Allow-Origin *