inline web fonts | http://blog.glebm.com/2013/08/28/inline-css-fonts.html

inline-css-font.rb

#!/usr/bin/env ruby
require 'base64'
require 'open-uri'

# file or url
def get_css(src)
  if src.start_with? 'http'
    src = src.gsub('|', '%7C')
    STDERR.puts "# GET #{src}"
    # simulate modern browser to get woff
    open(src, 'User-Agent' => "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_8_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/29.0.1547.57 Safari/537.36").read
  else
    STDERR.puts "Read #{src}"
    File.read(src)
  end
end

def inline_urls(css)
  css.gsub! /url\((.*?)\.(\w+)\)/ do
    ext = $2
    url = "#{$1}.#{$2}"
    STDERR.puts "# Found #{ext} font: #{url}"
    mime = {
        'woff' => 'application/font-woff'
    }[ext] or raise "need mime type for #{ext}"
    font_src = get_css(url)
    base_64  = Base64.strict_encode64(font_src)
    STDERR.puts "# font #{"was %.1fKB, now %.1fKB" % [font_src.bytesize / 1024.0, base_64.bytesize / 1024.0]}"
    "url('data:#{mime};base64,#{base_64}')"
  end
end

raise "please provide url or path, e.g https://fonts.googleapis.com/css?family=Arimo:400" unless ARGV[0]
puts inline_urls(get_css ARGV[0])

Usage

curl https://gist.github.com/glebm/6360088/raw > inline-css-font.rb
chmod +x inline-css-font.rb
./inline-css-font.rb 'https://fonts.googleapis.com/css?family=Arimo:400'

This saves all the extra font requests, but bloats font size by 33%

very cool thanks :)

👍

I've just written a post on CSS inlining http://blog.glebm.com/2013/08/28/inline-css-fonts.html