Demo: Optimized Webfont Loading

├── .gitignore ├── build ├── demo-font-face.html ├── demo-inline.html ├── demo-loadcss.html ├── demo-second-load.html ├── demo.html ├── fontloader.js ├── fonts.woff.css └── fonts.woff2.css ├── gruntfile.js ├── package.json ├── readme.md └── src ├── demo-second-load.html ├── demo.html ├── fonts ├── convert.cmd └── subsets │ ├── SourceCodePro-Regular.ttf │ ├── SourceCodePro-Regular.woff │ ├── SourceCodePro-Regular.woff2 │ ├── SourceCodePro-Semibold.ttf │ ├── SourceCodePro-Semibold.woff │ ├── SourceCodePro-Semibold.woff2 │ ├── SourceSansPro-It.ttf │ ├── SourceSansPro-It.woff │ ├── SourceSansPro-It.woff2 │ ├── SourceSansPro-Regular.ttf │ ├── SourceSansPro-Regular.woff │ ├── SourceSansPro-Regular.woff2 │ ├── SourceSansPro-Semibold.ttf │ ├── SourceSansPro-Semibold.woff │ ├── SourceSansPro-Semibold.woff2 │ ├── SourceSansPro-SemiboldIt.ttf │ ├── SourceSansPro-SemiboldIt.woff │ └── SourceSansPro-SemiboldIt.woff2 └── js └── fontloader.js /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | -------------------------------------------------------------------------------- /build/demo-font-face.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Demo: Optimized Webfont Loading 6 | 30 | 31 | 32 | 33 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui amet in distinctio animi, fugit quia cupiditate, quasi adipisci, quis totam excepturi ab at delectus cum laborum! Quasi, sed perferendis minima!

34 |

35 |

36 |

37 |

38 |

39 |

40 |

41 |

42 |

43 |

44 |

45 |

46 |

47 |

48 |

49 |

50 |

51 |

52 |

53 |

54 |

55 |

56 |

57 |

58 |

59 |

60 |

61 |

62 |

63 |

64 |

65 |

66 |

67 |

68 |

69 |

70 |

71 |

72 |

73 |

74 |

75 |

76 |

77 |

78 |

79 |

80 |

81 |

82 |

83 | -------------------------------------------------------------------------------- /build/demo-loadcss.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Demo: Optimized Webfont Loading 6 | 57 | 58 | 59 | 67 | 68 | 78 | 79 | 80 | 81 |

82 |

83 |

84 |

85 |

86 |

87 |

88 |

89 |

90 |

91 |

92 |

93 |

94 |

95 |

96 |

97 |

98 |

99 |

100 |

101 |

102 |

103 |

104 |

105 |

106 |

107 |

108 |

109 |

110 |

111 |

112 |

113 |

114 |

115 |

116 |

117 |

118 |

119 |

120 |

121 |

122 |

123 |

124 |

125 |

126 |

127 |

128 |

129 |

130 |

131 | -------------------------------------------------------------------------------- /build/demo-second-load.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Demo: Optimized Webfont Loading 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 23 | 24 | 25 | 26 | 27 |

28 |

29 |

30 |

31 |

32 |

33 |

34 |

35 |

36 |

37 |

38 |

39 |

40 |

41 |

42 |

43 |

44 |

45 |

46 |

47 |

48 |

49 |

50 |

51 |

52 |

53 |

54 |

55 |

56 |

57 |

58 |

59 |

60 |

61 |

62 |

63 |

64 |

65 |

66 |

67 |

68 |

69 |

70 |

71 |

72 |

73 |

74 |

75 |

76 |

77 | -------------------------------------------------------------------------------- /build/demo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Demo: Optimized Webfont Loading 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 23 | 24 | 25 | 26 | 27 |

28 |

29 |

30 |

31 |

32 |

33 |

34 |

35 |

36 |

37 |

38 |

39 |

40 |

41 |

42 |

43 |

44 |

45 |

46 |

47 |

48 |

49 |

50 |

51 |

52 |

53 |

54 |

55 |

56 |

57 |

58 |

59 |

60 |

61 |

62 |

63 |

64 |

65 |

66 |

67 |

68 |

69 |

70 |

71 |

72 |

73 |

74 |

75 |

76 |

77 | -------------------------------------------------------------------------------- /build/fontloader.js: -------------------------------------------------------------------------------- 1 | function loadFont(a,b,c,d){function e(){if(!window.FontFace)return!1;var a=new FontFace("t",'url("data:application/font-woff2,") format("woff2")',{}),b=a.load();try{b.then(null,function(){})}catch(c){}return"loading"===a.status}var f=navigator.userAgent,g=!window.addEventListener||f.match(/(Android (2|3|4.0|4.1|4.2|4.3))|(Opera (Mini|Mobi))/)&&!f.match(/Chrome/);if(!g){var h={};try{h=localStorage||{}}catch(i){}var j="x-font-"+a,k=j+"url",l=j+"css",m=h[k],n=h[l],o=document.createElement("style");if(o.rel="stylesheet",document.head.appendChild(o),!n||m!==b&&m!==c){var p=c&&e()?c:b,q=new XMLHttpRequest;q.open("GET",p),q.onload=function(){q.status>=200&&q.status<400&&(h[k]=p,h[l]=q.responseText,d||(o.textContent=q.responseText))},q.send()}else o.textContent=n}} -------------------------------------------------------------------------------- /gruntfile.js: -------------------------------------------------------------------------------- 1 | module.exports = function(grunt) { 2 | grunt.initConfig({ 3 | uglify: { 4 | fontloader: { 5 | files: { 6 | 'build/fontloader.js': 'src/js/**/*.js' 7 | } 8 | } 9 | }, 10 | 11 | replace: { 12 | inlinejs: { 13 | src: ['src/demo*.html'], 14 | dest: 'build/', 15 | //files: { 16 | 17 | //}, 18 | //src: 'src/demo*.html', 19 | //dest: 'build/demo.html', 20 | replacements: [{ 21 | from: '{{ fontloader.js }}', 22 | to: '<%= grunt.file.read("build/fontloader.js") %>' 23 | }] 24 | } 25 | } 26 | }); 27 | 28 | grunt.registerTask('default', ['uglify', 'replace']); 29 | 30 | grunt.registerTask('generateFonts', function() { 31 | var fs = require('fs'); 32 | var util = require('util'); 33 | 34 | var woffFile = fs.openSync('build/fonts.woff.css', 'w'); 35 | var woff2File = fs.openSync('build/fonts.woff2.css', 'w'); 36 | 37 | var files = fs.readdirSync('src/fonts/subsets'); 38 | files.forEach(function(file) { 39 | if (!/\.woff/.test(file)) { 40 | return; 41 | } 42 | 43 | var b64 = fs.readFileSync('src/fonts/subsets/' + file).toString('base64'); 44 | var format = file.indexOf('.woff2') >= 0 ? "woff2" : "woff"; 45 | var fontWeight = /Semibold/i.test(file) ? 600 : 400; 46 | var fontStyle = /It/.test(file) ? 'italic' : 'normal'; 47 | var fontFamily = file.split('.')[0].split('-')[0].split(/(?=[A-Z])/).join(' '); 48 | 49 | var template = '@font-face{font-family:%s;src:url(data:application/x-font-%s;charset=utf-8;base64,%s) format("%s");font-weight:%d;font-style:%s}\n'; 50 | var css = util.format(template, fontFamily, format, b64, format, fontWeight, fontStyle); 51 | 52 | fs.write(format === 'woff' ? woffFile : woff2File, css); 53 | }); 54 | 55 | fs.closeSync(woffFile); 56 | fs.closeSync(woff2File); 57 | 58 | /* 59 | var cfg = grunt.file.readJSON('src/fonts/config.json'); 60 | for (var filename in cfg) { 61 | 62 | var path = 'build/' + filename; 63 | fs.writeFileSync(path, ''); 64 | 65 | cfg[filename].forEach(function(c) { 66 | console.log(c); 67 | var b64 = fs.readFileSync('src/fonts/subsets/' + c.file).toString('base64'); 68 | var fontFamily = c['font-family']; 69 | var fontWeight = c['font-weight'] || '400'; 70 | var fontStyle = c['font-style'] || 'normal'; 71 | var format = c['format'] || 'woff'; 72 | 73 | var template = '@font-face{font-family:%s;src:local("%s"),url(data:application/x-font-%s;charset=utf-8;base64,%s) format("%s");font-weight:%d;font-style:%s}'; 74 | var css = util.format(template, fontFamily, ) 75 | 76 | 77 | fs.appendFileSync(path, ''); 78 | }); 79 | }*/ 80 | }); 81 | 82 | grunt.loadNpmTasks('grunt-contrib-uglify'); 83 | grunt.loadNpmTasks('grunt-text-replace'); 84 | }; -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "OptimizedWebfontLoading", 3 | "version": "1.0.0", 4 | "description": "", 5 | "repository": { 6 | "type": "git", 7 | "url": "https://github.com/bdadam/OptimizedWebfontLoading.git" 8 | }, 9 | "keywords": [ 10 | "webfont", 11 | "permatters", 12 | "pagespeed" 13 | ], 14 | "author": "Adam Beres-Deak (http://bdadam.com)", 15 | "license": "MIT", 16 | "bugs": { 17 | "url": "https://github.com/bdadam/OptimizedWebfontLoading/issues" 18 | }, 19 | "homepage": "https://github.com/bdadam/OptimizedWebfontLoading", 20 | "devDependencies": { 21 | "grunt": "^0.4.5", 22 | "grunt-contrib-uglify": "^0.6.0", 23 | "grunt-text-replace": "^0.4.0" 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | # OptimizedFontLoading 2 | 3 | *Work in progress* 4 | 5 | Some example code to show how it can work in real life projects. 6 | 7 | ## More info 8 | - [Loading webfonts with high performance on responsive websites](http://bdadam.com/blog/loading-webfonts-with-high-performance.html) 9 | 10 | 11 | ## Contents of this repository 12 | - Sample code for font loading 13 | - Optimized sample code 14 | - Grunt task for optimized code generation (Uglify) 15 | - Grunt task for generating CSS files from *.woff and *.woff2 files (coming soon) 16 | 17 | 18 | ### Woff2 feature test 19 | Based on the work of Filament Group: [filamentgroup/woff2-feature-test](https://github.com/filamentgroup/woff2-feature-test/) 20 | 21 | 22 | ### Sample font files taken from: 23 | - [adobe-fonts/source-sans-pro](https://github.com/adobe-fonts/source-sans-pro) 24 | - [adobe-fonts/source-code-pro](https://github.com/adobe-fonts/source-code-pro) 25 | -------------------------------------------------------------------------------- /src/demo-second-load.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Demo: Optimized Webfont Loading 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 23 | 24 | 25 | 26 | 27 |

28 |

29 |

30 |

31 |

32 |

33 |

34 |

35 |

36 |

37 |

38 |

39 |

40 |

41 |

42 |

43 |

44 |

45 |

46 |

47 |

48 |

49 |

50 |

51 |

52 |

53 |

54 |

55 |

56 |

57 |

58 |

59 |

60 |

61 |

62 |

63 |

64 |

65 |

66 |

67 |

68 |

69 |

70 |

71 |

72 |

73 |

74 |

75 |

76 |

77 | -------------------------------------------------------------------------------- /src/demo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Demo: Optimized Webfont Loading 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 23 | 24 | 25 | 26 | 27 |

28 |

29 |

30 |

31 |

32 |

33 |

34 |

35 |

36 |

37 |

38 |

39 |

40 |

41 |

42 |

43 |

44 |

45 |

46 |

47 |

48 |

49 |

50 |

51 |

52 |

53 |

54 |

55 |

56 |

57 |

58 |

59 |

60 |

61 |

62 |

63 |

64 |

65 |

66 |

67 |

68 |

69 |

70 |

71 |

72 |

73 |

74 |

75 |

76 |

77 | -------------------------------------------------------------------------------- /src/fonts/convert.cmd: -------------------------------------------------------------------------------- 1 | python.exe subset.py ttf\SourceCodePro-Regular.ttf --unicodes="U+0000-05ff" --output-file=subsets\SourceCodePro-Regular.ttf 2 | python.exe subset.py ttf\SourceCodePro-Semibold.ttf --unicodes="U+0000-05ff" --output-file=subsets\SourceCodePro-Semibold.ttf 3 | 4 | python.exe subset.py ttf\SourceSansPro-Regular.ttf --unicodes="U+0000-05ff" --output-file=subsets\SourceSansPro-Regular.ttf 5 | python.exe subset.py ttf\SourceSansPro-It.ttf --unicodes="U+0000-05ff" --output-file=subsets\SourceSansPro-It.ttf 6 | python.exe subset.py ttf\SourceSansPro-Semibold.ttf --unicodes="U+0000-05ff" --output-file=subsets\SourceSansPro-Semibold.ttf 7 | python.exe subset.py ttf\SourceSansPro-SemiboldIt.ttf --unicodes="U+0000-05ff" --output-file=subsets\SourceSansPro-SemiboldIt.ttf 8 | -------------------------------------------------------------------------------- /src/fonts/subsets/SourceCodePro-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bdadam/OptimizedWebfontLoading/361fe94655b30cae1882bb881c349e5758173f6c/src/fonts/subsets/SourceCodePro-Regular.ttf -------------------------------------------------------------------------------- /src/fonts/subsets/SourceCodePro-Regular.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bdadam/OptimizedWebfontLoading/361fe94655b30cae1882bb881c349e5758173f6c/src/fonts/subsets/SourceCodePro-Regular.woff -------------------------------------------------------------------------------- /src/fonts/subsets/SourceCodePro-Regular.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bdadam/OptimizedWebfontLoading/361fe94655b30cae1882bb881c349e5758173f6c/src/fonts/subsets/SourceCodePro-Regular.woff2 -------------------------------------------------------------------------------- /src/fonts/subsets/SourceCodePro-Semibold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bdadam/OptimizedWebfontLoading/361fe94655b30cae1882bb881c349e5758173f6c/src/fonts/subsets/SourceCodePro-Semibold.ttf -------------------------------------------------------------------------------- /src/fonts/subsets/SourceCodePro-Semibold.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bdadam/OptimizedWebfontLoading/361fe94655b30cae1882bb881c349e5758173f6c/src/fonts/subsets/SourceCodePro-Semibold.woff -------------------------------------------------------------------------------- /src/fonts/subsets/SourceCodePro-Semibold.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bdadam/OptimizedWebfontLoading/361fe94655b30cae1882bb881c349e5758173f6c/src/fonts/subsets/SourceCodePro-Semibold.woff2 -------------------------------------------------------------------------------- /src/fonts/subsets/SourceSansPro-It.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bdadam/OptimizedWebfontLoading/361fe94655b30cae1882bb881c349e5758173f6c/src/fonts/subsets/SourceSansPro-It.ttf -------------------------------------------------------------------------------- /src/fonts/subsets/SourceSansPro-It.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bdadam/OptimizedWebfontLoading/361fe94655b30cae1882bb881c349e5758173f6c/src/fonts/subsets/SourceSansPro-It.woff -------------------------------------------------------------------------------- /src/fonts/subsets/SourceSansPro-It.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bdadam/OptimizedWebfontLoading/361fe94655b30cae1882bb881c349e5758173f6c/src/fonts/subsets/SourceSansPro-It.woff2 -------------------------------------------------------------------------------- /src/fonts/subsets/SourceSansPro-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bdadam/OptimizedWebfontLoading/361fe94655b30cae1882bb881c349e5758173f6c/src/fonts/subsets/SourceSansPro-Regular.ttf -------------------------------------------------------------------------------- /src/fonts/subsets/SourceSansPro-Regular.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bdadam/OptimizedWebfontLoading/361fe94655b30cae1882bb881c349e5758173f6c/src/fonts/subsets/SourceSansPro-Regular.woff -------------------------------------------------------------------------------- /src/fonts/subsets/SourceSansPro-Regular.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bdadam/OptimizedWebfontLoading/361fe94655b30cae1882bb881c349e5758173f6c/src/fonts/subsets/SourceSansPro-Regular.woff2 -------------------------------------------------------------------------------- /src/fonts/subsets/SourceSansPro-Semibold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bdadam/OptimizedWebfontLoading/361fe94655b30cae1882bb881c349e5758173f6c/src/fonts/subsets/SourceSansPro-Semibold.ttf -------------------------------------------------------------------------------- /src/fonts/subsets/SourceSansPro-Semibold.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bdadam/OptimizedWebfontLoading/361fe94655b30cae1882bb881c349e5758173f6c/src/fonts/subsets/SourceSansPro-Semibold.woff -------------------------------------------------------------------------------- /src/fonts/subsets/SourceSansPro-Semibold.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bdadam/OptimizedWebfontLoading/361fe94655b30cae1882bb881c349e5758173f6c/src/fonts/subsets/SourceSansPro-Semibold.woff2 -------------------------------------------------------------------------------- /src/fonts/subsets/SourceSansPro-SemiboldIt.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bdadam/OptimizedWebfontLoading/361fe94655b30cae1882bb881c349e5758173f6c/src/fonts/subsets/SourceSansPro-SemiboldIt.ttf -------------------------------------------------------------------------------- /src/fonts/subsets/SourceSansPro-SemiboldIt.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bdadam/OptimizedWebfontLoading/361fe94655b30cae1882bb881c349e5758173f6c/src/fonts/subsets/SourceSansPro-SemiboldIt.woff -------------------------------------------------------------------------------- /src/fonts/subsets/SourceSansPro-SemiboldIt.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bdadam/OptimizedWebfontLoading/361fe94655b30cae1882bb881c349e5758173f6c/src/fonts/subsets/SourceSansPro-SemiboldIt.woff2 -------------------------------------------------------------------------------- /src/js/fontloader.js: -------------------------------------------------------------------------------- 1 | //This script must be placed in the HEAD above all external stylesheet declarations (link[rel=stylesheet]) 2 | function loadFont(fontName, woffUrl, woff2Url, onlyLoadFontOnSecondPageload) { 3 | // 0. Many unsupported browsers should stop here 4 | var nua = navigator.userAgent; 5 | var noSupport = !window.addEventListener // IE8 and below 6 | || (nua.match(/(Android (2|3|4.0|4.1|4.2|4.3))|(Opera (Mini|Mobi))/) && !nua.match(/Chrome/)) // Android Stock Browser below 4.4 and Opera Mini 7 | 8 | if (noSupport) { return; } 9 | 10 | // 1. Setting up localStorage 11 | var loSto = {}; 12 | try { 13 | // We set up a proxy variable to help with localStorage, e.g. when cookies are disabled 14 | // and the browser prevents us accessing it. 15 | // Otherwise some exceptions can be thrown which completely prevent font loading. 16 | loSto = localStorage || {}; 17 | } catch(ex) {} 18 | 19 | var localStoragePrefix = 'x-font-' + fontName; 20 | var localStorageUrlKey = localStoragePrefix + 'url'; 21 | var localStorageCssKey = localStoragePrefix + 'css'; 22 | var storedFontUrl = loSto[localStorageUrlKey]; 23 | var storedFontCss = loSto[localStorageCssKey]; 24 | 25 | 26 | // 2. Setting up the