diff --git a/.gitattributes b/.gitattributes
index ee2ca03..d18b785 100644
--- a/.gitattributes
+++ b/.gitattributes
@@ -4,3 +4,4 @@
 **.ttf filter=lfs diff=lfs merge=lfs -text
 **.woff filter=lfs diff=lfs merge=lfs -text
 **.ico filter=lfs diff=lfs merge=lfs -text
+**.woff2 filter=lfs diff=lfs merge=lfs -text
diff --git a/assets/fonts/lato-v20-latin-700.ttf b/assets/fonts/lato-v20-latin-700.ttf
new file mode 100644
index 0000000..95d5c23
--- /dev/null
+++ b/assets/fonts/lato-v20-latin-700.ttf
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:a6b44938bc5bcb4c2a08ca8a762ec10566c66026f40704f13cb47e370b5c8e2c
+size 59032
diff --git a/assets/fonts/lato-v20-latin-700.woff b/assets/fonts/lato-v20-latin-700.woff
new file mode 100644
index 0000000..269d7ed
--- /dev/null
+++ b/assets/fonts/lato-v20-latin-700.woff
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:9f5a6fb49257579436c7bd8d42fa5d052336132b6f9f8972a7c9c00d93ed18b4
+size 28052
diff --git a/assets/fonts/lato-v20-latin-700.woff2 b/assets/fonts/lato-v20-latin-700.woff2
new file mode 100644
index 0000000..995ebb7
--- /dev/null
+++ b/assets/fonts/lato-v20-latin-700.woff2
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:8d3ca80fa271e94b0c36cf3053b0f806b7a42bb3395b424c99dc0bd218f0ac20
+size 22992
diff --git a/assets/fonts/lato-v20-latin-900.ttf b/assets/fonts/lato-v20-latin-900.ttf
new file mode 100644
index 0000000..9529e93
--- /dev/null
+++ b/assets/fonts/lato-v20-latin-900.ttf
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:0faf89b39cb8924a206a6b7cf2cc56d2e03a25788f3b6adb45529650b581d780
+size 55492
diff --git a/assets/fonts/lato-v20-latin-900.woff b/assets/fonts/lato-v20-latin-900.woff
new file mode 100644
index 0000000..cdb3d8a
--- /dev/null
+++ b/assets/fonts/lato-v20-latin-900.woff
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:7831e273f41fef8485564286f3578d2847754db375befdb48b8ce37e1e1f3a57
+size 27524
diff --git a/assets/fonts/lato-v20-latin-900.woff2 b/assets/fonts/lato-v20-latin-900.woff2
new file mode 100644
index 0000000..0b91e68
--- /dev/null
+++ b/assets/fonts/lato-v20-latin-900.woff2
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:7d4243c8e973ec0cfc707904891ae4e3efc03dbc8923acb9755f9a35c92269a6
+size 22572
diff --git a/assets/fonts/lato-v20-latin-regular.ttf b/assets/fonts/lato-v20-latin-regular.ttf
new file mode 100644
index 0000000..9f5a160
--- /dev/null
+++ b/assets/fonts/lato-v20-latin-regular.ttf
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:acb428bb824a7f7d865446caa0fe1f6885aa0723e43848042f51db37f0926f1f
+size 60524
diff --git a/assets/fonts/lato-v20-latin-regular.woff b/assets/fonts/lato-v20-latin-regular.woff
new file mode 100644
index 0000000..05af44e
--- /dev/null
+++ b/assets/fonts/lato-v20-latin-regular.woff
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:04050bae4cc3b9ccd20d3c7f57f5b1ba249d4a54d6eff75a1e4df504362e8c00
+size 28660
diff --git a/assets/fonts/lato-v20-latin-regular.woff2 b/assets/fonts/lato-v20-latin-regular.woff2
new file mode 100644
index 0000000..4368b37
--- /dev/null
+++ b/assets/fonts/lato-v20-latin-regular.woff2
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:c3c0d3f472358aac78455515c4800771426770c22698e2486d39fdb5505634e1
+size 23484
diff --git a/assets/fonts/lato_italic_400.ttf b/assets/fonts/lato_italic_400.ttf
deleted file mode 100644
index bb8cb1b..0000000
--- a/assets/fonts/lato_italic_400.ttf
+++ /dev/null
@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:fd06557f74de9825f1e079d902d81f76417e07c47715f0ec127047560c85af71
-size 72888
diff --git a/assets/fonts/lato_italic_700.ttf b/assets/fonts/lato_italic_700.ttf
deleted file mode 100644
index bdca23c..0000000
--- a/assets/fonts/lato_italic_700.ttf
+++ /dev/null
@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:9d639cf8ee1db5eacfb3bd82ccf709561e9c7c8a48ae328f77e1a19806268b64
-size 74788
diff --git a/assets/fonts/lato_italic_900.ttf b/assets/fonts/lato_italic_900.ttf
deleted file mode 100644
index 13b5b70..0000000
--- a/assets/fonts/lato_italic_900.ttf
+++ /dev/null
@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:07a2e07b3355ef98f9391acbe3a395b074115a9a10924b61ccb3d6cf66d4f0ed
-size 68996
diff --git a/assets/fonts/lato_normal_400.ttf b/assets/fonts/lato_normal_400.ttf
deleted file mode 100644
index 03ad750..0000000
--- a/assets/fonts/lato_normal_400.ttf
+++ /dev/null
@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:497cb53c10b503a6c03aeafd59804320972dbe447cc2e18c41e872318883c8ad
-size 72296
diff --git a/assets/fonts/lato_normal_700.ttf b/assets/fonts/lato_normal_700.ttf
deleted file mode 100644
index f980225..0000000
--- a/assets/fonts/lato_normal_700.ttf
+++ /dev/null
@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:3364e4ead13a90e0bc0561a71970a9e955eb3824fe8f0f8de8c43b4b50e26037
-size 70560
diff --git a/assets/fonts/lato_normal_900.ttf b/assets/fonts/lato_normal_900.ttf
deleted file mode 100644
index 04ee7d1..0000000
--- a/assets/fonts/lato_normal_900.ttf
+++ /dev/null
@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:3aa190b0e78c467b9297e397f2548fa1f3d310c2ec9b7f89adf4b87ebce749e8
-size 66592
diff --git a/assets/fonts/mochiy-pop-one-v5-latin-regular.ttf b/assets/fonts/mochiy-pop-one-v5-latin-regular.ttf
new file mode 100644
index 0000000..c73e289
--- /dev/null
+++ b/assets/fonts/mochiy-pop-one-v5-latin-regular.ttf
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:38b66e120ae18ac9f7aa68b653d76b6056c84e503aeeb8606e8b3ae804a4e0df
+size 38160
diff --git a/assets/fonts/mochiy-pop-one-v5-latin-regular.woff b/assets/fonts/mochiy-pop-one-v5-latin-regular.woff
new file mode 100644
index 0000000..7bde619
--- /dev/null
+++ b/assets/fonts/mochiy-pop-one-v5-latin-regular.woff
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:1025b6de8bd8bee02dad2e4d7edb242af4e0f87c9e61afb3b6a77bb985cac3da
+size 22716
diff --git a/assets/fonts/mochiy-pop-one-v5-latin-regular.woff2 b/assets/fonts/mochiy-pop-one-v5-latin-regular.woff2
new file mode 100644
index 0000000..23959ed
--- /dev/null
+++ b/assets/fonts/mochiy-pop-one-v5-latin-regular.woff2
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:af5aca8ca15a44f468c4664b3c8363f3cea276c090ac3abb2ebebdb5a7d13736
+size 18228
diff --git a/assets/scss/_fonts.scss b/assets/scss/_fonts.scss
index bb488d2..c8ceeea 100644
--- a/assets/scss/_fonts.scss
+++ b/assets/scss/_fonts.scss
@@ -1,53 +1,46 @@
 
-// 'Mochiy Pop P One' font
+/* mochiy-pop-one-regular - latin */
 @font-face {
-  font-family: 'Mochiy Pop P One';
+  font-family: $headline_font;
   font-style: normal;
   font-weight: 400;
   font-display: swap;
-  src: url(/fonts/mochiypoppone.ttf) format('truetype');
+  src: local(''),
+       url('../fonts/mochiy-pop-one-v5-latin-regular.woff2') format('woff2'),
+       url('../fonts/mochiy-pop-one-v5-latin-regular.woff') format('woff'),
+       url('../fonts/mochiy-pop-one-v5-latin-regular.ttf') format('truetype'),
 }
 
 // Lato font
 @font-face {
-  font-family: 'Lato';
-  font-style: italic;
-  font-weight: 400;
-  font-display: swap;
-  src: url(/fonts/lato_italic_400.ttf) format('truetype');
-}
-@font-face {
-  font-family: 'Lato';
-  font-style: italic;
-  font-weight: 700;
-  font-display: swap;
-  src: url(/fonts/lato_italic_700.ttf) format('truetype');
-}
-@font-face {
-  font-family: 'Lato';
-  font-style: italic;
-  font-weight: 900;
-  font-display: swap;
-  src: url(/fonts/lato_italic_900.ttf) format('truetype');
-}
-@font-face {
-  font-family: 'Lato';
+  font-family: $main_font;
   font-style: normal;
   font-weight: 400;
   font-display: swap;
-  src: url(/fonts/lato_normal_400.ttf) format('truetype');
+  src: local(''),
+      url('/fonts/lato-v20-latin-regular.woff2') format('woff2'),
+      url('/fonts/lato-v20-latin-regular.woff') format('woff'),
+      url('/fonts/lato-v20-latin-regular.ttf') format('truetype');
 }
+
 @font-face {
-  font-family: 'Lato';
+  font-family: $main_font;
   font-style: normal;
   font-weight: 700;
   font-display: swap;
-  src: url(/fonts/lato_normal_700.ttf) format('truetype');
+  src: local(''),
+      url('/fonts/lato-v20-latin-700.woff2') format('woff2'),
+      url('/fonts/lato-v20-latin-700.woff') format('woff'),
+      url('/fonts/lato-v20-latin-700.ttf') format('truetype');
 }
+
 @font-face {
-  font-family: 'Lato';
+  font-family: $main_font;
   font-style: normal;
   font-weight: 900;
   font-display: swap;
-  src: url(/fonts/lato_normal_900.ttf) format('truetype');
+  src: local(''),
+      url('/fonts/lato-v20-latin-900.woff2') format('woff2'),
+      url('/fonts/lato-v20-latin-900.woff') format('woff'),
+      url('/fonts/lato-v20-latin-900.ttf') format('truetype');
 }
diff --git a/assets/scss/_general.scss b/assets/scss/_general.scss
index 3a67001..cbea88f 100644
--- a/assets/scss/_general.scss
+++ b/assets/scss/_general.scss
@@ -1,5 +1,5 @@
 body {
-    font-family: 'Lato', sans-serif;
+    font-family: $main_font, sans-serif;
     margin: 25px 25px 50px 25px;
     background: $background_accent_2;
     a {
diff --git a/assets/scss/_header.scss b/assets/scss/_header.scss
index 70ece75..9a493e1 100644
--- a/assets/scss/_header.scss
+++ b/assets/scss/_header.scss
@@ -4,7 +4,7 @@ header {
     padding: 20px 30px;
     box-shadow: 5px 5px 5px 10px $background_accent_1;
     h1 a, h1 a:hover, h1 a:link {
-        font-family: 'Mochiy Pop P One', sans-serif;
+        font-family: $headline_font, sans-serif;
         color: $font_accent_1;
         margin: 0;
         font-weight: bold;
@@ -23,3 +23,10 @@ header {
         }
     }
 }
+@media (max-width: $media_horizontal_breakpoint) {
+    header {
+        h1 a, h1 a:hover, h1 a:link {
+            font-size: $font_size_h1_mobile;
+        }
+    }
+}
diff --git a/assets/scss/_start.scss b/assets/scss/_start.scss
index 0c31538..0749373 100644
--- a/assets/scss/_start.scss
+++ b/assets/scss/_start.scss
@@ -30,3 +30,13 @@ div.start {
         text-shadow: 0px 0px 1px black;
     }
 }
+
+@media (max-width: $media_horizontal_breakpoint) {
+    div.start {
+        display: initial;
+        .left, .right {
+            text-align: center;
+            margin-top: 40px;
+        }
+    }
+}
diff --git a/assets/scss/_variables.scss b/assets/scss/_variables.scss
index a17e980..6ce8c9b 100644
--- a/assets/scss/_variables.scss
+++ b/assets/scss/_variables.scss
@@ -10,4 +10,10 @@ $font_default: white;
 $font_size_default: 1.5em;
 $font_size_code: 1.7em;
 $font_size_h1: 3em;
+$font_size_h1_mobile: 1.5em;
 $font_size_h2: 2.3em;
+
+$headline_font: 'Mochiy Pop One';
+$main_font: 'Lato';
+
+$media_horizontal_breakpoint: 900px;