diff --git a/app/fonts/Euclid/EuclidCircularB-Bold-WebXL.ttf b/app/fonts/Euclid/EuclidCircularB-Bold-WebXL.ttf
new file mode 100644
index 000000000..244ebba0a
Binary files /dev/null and b/app/fonts/Euclid/EuclidCircularB-Bold-WebXL.ttf differ
diff --git a/app/fonts/Euclid/EuclidCircularB-Regular-WebXL.ttf b/app/fonts/Euclid/EuclidCircularB-Regular-WebXL.ttf
new file mode 100644
index 000000000..6cf177fe1
Binary files /dev/null and b/app/fonts/Euclid/EuclidCircularB-Regular-WebXL.ttf differ
diff --git a/app/fonts/Euclid/EuclidCircularB-RegularItalic-WebXL.ttf b/app/fonts/Euclid/EuclidCircularB-RegularItalic-WebXL.ttf
new file mode 100644
index 000000000..35345ba0f
Binary files /dev/null and b/app/fonts/Euclid/EuclidCircularB-RegularItalic-WebXL.ttf differ
diff --git a/ui/app/css/variables/typography.scss b/ui/app/css/variables/typography.scss
index 12bc4fccb..0a51e1738 100644
--- a/ui/app/css/variables/typography.scss
+++ b/ui/app/css/variables/typography.scss
@@ -46,6 +46,27 @@ $fa-font-path: 'fonts/fontawesome';
   src: local('Roboto Black'), local('Roboto-Black'), url('fonts/Roboto/Roboto-Black.ttf') format('truetype');
 }
 
+@font-face {
+  font-family: 'Euclid';
+  font-style: normal;
+  font-weight: 400;
+  src: url('fonts/Euclid/EuclidCircularB-Regular-WebXL.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: 'Euclid';
+  font-style: italic;
+  font-weight: 400;
+  src: url('fonts/Euclid/EuclidCircularB-RegularItalic-WebXL.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: 'Euclid';
+  font-style: normal;
+  font-weight: 700;
+  src: url('fonts/Euclid/EuclidCircularB-Bold-WebXL.ttf') format('truetype');
+}
+
 $font-family: Roboto, Helvetica, Arial, sans-serif;
 
 // Typography