Detect non WOFF2 fonts and estimate gain

front/src/views/rule.html

@@ -483,6 +483,26 @@
         </div>
     </div>
 
+    <div ng-if="policyName === 'nonWoff2Fonts'">
+        <h3 ng-if="rule.value > 0">{{rule.value | bytes}} could be saved on <ng-pluralize count="rule.offendersObj.list.fonts.length" when="{'one': '1 file', 'other': '{} files'}"></ng-pluralize></h3>
+        <div class="table">
+            <div class="headers">
+                <div>File</div>
+                <div>Current weight</div>
+                <div>Woff 2 weight</div>
+                <div>Gain</div>
+            </div>
+            <div ng-repeat="file in rule.offendersObj.list.fonts | orderBy:'-gain'">
+                <div>
+                    <url-link url="file.url" max-length="70"></url-link>
+                </div>
+                <div>{{file.originalSize | bytes}}</div>
+                <div>{{file.woff2Size | bytes}}</div>
+                <div><b>-{{file.gain | bytes}}</b></div>
+            </div>
+        </div>
+    </div>
+
     <div ng-if="policyName === 'http2'">
         <h3>Protocols advertised by the server</h3>
         <div class="offendersTable">