diff --git a/web/static/css/base.css b/web/static/css/base.css
index 5db892b..5fa2566 100644
--- a/web/static/css/base.css
+++ b/web/static/css/base.css
@@ -1,4 +1,3 @@
-@import url("https://fonts.googleapis.com/css2?family=Syne:wght@700&display=swap");
 html {
   scroll-behavior: smooth;
 }
diff --git a/web/static/css/base.css.map b/web/static/css/base.css.map
index 00446c4..4455f50 100644
--- a/web/static/css/base.css.map
+++ b/web/static/css/base.css.map
@@ -1 +1 @@
-{"version":3,"sources":["base.sass","base.css","_vars.sass"],"names":[],"mappings":"AACQ,kFAAA;AAER;EACI,uBAAA;ACDJ;;ADGA;EACI,yBENS;ADMb;;ADEA;EACI,gBEQS;EFPT,cAAA;ACCJ;;ADCA;EACI,sBAAA;EACA,YAAA;EACA,cEhBG;EFiBH,gCAAA;ACEJ;;ADAA;EACI,qBAAA;ACGJ;;ADAI;EACI,gBAAA;EACA,iBAAA;EACA,+BAAA;ACGR;;ADAI;EACI,mBAAA;ACGR;;ADAI;EACI,mBAAA;ACGR;;ADDA;EACI,0BAAA;EACA,8BEhCM;EFiCN,0BAAA;EACA,8BAAA;EAEA,gBAAA;ACGJ;ADDI;EACI,4BAAA;EACA,4CEtCO;ADyCf;;ADDA;EACI,YAAA;ACIJ;;ADFA;EACI,cAAA;EACA,eAAA;ACKJ;;ADHA;EACI,cExDG;EFyDH,mBEnDM;EFoDN,gBAAA;EACA,kBAAA;ACMJ;;ADJA;EACI,8CAAA;EACA,gBAAA;EACA,mBE9DQ;EF+DR,kBEjDG;EFkDH,sBAAA;EACA,gCAAA;ACOJ;;ADLA;EACI,cAAA;EACA,kBAAA;EACA,8BAAA;EACA,YAAA;EACA,mBExEQ;EFyER,WAAA;EACA,kBE5DG;ADoEP;ADNI;EACI,0BEnEA;AD2ER;ADPI;EACI,0BEpED;AD6EP;ADRI;EACI,0BErEE;AD+EV;;ADRA;EACI,8CAAA;EACA,gBAAA;EACA,mBEtFQ;EFuFR,kBEzEG;EF0EH,sBAAA;ACWJ;;ADRI;EACI,mBAAA;ACWR;;ADTA;EACI,iBAAA;ACYJ;;ADVA;EAEI,aAAA;ACYJ;;ADVA;EACI,gFAAA;EACA,6BAAA;EACA,oCAAA;ACaJ;;ADXA;EACI;IACI,cAAA;IACA,gBAAA;ECcN;AACF","file":"base.css","sourcesContent":["@import '_vars'\n@import url('https://fonts.googleapis.com/css2?family=Syne:wght@700&display=swap')\n\nhtml\n    scroll-behavior: smooth\n\nbody\n    background-color: $background\n\nnav, main, footer\n    max-width: $main-width\n    margin: 0 auto\n\n*, *::before, *::after\n    box-sizing: border-box\n    border: none\n    color: $text\n    font-family: 'Inter', sans-serif\n\na\n    text-decoration: none\n\nh1, h2, h3\n    &, *\n        font-weight: 700\n        line-height: 3rem\n        font-family: 'Syne', sans-serif\n\nh2\n    &, *\n        line-height: 2.2rem\n\nh3\n    &, *\n        line-height: 1.5rem\n\nmain a\n    text-decoration: underline\n    text-decoration-color: $primary\n    text-underline-offset: 2px\n    text-decoration-thickness: 5px\n\n    transition: 0.2s\n\n    &:hover\n        text-decoration-thickness: 0\n        background: $primary-glow\n\nmain p\n    opacity: 0.9\n\nimg\n    display: block\n    max-width: 100%\n\nmark\n    color: $text\n    background: $primary\n    padding: 5px 7px\n    border-radius: 5px\n\nkbd\n    font-family: 'Courier New', Courier, monospace\n    font-weight: 600\n    background: $secondary\n    border-radius: $edge\n    padding: 0.2rem 0.4rem\n    border-bottom: 3px solid $secondary-dark\n\nblockquote\n    margin-left: 0\n    padding: 1rem 1rem\n    border-left: 5px solid $accent\n    opacity: 0.8\n    background: $secondary\n    width: 100%\n    border-radius: $edge\n\n    &.error\n        border-left-color: $error\n    &.warning\n        border-left-color: $warn\n    &.success\n        border-left-color: $success\n\ncode\n    font-family: 'Courier New', Courier, monospace\n    font-weight: 600\n    background: $secondary\n    border-radius: $edge\n    padding: 0.2rem 0.4rem\n\npre code\n    *, &\n        font-weight: normal\n\np, p *, ol, ul, li\n    line-height: 32px\n\n:focus:not(:focus-visible)\n\n    outline: none\n\n.special-gradient\n    background: linear-gradient(83deg, rgba(244,90,136,1) 7%, rgba(40,170,240,1) 100%)\n    -webkit-background-clip: text\n    -webkit-text-fill-color: transparent\n\n@media (max-width: 900px)\n    body\n        margin: 0 2rem\n        margin-top: 2rem\n","@import url(\"https://fonts.googleapis.com/css2?family=Syne:wght@700&display=swap\");\nhtml {\n  scroll-behavior: smooth;\n}\n\nbody {\n  background-color: #03060d;\n}\n\nnav, main, footer {\n  max-width: 800px;\n  margin: 0 auto;\n}\n\n*, *::before, *::after {\n  box-sizing: border-box;\n  border: none;\n  color: #f3f3f3;\n  font-family: \"Inter\", sans-serif;\n}\n\na {\n  text-decoration: none;\n}\n\nh1, h1 *, h2, h2 *, h3, h3 * {\n  font-weight: 700;\n  line-height: 3rem;\n  font-family: \"Syne\", sans-serif;\n}\n\nh2, h2 * {\n  line-height: 2.2rem;\n}\n\nh3, h3 * {\n  line-height: 1.5rem;\n}\n\nmain a {\n  text-decoration: underline;\n  text-decoration-color: #b53d61;\n  text-underline-offset: 2px;\n  text-decoration-thickness: 5px;\n  transition: 0.2s;\n}\nmain a:hover {\n  text-decoration-thickness: 0;\n  background: rgba(244, 90, 136, 0.3803921569);\n}\n\nmain p {\n  opacity: 0.9;\n}\n\nimg {\n  display: block;\n  max-width: 100%;\n}\n\nmark {\n  color: #f3f3f3;\n  background: #b53d61;\n  padding: 5px 7px;\n  border-radius: 5px;\n}\n\nkbd {\n  font-family: \"Courier New\", Courier, monospace;\n  font-weight: 600;\n  background: #252a38;\n  border-radius: 5px;\n  padding: 0.2rem 0.4rem;\n  border-bottom: 3px solid #0e0e0e;\n}\n\nblockquote {\n  margin-left: 0;\n  padding: 1rem 1rem;\n  border-left: 5px solid #28aaf0;\n  opacity: 0.8;\n  background: #252a38;\n  width: 100%;\n  border-radius: 5px;\n}\nblockquote.error {\n  border-left-color: #ef3628;\n}\nblockquote.warning {\n  border-left-color: #f09928;\n}\nblockquote.success {\n  border-left-color: #28ef6b;\n}\n\ncode {\n  font-family: \"Courier New\", Courier, monospace;\n  font-weight: 600;\n  background: #252a38;\n  border-radius: 5px;\n  padding: 0.2rem 0.4rem;\n}\n\npre code *, pre code {\n  font-weight: normal;\n}\n\np, p *, ol, ul, li {\n  line-height: 32px;\n}\n\n:focus:not(:focus-visible) {\n  outline: none;\n}\n\n.special-gradient {\n  background: linear-gradient(83deg, rgb(244, 90, 136) 7%, rgb(40, 170, 240) 100%);\n  -webkit-background-clip: text;\n  -webkit-text-fill-color: transparent;\n}\n\n@media (max-width: 900px) {\n  body {\n    margin: 0 2rem;\n    margin-top: 2rem;\n  }\n}","$text: #f3f3f3\n$background: #03060d\n$secondary: #252a38\n$secondary-dark: #0e0e0e\n$border: #161d2bb0\n\n$primary: #b53d61\n$primary-light: #f45a88\n$primary-glow: #f45a8861\n$primary-soft: #f79ab624\n$accent: #28aaf0\n\n$error: #ef3628\n$warn: #f09928\n$success: #28ef6b\n\n$edge: 5px\n\n$main-width: 800px\n$more-width: 1000px\n"]}
\ No newline at end of file
+{"version":3,"sources":["base.sass","base.css","_vars.sass"],"names":[],"mappings":"AAEA;EACI,uBAAA;ACDJ;;ADGA;EACI,yBELS;ADKb;;ADEA;EACI,gBESS;EFRT,cAAA;ACCJ;;ADCA;EACI,sBAAA;EACA,YAAA;EACA,cEfG;EFgBH,gCAAA;ACEJ;;ADAA;EACI,qBAAA;ACGJ;;ADAI;EACI,gBAAA;EACA,iBAAA;EACA,+BAAA;ACGR;;ADAI;EACI,mBAAA;ACGR;;ADAI;EACI,mBAAA;ACGR;;ADDA;EACI,0BAAA;EACA,8BE/BM;EFgCN,0BAAA;EACA,8BAAA;EAEA,gBAAA;ACGJ;ADDI;EACI,4BAAA;EACA,4CErCO;ADwCf;;ADDA;EACI,YAAA;ACIJ;;ADFA;EACI,cAAA;EACA,eAAA;ACKJ;;ADHA;EACI,cEvDG;EFwDH,mBElDM;EFmDN,gBAAA;EACA,kBAAA;ACMJ;;ADJA;EACI,8CAAA;EACA,gBAAA;EACA,mBE7DQ;EF8DR,kBEhDG;EFiDH,sBAAA;EACA,gCAAA;ACOJ;;ADLA;EACI,cAAA;EACA,kBAAA;EACA,8BAAA;EACA,YAAA;EACA,mBEvEQ;EFwER,WAAA;EACA,kBE3DG;ADmEP;ADNI;EACI,0BElEA;AD0ER;ADPI;EACI,0BEnED;AD4EP;ADRI;EACI,0BEpEE;AD8EV;;ADRA;EACI,8CAAA;EACA,gBAAA;EACA,mBErFQ;EFsFR,kBExEG;EFyEH,sBAAA;ACWJ;;ADRI;EACI,mBAAA;ACWR;;ADTA;EACI,iBAAA;ACYJ;;ADVA;EAEI,aAAA;ACYJ;;ADVA;EACI,gFAAA;EACA,6BAAA;EACA,oCAAA;ACaJ;;ADXA;EACI;IACI,cAAA;IACA,gBAAA;ECcN;AACF","file":"base.css","sourcesContent":["@import '_vars'\n\nhtml\n    scroll-behavior: smooth\n\nbody\n    background-color: $background\n\nnav, main, footer\n    max-width: $main-width\n    margin: 0 auto\n\n*, *::before, *::after\n    box-sizing: border-box\n    border: none\n    color: $text\n    font-family: 'Inter', sans-serif\n\na\n    text-decoration: none\n\nh1, h2, h3\n    &, *\n        font-weight: 700\n        line-height: 3rem\n        font-family: 'Syne', sans-serif\n\nh2\n    &, *\n        line-height: 2.2rem\n\nh3\n    &, *\n        line-height: 1.5rem\n\nmain a\n    text-decoration: underline\n    text-decoration-color: $primary\n    text-underline-offset: 2px\n    text-decoration-thickness: 5px\n\n    transition: 0.2s\n\n    &:hover\n        text-decoration-thickness: 0\n        background: $primary-glow\n\nmain p\n    opacity: 0.9\n\nimg\n    display: block\n    max-width: 100%\n\nmark\n    color: $text\n    background: $primary\n    padding: 5px 7px\n    border-radius: 5px\n\nkbd\n    font-family: 'Courier New', Courier, monospace\n    font-weight: 600\n    background: $secondary\n    border-radius: $edge\n    padding: 0.2rem 0.4rem\n    border-bottom: 3px solid $secondary-dark\n\nblockquote\n    margin-left: 0\n    padding: 1rem 1rem\n    border-left: 5px solid $accent\n    opacity: 0.8\n    background: $secondary\n    width: 100%\n    border-radius: $edge\n\n    &.error\n        border-left-color: $error\n    &.warning\n        border-left-color: $warn\n    &.success\n        border-left-color: $success\n\ncode\n    font-family: 'Courier New', Courier, monospace\n    font-weight: 600\n    background: $secondary\n    border-radius: $edge\n    padding: 0.2rem 0.4rem\n\npre code\n    *, &\n        font-weight: normal\n\np, p *, ol, ul, li\n    line-height: 32px\n\n:focus:not(:focus-visible)\n\n    outline: none\n\n.special-gradient\n    background: linear-gradient(83deg, rgba(244,90,136,1) 7%, rgba(40,170,240,1) 100%)\n    -webkit-background-clip: text\n    -webkit-text-fill-color: transparent\n\n@media (max-width: 900px)\n    body\n        margin: 0 2rem\n        margin-top: 2rem\n","html {\n  scroll-behavior: smooth;\n}\n\nbody {\n  background-color: #03060d;\n}\n\nnav, main, footer {\n  max-width: 800px;\n  margin: 0 auto;\n}\n\n*, *::before, *::after {\n  box-sizing: border-box;\n  border: none;\n  color: #f3f3f3;\n  font-family: \"Inter\", sans-serif;\n}\n\na {\n  text-decoration: none;\n}\n\nh1, h1 *, h2, h2 *, h3, h3 * {\n  font-weight: 700;\n  line-height: 3rem;\n  font-family: \"Syne\", sans-serif;\n}\n\nh2, h2 * {\n  line-height: 2.2rem;\n}\n\nh3, h3 * {\n  line-height: 1.5rem;\n}\n\nmain a {\n  text-decoration: underline;\n  text-decoration-color: #b53d61;\n  text-underline-offset: 2px;\n  text-decoration-thickness: 5px;\n  transition: 0.2s;\n}\nmain a:hover {\n  text-decoration-thickness: 0;\n  background: rgba(244, 90, 136, 0.3803921569);\n}\n\nmain p {\n  opacity: 0.9;\n}\n\nimg {\n  display: block;\n  max-width: 100%;\n}\n\nmark {\n  color: #f3f3f3;\n  background: #b53d61;\n  padding: 5px 7px;\n  border-radius: 5px;\n}\n\nkbd {\n  font-family: \"Courier New\", Courier, monospace;\n  font-weight: 600;\n  background: #252a38;\n  border-radius: 5px;\n  padding: 0.2rem 0.4rem;\n  border-bottom: 3px solid #0e0e0e;\n}\n\nblockquote {\n  margin-left: 0;\n  padding: 1rem 1rem;\n  border-left: 5px solid #28aaf0;\n  opacity: 0.8;\n  background: #252a38;\n  width: 100%;\n  border-radius: 5px;\n}\nblockquote.error {\n  border-left-color: #ef3628;\n}\nblockquote.warning {\n  border-left-color: #f09928;\n}\nblockquote.success {\n  border-left-color: #28ef6b;\n}\n\ncode {\n  font-family: \"Courier New\", Courier, monospace;\n  font-weight: 600;\n  background: #252a38;\n  border-radius: 5px;\n  padding: 0.2rem 0.4rem;\n}\n\npre code *, pre code {\n  font-weight: normal;\n}\n\np, p *, ol, ul, li {\n  line-height: 32px;\n}\n\n:focus:not(:focus-visible) {\n  outline: none;\n}\n\n.special-gradient {\n  background: linear-gradient(83deg, rgb(244, 90, 136) 7%, rgb(40, 170, 240) 100%);\n  -webkit-background-clip: text;\n  -webkit-text-fill-color: transparent;\n}\n\n@media (max-width: 900px) {\n  body {\n    margin: 0 2rem;\n    margin-top: 2rem;\n  }\n}","$text: #f3f3f3\n$background: #03060d\n$secondary: #252a38\n$secondary-dark: #0e0e0e\n$border: #161d2bb0\n\n$primary: #b53d61\n$primary-light: #f45a88\n$primary-glow: #f45a8861\n$primary-soft: #f79ab624\n$accent: #28aaf0\n\n$error: #ef3628\n$warn: #f09928\n$success: #28ef6b\n\n$edge: 5px\n\n$main-width: 800px\n$more-width: 1000px\n"]}
\ No newline at end of file
diff --git a/web/static/css/base.sass b/web/static/css/base.sass
index 2c61126..cdf473f 100644
--- a/web/static/css/base.sass
+++ b/web/static/css/base.sass
@@ -1,5 +1,4 @@
 @import '_vars'
-@import url('https://fonts.googleapis.com/css2?family=Syne:wght@700&display=swap')
 
 html
     scroll-behavior: smooth
diff --git a/web/static/css/fonts.css b/web/static/css/fonts.css
new file mode 100644
index 0000000..40c0be7
--- /dev/null
+++ b/web/static/css/fonts.css
@@ -0,0 +1,40 @@
+/* syne-regular - latin */
+@font-face {
+    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+    font-family: 'Syne';
+    font-style: normal;
+    font-weight: 400;
+    src: url('/static/fonts/syne-v16-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+  }
+  /* syne-500 - latin */
+  @font-face {
+    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+    font-family: 'Syne';
+    font-style: normal;
+    font-weight: 500;
+    src: url('/static/fonts/syne-v16-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+  }
+  /* syne-600 - latin */
+  @font-face {
+    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+    font-family: 'Syne';
+    font-style: normal;
+    font-weight: 600;
+    src: url('/static/fonts/syne-v16-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+  }
+  /* syne-700 - latin */
+  @font-face {
+    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+    font-family: 'Syne';
+    font-style: normal;
+    font-weight: 700;
+    src: url('/static/fonts/syne-v16-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+  }
+  /* syne-800 - latin */
+  @font-face {
+    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+    font-family: 'Syne';
+    font-style: normal;
+    font-weight: 800;
+    src: url('/static/fonts/syne-v16-latin-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+  }
\ No newline at end of file
diff --git a/web/static/fonts/syne-v16-latin-500.woff2 b/web/static/fonts/syne-v16-latin-500.woff2
new file mode 100644
index 0000000..674d36f
Binary files /dev/null and b/web/static/fonts/syne-v16-latin-500.woff2 differ
diff --git a/web/static/fonts/syne-v16-latin-600.woff2 b/web/static/fonts/syne-v16-latin-600.woff2
new file mode 100644
index 0000000..cb15378
Binary files /dev/null and b/web/static/fonts/syne-v16-latin-600.woff2 differ
diff --git a/web/static/fonts/syne-v16-latin-700.woff2 b/web/static/fonts/syne-v16-latin-700.woff2
new file mode 100644
index 0000000..6a6d4ee
Binary files /dev/null and b/web/static/fonts/syne-v16-latin-700.woff2 differ
diff --git a/web/static/fonts/syne-v16-latin-800.woff2 b/web/static/fonts/syne-v16-latin-800.woff2
new file mode 100644
index 0000000..4bedd53
Binary files /dev/null and b/web/static/fonts/syne-v16-latin-800.woff2 differ
diff --git a/web/static/fonts/syne-v16-latin-regular.woff2 b/web/static/fonts/syne-v16-latin-regular.woff2
new file mode 100644
index 0000000..032ad22
Binary files /dev/null and b/web/static/fonts/syne-v16-latin-regular.woff2 differ