Move fonts (#9)

Moves fonts to asset pipeline. Also adds `font-display: swap` to prevent a "flash of invisible text" in browsers, per PageSpeed Insight's recommendations.
seanmack · Sep 14, 2023 · 9a7adb7 · 9a7adb7
1 parent 7cf70d7
commit 9a7adb7
Show file tree

Hide file tree

Showing 10 changed files with 18 additions and 8 deletions.
diff --git a/app/assets/config/manifest.js b/app/assets/config/manifest.js
@@ -2,3 +2,5 @@
 //= link_directory ../stylesheets .css
 //= link_tree ../../javascript .js
 //= link_tree ../../../vendor/javascript .js
+//= link_directory ../fonts .woff
+//= link_directory ../fonts .woff2
diff --git a/app/assets/fonts/roboto-v29-latin-700.woff b/app/assets/fonts/roboto-v29-latin-700.woff
diff --git a/app/assets/fonts/roboto-v29-latin-700.woff2 b/app/assets/fonts/roboto-v29-latin-700.woff2
diff --git a/app/assets/fonts/roboto-v29-latin-900.woff b/app/assets/fonts/roboto-v29-latin-900.woff
diff --git a/app/assets/fonts/roboto-v29-latin-900.woff2 b/app/assets/fonts/roboto-v29-latin-900.woff2
diff --git a/app/assets/fonts/roboto-v29-latin-regular.woff b/app/assets/fonts/roboto-v29-latin-regular.woff
diff --git a/app/assets/fonts/roboto-v29-latin-regular.woff2 b/app/assets/fonts/roboto-v29-latin-regular.woff2
diff --git a/app/assets/stylesheets/root.css → app/assets/stylesheets/root.css.erb b/app/assets/stylesheets/root.css → app/assets/stylesheets/root.css.erb
@@ -90,26 +90,29 @@
     font-style: normal;
     font-weight: 400;
     src: local(''),
-      url('/assets/fonts/roboto-v29-latin-regular.woff2') format('woff2'),
-      url('/assets/fonts/roboto-v29-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+      url('<%= asset_path "roboto-v29-latin-regular.woff2" %>') format('woff2'),
+      url('<%= asset_path "roboto-v29-latin-regular.woff" %>') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+    font-display: swap;
   }
   /* roboto-700 - latin */
   @font-face {
     font-family: 'Roboto';
     font-style: normal;
     font-weight: 700;
     src: local(''),
-      url('/assets/fonts/roboto-v29-latin-700.woff2') format('woff2'),
-      url('/assets/fonts/roboto-v29-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+      url('<%= asset_path "roboto-v29-latin-700.woff2" %>') format('woff2'),
+      url('<%= asset_path "roboto-v29-latin-700.woff" %>') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+    font-display: swap;
   }
   /* roboto-900 - latin */
   @font-face {
     font-family: 'Roboto';
     font-style: normal;
     font-weight: 900;
     src: local(''),
-      url('/assets/fonts/roboto-v29-latin-900.woff2') format('woff2'),
-      url('/assets/fonts/roboto-v29-latin-900.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+      url('<%= asset_path "roboto-v29-latin-900.woff2" %>') format('woff2'),
+      url('<%= asset_path "roboto-v29-latin-900.woff" %>') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+    font-display: swap;
   }
   body,
   html {

diff --git a/app/views/layouts/static.html.erb b/app/views/layouts/static.html.erb
@@ -33,8 +33,9 @@
       <%= tag :link, rel: 'preload', as: 'image', href: yield(:preload_image_path) %>
     <% end %>
 
-    <link rel="preload" as="font" type="font/woff2" href="/assets/fonts/roboto-v29-latin-regular.woff2" crossorigin>
-    <link rel="preload" as="font" type="font/woff2" href="/assets/fonts/roboto-v29-latin-700.woff2" crossorigin>
+
+    <%= preload_link_tag asset_path("roboto-v29-latin-regular.woff2"), type: "font/woff2", crossorigin: "anonymous", as: "font" %>
+    <%= preload_link_tag asset_path("roboto-v29-latin-700.woff2"), type: "font/woff2", crossorigin: "anonymous", as: "font" %>
 
     <!-- Preload an image - tag not rendered if preloadImg is blank to stop console errors
     {% if preloadImg != '' %}

diff --git a/config/environments/development.rb b/config/environments/development.rb
@@ -67,4 +67,8 @@
 
   # Uncomment if you wish to allow Action Cable access from any origin.
   # config.action_cable.disable_request_forgery_protection = true
+
+  config.assets.debug = true
+  config.assets.compile = true
+  config.assets.check_precompiled_asset = false
 end