diff --git a/roles/www_base/files/html/css/font-faces.css b/roles/www_base/files/html/css/font-faces.css
index 1d9fbef3d..0ee325600 100644
--- a/roles/www_base/files/html/css/font-faces.css
+++ b/roles/www_base/files/html/css/font-faces.css
@@ -70,3 +70,36 @@
        url('/common/fonts/freckle-face-v6-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
        url('/common/fonts/freckle-face-v6-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
 }
+/* .atkinson-hyperlegible-regular */
+@font-face {
+  font-family: "Atkinson Hyperlegible";
+  font-weight: 400;
+  font-style: normal;
+  src: local('Atkinson Hyperlegible Face'), local('AtkinsonHyperlegible-Regular'),
+       url('/common/fonts/AtkinsonHyperlegible-Regular.ttf') format('truetype');
+}
+/* .atkinson-hyperlegible-bold */
+@font-face {
+  font-family: "Atkinson Hyperlegible";
+  font-weight: 700;
+  font-style: normal;
+  src: local('Atkinson Hyperlegible Face'), local('AtkinsonHyperlegible-Bold'),
+       url('/common/fonts/AtkinsonHyperlegible-Bold.ttf') format('truetype');
+}
+/* .atkinson-hyperlegible-italic */
+@font-face {
+  font-family: "Atkinson Hyperlegible";
+  font-weight: 400;
+  font-style: italic;
+  src: local('Atkinson Hyperlegible Face'), local('AtkinsonHyperlegible-Italic'),
+       url('/common/fonts/AtkinsonHyperlegible-Italic.ttf') format('truetype');
+}
+
+/* .atkinson-hyperlegible-bold-italic */
+@font-face {
+  font-family: "Atkinson Hyperlegible";
+  font-weight: 700;
+  font-style: italic;
+  src: local('Atkinson Hyperlegible Face'), local('AtkinsonHyperlegible-BoldItalic'),
+       url('/common/fonts/AtkinsonHyperlegible-BoldItalic.ttf') format('truetype');
+}