diff --git a/public/fonts/Roboto-bold.woff b/public/fonts/Roboto-bold.woff
new file mode 100755
index 0000000..ee614ee
Binary files /dev/null and b/public/fonts/Roboto-bold.woff differ
diff --git a/public/fonts/Roboto.woff b/public/fonts/Roboto.woff
new file mode 100755
index 0000000..8aa07d7
Binary files /dev/null and b/public/fonts/Roboto.woff differ
diff --git a/src/App.vue b/src/App.vue
index 622ce27..9f683cb 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -7,7 +7,7 @@
 <script>
 
 export default {
-  name: 'souvenir',
+  name: 'souvenir'
 }
 </script>
 
diff --git a/src/assets/css/3-base/_01-fonts.css b/src/assets/css/3-base/_01-fonts.css
index 3d037dd..95b4343 100644
--- a/src/assets/css/3-base/_01-fonts.css
+++ b/src/assets/css/3-base/_01-fonts.css
@@ -1,3 +1,21 @@
 /* ----------------------------------------------------------- */
 /* == custom fonts */
 /* ----------------------------------------------------------- */
+
+@font-face {
+  font-weight: normal;
+  font-style: normal;
+  font-family: "Roboto";
+  src: url("/fonts/Roboto.woff") format("woff"), local("Roboto");
+
+  font-display: swap;
+}
+
+@font-face {
+  font-weight: bold;
+  font-style: normal;
+  font-family: "Roboto";
+  src: url("/fonts/Roboto-bold.woff") format("woff"), local("Roboto");
+
+  font-display: swap;
+}
diff --git a/src/assets/css/3-base/_02-main.css b/src/assets/css/3-base/_02-main.css
index 5fd37bf..a960290 100644
--- a/src/assets/css/3-base/_02-main.css
+++ b/src/assets/css/3-base/_02-main.css
@@ -6,6 +6,9 @@ body {
   background: var(--color-tertiary) url("/img/dotgrid.png");
   color: var(--color-light-text);
   font-family: var(--fontstack);
+
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
 
 .container {
diff --git a/src/assets/css/config.css b/src/assets/css/config.css
index ce92772..0d3a8da 100644
--- a/src/assets/css/config.css
+++ b/src/assets/css/config.css
@@ -12,7 +12,7 @@
 :root {
   --base-font: 14; /* px value (without unit), will be converted in em */
   --line-height: 1.5;
-  --fontstack: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  --fontstack: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
 }
 
 /* responsive