diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html
new file mode 100644
index 0000000000000000000000000000000000000000..92a65a631bff9e365ae73ad3558a65d6f8d9d321
--- /dev/null
+++ b/.storybook/preview-head.html
@@ -0,0 +1,9 @@
+<!-- .storybook/preview-head.html -->
+
+<!-- Pull in static files served from your Static directory or the internet -->
+
+<!-- Cf. Referencing Fonts in Stories ( https://storybook.js.org/docs/react/configure/images-and-assets#referencing-fonts-in-stories ) -->
+<!-- CSS import would avoid duplicate html head stylesheet links but html link is prefered for performance ( https://stackoverflow.com/questions/12316501/including-google-fonts-link-or-import ) -->
+<link rel="preconnect" href="https://fonts.googleapis.com" />
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+<link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet" />
diff --git a/src/app/contact/contact.component.scss b/src/app/contact/contact.component.scss
index de713d7cca40049aa466d2d2ab65d9b432756c1c..ad393715e8fb4363c6281d43983f44fe188d32c5 100644
--- a/src/app/contact/contact.component.scss
+++ b/src/app/contact/contact.component.scss
@@ -23,7 +23,6 @@
   box-sizing: border-box;
   display: flex;
   textarea {
-    font-family: $text-font;
     width: 94%;
     margin-top: 4px;
     &:focus {
diff --git a/src/app/footer/footer.component.scss b/src/app/footer/footer.component.scss
index e356d967ce1e2eb16409dfb2c6e2592423e2df38..92fd701b786c8751d23c5c2e3afea6b914224def 100644
--- a/src/app/footer/footer.component.scss
+++ b/src/app/footer/footer.component.scss
@@ -18,7 +18,7 @@
   .links {
     display: flex;
     gap: 10px;
-    @include lato-regular-12;
+    @include font-regular-12;
     a:not(:last-child)::after {
       content: '•';
       margin-left: 10px;
@@ -54,7 +54,7 @@
 .metro-link {
   display: flex;
   align-items: center;
-  @include lato-regular-12;
+  @include font-regular-12;
 }
 
 .linkedin {
@@ -64,7 +64,7 @@
   border-radius: 4px;
   align-items: center;
   gap: 8px;
-  @include lato-regular-14;
+  @include font-regular-14;
   height: 32px;
   &:hover {
     text-decoration: none;
diff --git a/src/app/form/form-view/account-form/account-credentials/account-credentials.component.scss b/src/app/form/form-view/account-form/account-credentials/account-credentials.component.scss
index 87159e1a7d56c36755cb92d6c6cb55107b5d59db..10798e640e45ac75105877263c21c2f596a162d5 100644
--- a/src/app/form/form-view/account-form/account-credentials/account-credentials.component.scss
+++ b/src/app/form/form-view/account-form/account-credentials/account-credentials.component.scss
@@ -7,7 +7,7 @@
 }
 
 p.special {
-  @include lato-regular-14;
+  @include font-regular-14;
   color: $grey-3;
   margin: 4px 0;
   width: 280px;
diff --git a/src/app/form/form-view/form-view.component.scss b/src/app/form/form-view/form-view.component.scss
index a77c40a2b78f5a8700f894b88ed839007ef51d4a..2843c08df3fefb16bf9432454339d24706a1e6c3 100644
--- a/src/app/form/form-view/form-view.component.scss
+++ b/src/app/form/form-view/form-view.component.scss
@@ -50,31 +50,31 @@
 ::ng-deep.title {
   margin-bottom: 16px;
   .overtitle {
-    @include lato-regular-18;
+    @include font-regular-18;
     color: $grey-3;
     margin-bottom: 3px;
   }
 
   h3 {
-    @include lato-bold-24;
+    @include font-bold-24;
     margin: 0;
     @media #{$tablet} {
-      @include lato-bold-22;
+      @include font-bold-22;
     }
   }
 
   h4 {
-    @include lato-bold-18;
+    @include font-bold-18;
     margin-bottom: 0;
   }
   p {
-    @include lato-regular-18;
+    @include font-regular-18;
     color: $grey-3;
     font-style: italic;
     margin-top: 4px;
   }
   .info {
-    @include lato-regular-14;
+    @include font-regular-14;
   }
   .backArrow {
     cursor: pointer;
diff --git a/src/app/form/form-view/global-components/information-step/information-step.component.scss b/src/app/form/form-view/global-components/information-step/information-step.component.scss
index ebb4894a8ee512c3a950b614ee49816817d1afaa..ff75642ac7604ce081b0cd5407e5eb1f5c48c9c7 100644
--- a/src/app/form/form-view/global-components/information-step/information-step.component.scss
+++ b/src/app/form/form-view/global-components/information-step/information-step.component.scss
@@ -12,7 +12,7 @@
     max-width: 200px;
   }
   p {
-    @include lato-bold-24;
+    @include font-bold-24;
     margin-top: 3rem;
     text-align: center;
   }
@@ -35,12 +35,12 @@
     gap: 16px;
 
     p {
-      @include lato-regular-18;
+      @include font-regular-18;
       margin-bottom: 0;
       margin-top: 1em;
     }
     span {
-      @include lato-bold-24;
+      @include font-bold-24;
       text-align: center;
     }
     svg {
@@ -53,12 +53,12 @@
     height: unset;
     max-width: unset;
     h3 {
-      @include lato-bold-24;
+      @include font-bold-24;
       text-align: center;
     }
 
     p {
-      @include lato-bold-18;
+      @include font-bold-18;
       margin: 0;
       width: 100%;
       text-align: left;
@@ -69,7 +69,7 @@
       padding: 0;
     }
     li {
-      @include lato-regular-18;
+      @include font-regular-18;
     }
     ul li::before {
       content: '\2022';
@@ -85,11 +85,11 @@
   }
   &.profile-updated {
     h3 {
-      @include lato-bold-24;
+      @include font-bold-24;
       text-align: center;
     }
     p {
-      @include lato-regular-18;
+      @include font-regular-18;
       text-align: center;
     }
     .centered {
@@ -113,11 +113,11 @@
   max-width: 600px;
   margin: auto;
   h3 {
-    @include lato-bold-24;
+    @include font-bold-24;
     text-align: center;
   }
   p {
-    @include lato-regular-18;
+    @include font-regular-18;
     text-align: center;
   }
   svg {
diff --git a/src/app/form/form-view/global-components/progress-bar/progress-bar.component.scss b/src/app/form/form-view/global-components/progress-bar/progress-bar.component.scss
index bfd1963a46f8a9572af8ae9830ceca032dcba407..543c175c76a1f48da5d392dffde2e91e7c651998 100644
--- a/src/app/form/form-view/global-components/progress-bar/progress-bar.component.scss
+++ b/src/app/form/form-view/global-components/progress-bar/progress-bar.component.scss
@@ -11,7 +11,7 @@
     margin: 0.625rem;
   }
   p {
-    @include lato-bold-14;
+    @include font-bold-14;
     color: $red;
     margin-bottom: 7px;
   }
@@ -44,7 +44,7 @@
     }
   }
   label {
-    @include lato-bold-14;
+    @include font-bold-14;
     color: $primary-color;
     min-width: 26px;
   }
diff --git a/src/app/form/form-view/profile-form/profile-employer-selection/profile-employer-selection.component.scss b/src/app/form/form-view/profile-form/profile-employer-selection/profile-employer-selection.component.scss
index f1f30f6d6678e9de73d76d0fd26d04d2d1031a58..cd3f304b59d3bc708523b2d32a146a0fa4ea5455 100644
--- a/src/app/form/form-view/profile-form/profile-employer-selection/profile-employer-selection.component.scss
+++ b/src/app/form/form-view/profile-form/profile-employer-selection/profile-employer-selection.component.scss
@@ -15,7 +15,7 @@
   .search-input {
     height: 34px;
     border: 0px;
-    @include lato-regular-15;
+    @include font-regular-15;
     font-style: italic;
     padding: 0px;
     margin: 0px 0px 0px 5px;
@@ -32,7 +32,7 @@
 }
 
 .nb-text {
-  @include lato-regular-13;
+  @include font-regular-13;
   color: $grey-3;
 }
 
@@ -71,20 +71,20 @@
 }
 
 .name {
-  @include lato-regular-16;
+  @include font-regular-16;
   font-weight: 600;
   color: $grey-1;
 }
 
 .commune {
-  @include lato-regular-13;
+  @include font-regular-13;
   font-style: italic;
   color: $grey-3;
   margin: 6px 0px;
 }
 
 .create-text {
-  @include lato-regular-15;
+  @include font-regular-15;
   color: $grey-1;
   margin: 8px 0px;
 }
diff --git a/src/app/form/form-view/profile-form/profile-structure-choice/profile-structure-choice.component.scss b/src/app/form/form-view/profile-form/profile-structure-choice/profile-structure-choice.component.scss
index 9c093dbacff37c7cfd96c8db2f361e2cd841735e..009439961b524cb8802cd2fcd67445be7a02ca1a 100644
--- a/src/app/form/form-view/profile-form/profile-structure-choice/profile-structure-choice.component.scss
+++ b/src/app/form/form-view/profile-form/profile-structure-choice/profile-structure-choice.component.scss
@@ -22,7 +22,7 @@ h2 {
   .search-input {
     height: 34px;
     border: 0px;
-    @include lato-regular-15;
+    @include font-regular-15;
     font-style: italic;
     padding: 0px;
     margin: 0px 0px 0px 5px;
@@ -47,7 +47,7 @@ h2 {
 }
 
 .nb-text {
-  @include lato-regular-13;
+  @include font-regular-13;
   color: $grey-3;
 }
 
@@ -87,7 +87,7 @@ h2 {
     border-color: $grey-9;
 
     .sticker {
-      @include lato-regular-10;
+      @include font-regular-10;
       font-weight: 700;
       background: $white;
       margin: 0px 10px;
@@ -106,20 +106,20 @@ h2 {
 }
 
 .name {
-  @include lato-regular-16;
+  @include font-regular-16;
   font-weight: 600;
   color: $grey-1;
 }
 
 .commune {
-  @include lato-regular-13;
+  @include font-regular-13;
   font-style: italic;
   color: $grey-3;
   margin: 4px 0px 0px 0px;
 }
 
 .create-text {
-  @include lato-regular-14;
+  @include font-regular-14;
   color: $grey-1;
   margin: 8px 0px;
   .question {
diff --git a/src/app/form/form-view/structure-form/structure-consent/structure-consent.component.scss b/src/app/form/form-view/structure-form/structure-consent/structure-consent.component.scss
index 17a340228e582437fa9529fe1f30ce194c547796..03a9c1deccce371336656c282b5a5fc2bb73cd91 100644
--- a/src/app/form/form-view/structure-form/structure-consent/structure-consent.component.scss
+++ b/src/app/form/form-view/structure-form/structure-consent/structure-consent.component.scss
@@ -2,12 +2,12 @@
 @import 'color';
 
 h3 {
-  @include lato-bold-18;
+  @include font-bold-18;
   margin-top: 1.5rem;
 }
 .asterisk {
   color: $primary-color;
 }
 .informationEndForm {
-  @include lato-regular-12;
+  @include font-regular-12;
 }
diff --git a/src/app/form/form-view/structure-form/structure-contact/structure-contact.component.scss b/src/app/form/form-view/structure-form/structure-contact/structure-contact.component.scss
index 46ffa6b08f387c06e097763296e52f12b7ff54b5..21d5e1dced258a877111dd055a88f1a44b449326 100644
--- a/src/app/form/form-view/structure-form/structure-contact/structure-contact.component.scss
+++ b/src/app/form/form-view/structure-form/structure-contact/structure-contact.component.scss
@@ -3,7 +3,7 @@
 
 .label-optional {
   color: $grey-3;
-  @include lato-regular-14;
+  @include font-regular-14;
   font-style: italic;
   margin-top: 2px;
 }
diff --git a/src/app/form/form-view/structure-form/structure-equipments/structure-equipments.component.scss b/src/app/form/form-view/structure-form/structure-equipments/structure-equipments.component.scss
index 51b7ca988b478265ff6dff9b6e8b54d0c91b3907..42a3aa9a58a671026bf4cf3f01fc19779dac7c40 100644
--- a/src/app/form/form-view/structure-form/structure-equipments/structure-equipments.component.scss
+++ b/src/app/form/form-view/structure-form/structure-equipments/structure-equipments.component.scss
@@ -18,7 +18,7 @@
     height: 65px;
     padding: 0 15px 0 12px;
     p {
-      @include lato-bold-14;
+      @include font-bold-14;
     }
   }
   .equipments {
diff --git a/src/app/form/form-view/structure-form/structure-web-and-social-network/structure-web-and-social-network.component.scss b/src/app/form/form-view/structure-form/structure-web-and-social-network/structure-web-and-social-network.component.scss
index d577e3b6c5c8836089f30b221378b0a678b25c87..82516447a5439d638e533b322d02f1d3399b62e2 100644
--- a/src/app/form/form-view/structure-form/structure-web-and-social-network/structure-web-and-social-network.component.scss
+++ b/src/app/form/form-view/structure-form/structure-web-and-social-network/structure-web-and-social-network.component.scss
@@ -25,7 +25,7 @@
   .form-group {
     margin: 0;
     color: $grey-2;
-    @include lato-regular-14;
+    @include font-regular-14;
     &.website,
     &.facebook,
     &.twitter,
@@ -123,11 +123,11 @@
   }
   .titleCollapse {
     width: 100%;
-    @include lato-bold-16;
+    @include font-bold-16;
     color: $grey-2;
     p {
       color: $grey-2;
-      @include lato-bold-16;
+      @include font-bold-16;
     }
   }
   .collapseHeader {
diff --git a/src/app/form/orientation-form-view/global-components/multi-radio-form/multi-radio-form.component.scss b/src/app/form/orientation-form-view/global-components/multi-radio-form/multi-radio-form.component.scss
index 4ccbf2dc0acd5d06b0f87309be43733a5762b021..e4a9f3ca156dac3528a298efd5054a2efe7b3a60 100644
--- a/src/app/form/orientation-form-view/global-components/multi-radio-form/multi-radio-form.component.scss
+++ b/src/app/form/orientation-form-view/global-components/multi-radio-form/multi-radio-form.component.scss
@@ -35,10 +35,10 @@
       }
     }
     .title {
-      @include lato-bold-16;
+      @include font-bold-16;
     }
     .hint {
-      @include lato-regular-15;
+      @include font-regular-15;
       font-style: italic;
       color: $grey-3;
     }
diff --git a/src/app/form/orientation-form-view/global-components/orientation-recap/orientation-recap.component.scss b/src/app/form/orientation-form-view/global-components/orientation-recap/orientation-recap.component.scss
index 057a98037b712e8bb7bef65bbfa6231a2f642a62..0263a428ea401654981ba3573a231c919ff45c57 100644
--- a/src/app/form/orientation-form-view/global-components/orientation-recap/orientation-recap.component.scss
+++ b/src/app/form/orientation-form-view/global-components/orientation-recap/orientation-recap.component.scss
@@ -50,12 +50,12 @@
     gap: 2em;
   }
   .title {
-    @include lato-bold-18;
+    @include font-bold-18;
     padding-bottom: 1em;
     border-bottom: 1px solid $grey-8;
   }
   h3 {
-    @include lato-bold-14;
+    @include font-bold-14;
     color: $grey-3;
     margin-bottom: 1.5rem;
     margin-top: 0.5rem;
@@ -69,17 +69,17 @@
     .content {
       color: $black;
       .label {
-        @include lato-regular-14;
+        @include font-regular-14;
         margin-bottom: 1rem;
         flex: 1 1 100%;
         max-width: 20%;
       }
       .info {
-        @include lato-bold-14;
+        @include font-bold-14;
         margin-bottom: 1rem;
         max-width: 80%;
         &.structureName {
-          @include lato-bold-18;
+          @include font-bold-18;
         }
       }
     }
@@ -111,10 +111,10 @@
   gap: 0.5rem;
 
   .digitalAssistance {
-    @include lato-bold-18;
+    @include font-bold-18;
   }
   .number {
-    @include lato-bold-24;
+    @include font-bold-24;
     color: $red;
   }
 }
diff --git a/src/app/form/orientation-form-view/global-components/print-header/print-header.component.scss b/src/app/form/orientation-form-view/global-components/print-header/print-header.component.scss
index 3c058a3575762d5b2a6edf7688fef0c75807b087..b28968a26997567473fd0affc1609047aed70e01 100644
--- a/src/app/form/orientation-form-view/global-components/print-header/print-header.component.scss
+++ b/src/app/form/orientation-form-view/global-components/print-header/print-header.component.scss
@@ -6,7 +6,7 @@
   align-items: center;
   margin-bottom: 2rem;
   h3 {
-    @include lato-bold-16;
+    @include font-bold-16;
     margin-top: 0.25rem;
     margin-bottom: 0;
   }
@@ -16,7 +16,7 @@
   }
 }
 .date {
-  @include lato-regular-13;
+  @include font-regular-13;
   text-align: right;
   text-transform: capitalize;
   font-style: italic;
diff --git a/src/app/form/orientation-form-view/global-components/structure-orientator/structure-orientator.component.scss b/src/app/form/orientation-form-view/global-components/structure-orientator/structure-orientator.component.scss
index fa734433e2d408026c5a3d7404145a22d04e3b33..aba69feebe1e2fecf9c138f4a2756578a1c5ade7 100644
--- a/src/app/form/orientation-form-view/global-components/structure-orientator/structure-orientator.component.scss
+++ b/src/app/form/orientation-form-view/global-components/structure-orientator/structure-orientator.component.scss
@@ -8,7 +8,7 @@
   .number {
     padding: 1rem;
     color: $grey-3;
-    @include lato-regular-13;
+    @include font-regular-13;
   }
   &.border {
     border: solid 2px $grey-9;
@@ -35,13 +35,13 @@
 }
 
 .name {
-  @include lato-regular-16;
+  @include font-regular-16;
   font-weight: 600;
   color: $grey-1;
 }
 
 .commune {
-  @include lato-regular-13;
+  @include font-regular-13;
   font-style: italic;
   color: $grey-3;
   margin: 4px 0px 0px 0px;
diff --git a/src/app/form/orientation-form-view/online-demarch/appointment/make-appointment/make-appointment.component.scss b/src/app/form/orientation-form-view/online-demarch/appointment/make-appointment/make-appointment.component.scss
index 82798e003e0aadec8c518d03aeda3084218ec7a2..536e1294182a3a3cc9a73cc83315a81a7840ceef 100644
--- a/src/app/form/orientation-form-view/online-demarch/appointment/make-appointment/make-appointment.component.scss
+++ b/src/app/form/orientation-form-view/online-demarch/appointment/make-appointment/make-appointment.component.scss
@@ -14,14 +14,14 @@
   }
   .headerType {
     color: $grey-3;
-    @include lato-regular-16;
+    @include font-regular-16;
     font-style: italic;
   }
   .headerNameContainer {
     align-items: center;
   }
   .headerName {
-    @include lato-bold-18;
+    @include font-bold-18;
     color: $grey-1;
     width: 100%;
   }
@@ -46,19 +46,19 @@
   }
   .selectListJob {
     color: $grey-3;
-    @include lato-regular-16;
+    @include font-regular-16;
     font-style: italic;
   }
   .selectListNameContainer {
     align-items: center;
   }
   .selectListName {
-    @include lato-bold-18;
+    @include font-bold-18;
     color: $grey-1;
     width: 100%;
   }
   h4 {
-    @include lato-bold-18;
+    @include font-bold-18;
   }
   ::ng-deep svg {
     padding: 0 24px 0 8px;
diff --git a/src/app/form/orientation-form-view/online-demarch/online-mediation/mediation-hours-selection/mediation-hours-selection.component.scss b/src/app/form/orientation-form-view/online-demarch/online-mediation/mediation-hours-selection/mediation-hours-selection.component.scss
index f2c6436cb40b6dcc1c8152572e19f677b14149ed..759b292ee8e32698cdf6bf2b42c45665ee46af83 100644
--- a/src/app/form/orientation-form-view/online-demarch/online-mediation/mediation-hours-selection/mediation-hours-selection.component.scss
+++ b/src/app/form/orientation-form-view/online-demarch/online-mediation/mediation-hours-selection/mediation-hours-selection.component.scss
@@ -4,7 +4,7 @@
 
 .subtitle {
   color: $grey-3;
-  @include lato-bold-14;
+  @include font-bold-14;
 }
 .container {
   display: flex;
@@ -26,7 +26,7 @@
       }
     }
     .day {
-      @include lato-regular-13;
+      @include font-regular-13;
       color: $grey-3;
       text-align: center;
       margin-bottom: 0.5rem;
@@ -39,7 +39,7 @@
       border: 1px solid $grey-1;
       border-radius: 4px;
       color: $grey-1;
-      @include lato-regular-14;
+      @include font-regular-14;
       margin: auto;
       background: $white;
       display: flex;
diff --git a/src/app/form/orientation-form-view/orientation-form-view.component.scss b/src/app/form/orientation-form-view/orientation-form-view.component.scss
index 34e37f4530887a3b5b1f9634ea7c5585cf985972..01d9790c793c3555c88edc8d9d8c88c7c2c3599f 100644
--- a/src/app/form/orientation-form-view/orientation-form-view.component.scss
+++ b/src/app/form/orientation-form-view/orientation-form-view.component.scss
@@ -43,25 +43,25 @@
 
 ::ng-deep.title {
   .overtitle {
-    @include lato-regular-18;
+    @include font-regular-18;
     color: $grey-3;
     margin-bottom: 3px;
   }
 
   h3 {
-    @include lato-bold-24;
+    @include font-bold-24;
     margin: 0;
     @media #{$tablet} {
-      @include lato-bold-22;
+      @include font-bold-22;
     }
   }
 
   h4 {
-    @include lato-bold-18;
+    @include font-bold-18;
     margin-bottom: 2rem;
   }
   p {
-    @include lato-regular-18;
+    @include font-regular-18;
     color: $grey-3;
     font-style: italic;
     margin-top: 4px;
diff --git a/src/app/form/orientation-form-view/orientation-structure-list/orientation-comments/orientation-comments.component.scss b/src/app/form/orientation-form-view/orientation-structure-list/orientation-comments/orientation-comments.component.scss
index 708c472d7f4c2fe89608df2c55600b214be8b18d..5b0572697991772a96319e6d62eccec2623981cd 100644
--- a/src/app/form/orientation-form-view/orientation-structure-list/orientation-comments/orientation-comments.component.scss
+++ b/src/app/form/orientation-form-view/orientation-structure-list/orientation-comments/orientation-comments.component.scss
@@ -11,7 +11,7 @@ p {
 .count {
   text-align: right;
   color: $grey-3;
-  @include lato-regular-13;
+  @include font-regular-13;
   font-style: italic;
   margin-top: 0.5rem;
 }
diff --git a/src/app/header/header.component.scss b/src/app/header/header.component.scss
index 8debdc9ecb85d54dc2bf0ffb4dd585f2be6c1d69..1bcf6124f505bde9d45faa84ae31cddb77596a9a 100644
--- a/src/app/header/header.component.scss
+++ b/src/app/header/header.component.scss
@@ -38,7 +38,7 @@ header {
 }
 
 .logo {
-  @include lato-regular-14;
+  @include font-regular-14;
   text-align: initial;
   margin-right: 70px;
   p {
@@ -86,7 +86,7 @@ a {
       opacity: 1;
     }
   }
-  @include lato-regular-14;
+  @include font-regular-14;
 }
 
 @media print {
@@ -124,7 +124,7 @@ a {
       margin-bottom: 35px;
       display: flex;
       justify-content: space-between;
-      @include lato-regular-26;
+      @include font-regular-26;
       span {
         color: $grey-2;
       }
@@ -194,7 +194,7 @@ a {
         border-radius: 4px;
       }
       .name {
-        @include lato-bold-16;
+        @include font-bold-16;
         margin-left: 10px;
         text-transform: capitalize;
         display: -webkit-box;
@@ -219,7 +219,7 @@ a {
 
 .mobile-show {
   display: none;
-  @include lato-bold-16;
+  @include font-bold-16;
   @media #{$tablet} {
     display: block;
   }
diff --git a/src/app/login/login.component.scss b/src/app/login/login.component.scss
index cd4b6468c98add9864bfd0dd68fddc146a85007e..e284463920e87e276f45271f6e7a55926c376608 100644
--- a/src/app/login/login.component.scss
+++ b/src/app/login/login.component.scss
@@ -36,10 +36,10 @@
     text-align: center;
     h3 {
       margin: 0;
-      @include lato-bold-24;
+      @include font-bold-24;
     }
     p {
-      @include lato-regular-14;
+      @include font-regular-14;
       margin: 0.5rem;
     }
   }
@@ -47,13 +47,13 @@
     border-color: $orange-warning;
   }
   .incorrectId {
-    @include lato-regular-14;
+    @include font-regular-14;
     color: $orange-warning;
   }
   .resendEmail {
     margin: 0;
     a {
-      @include lato-bold-14;
+      @include font-bold-14;
       text-decoration: underline;
     }
   }
@@ -67,7 +67,7 @@
     }
     label {
       margin-bottom: 4px;
-      @include lato-regular-16;
+      @include font-regular-16;
       color: $grey-1;
     }
     input {
@@ -79,7 +79,7 @@
         max-width: 264px;
       }
       p {
-        @include lato-regular-14;
+        @include font-regular-14;
         color: $grey-3;
         margin-top: 0;
         margin-bottom: 4px;
diff --git a/src/app/map/components/map.component.scss b/src/app/map/components/map.component.scss
index 1208aabedcb55c075cb2603052900a5badf01bae..a16f3745f1485db85817b3a868b622a8d55ce8f3 100644
--- a/src/app/map/components/map.component.scss
+++ b/src/app/map/components/map.component.scss
@@ -65,13 +65,13 @@
   bottom: -15px !important;
   h1 {
     color: $grey-1;
-    @include lato-bold-20;
+    @include font-bold-20;
     font-size: 18px;
     margin: 0;
   }
   p {
     color: $grey-3;
-    @include lato-regular-16;
+    @include font-regular-16;
     font-size: 16px;
     margin: 0 0 13px 0;
     font-style: italic;
@@ -86,7 +86,7 @@
 
     button {
       @include btn-search-filter;
-      @include lato-bold-14;
+      @include font-bold-14;
       font-size: 16px;
     }
   }
diff --git a/src/app/post/components/post-card/post-card.component.scss b/src/app/post/components/post-card/post-card.component.scss
index 1631b25ac99db6416b86dff5f7f4a5a49671237b..3536da34cf5a32ec9e5d7930f42a6aaa77a92306 100644
--- a/src/app/post/components/post-card/post-card.component.scss
+++ b/src/app/post/components/post-card/post-card.component.scss
@@ -18,16 +18,16 @@
 
   .title {
     @media #{$large-phone} {
-      @include lato-bold-18;
+      @include font-bold-18;
     }
-    @include lato-bold-22;
+    @include font-bold-22;
     color: $grey-1;
   }
   .description {
     @media #{$large-phone} {
       display: none !important;
     }
-    @include lato-regular-16;
+    @include font-regular-16;
     color: $black;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -36,7 +36,7 @@
     -webkit-box-orient: vertical;
   }
   .informations {
-    @include lato-regular-16;
+    @include font-regular-16;
     div:nth-child(2n) {
       color: $grey-3;
     }
diff --git a/src/app/post/components/post-details/post-details.component.scss b/src/app/post/components/post-details/post-details.component.scss
index 1448fefc72c7e067cfc56e492577d5ed7cbb9aab..de48f4b3feb2cca06a3be359c341ae4f28f9135a 100644
--- a/src/app/post/components/post-details/post-details.component.scss
+++ b/src/app/post/components/post-details/post-details.component.scss
@@ -15,7 +15,7 @@
 }
 
 .informations {
-  @include lato-regular-16;
+  @include font-regular-16;
   div:nth-child(2n) {
     color: $grey-3;
   }
diff --git a/src/app/post/components/post-header/post-header.component.scss b/src/app/post/components/post-header/post-header.component.scss
index 0dd7365bedbe1f6ca500bf39db1e8d6b7fc866eb..b116997ea7bb79d63b3b36dcd23850c1fdabea29 100644
--- a/src/app/post/components/post-header/post-header.component.scss
+++ b/src/app/post/components/post-header/post-header.component.scss
@@ -9,7 +9,7 @@ h1 {
     margin: 0;
   }
   @media #{$large-phone} {
-    @include lato-bold-28;
+    @include font-bold-28;
     .onlyOnDesktop {
       display: none;
     }
@@ -23,11 +23,11 @@ h1 {
     width: 100%;
   }
   .subtitle {
-    @include lato-regular-24;
+    @include font-regular-24;
     color: $grey-3;
 
     @media #{$large-phone} {
-      @include lato-regular-18;
+      @include font-regular-18;
     }
   }
 }
@@ -102,12 +102,12 @@ h1 {
 
 .tag-button {
   padding: 8px 10px;
-  @include lato-regular-16;
+  @include font-regular-16;
   color: $grey-3;
   cursor: pointer;
   white-space: nowrap;
   &.active {
-    @include lato-bold-16;
+    @include font-bold-16;
     color: $grey-2;
     text-decoration: underline $button-secondary;
     text-underline-offset: 3px;
diff --git a/src/app/post/components/post-list/post-list.component.scss b/src/app/post/components/post-list/post-list.component.scss
index cb5854d4e01c0852e0aabd0d2b13144967d3ac85..d13e23169ef9bdfeab5fb4a9ac60fa50209787cb 100644
--- a/src/app/post/components/post-list/post-list.component.scss
+++ b/src/app/post/components/post-list/post-list.component.scss
@@ -18,9 +18,9 @@ h2 {
 
   h2 {
     @media #{$large-phone} {
-      @include lato-bold-22;
+      @include font-bold-22;
     }
-    @include lato-bold-28;
+    @include font-bold-28;
     color: $grey-2;
     margin: 0;
   }
@@ -36,7 +36,7 @@ h2 {
     ::ng-deep .post {
       flex-direction: row !important;
       .title {
-        @include lato-regular-32;
+        @include font-regular-32;
       }
     }
     ::ng-deep .post .imageContainer {
@@ -59,7 +59,7 @@ h2 {
     ::ng-deep .post {
       flex-direction: column !important;
       .title {
-        @include lato-regular-32;
+        @include font-regular-32;
       }
     }
     ::ng-deep .post .imageContainer {
diff --git a/src/app/post/components/post-modal-filters/post-modal-filters.component.scss b/src/app/post/components/post-modal-filters/post-modal-filters.component.scss
index 533de1d52371d5480f55a550a0a19729681de301..cdfd4dab7834fb5a934e9a20599d87a46d92a112 100644
--- a/src/app/post/components/post-modal-filters/post-modal-filters.component.scss
+++ b/src/app/post/components/post-modal-filters/post-modal-filters.component.scss
@@ -43,7 +43,7 @@
     .titleFilter {
       display: none !important;
       margin: 27px 25px 0px 25px;
-      @include lato-bold-26;
+      @include font-bold-26;
       @media #{$large-phone} {
         display: flex !important;
       }
@@ -93,7 +93,7 @@
       padding: 5px 0;
     }
     h4 {
-      @include lato-bold-16;
+      @include font-bold-16;
       line-height: 17px;
       text-transform: uppercase;
       color: $grey-3;
@@ -103,13 +103,13 @@
       margin-bottom: 9px;
     }
     .nbResult {
-      @include lato-regular-14;
+      @include font-regular-14;
       line-height: 16px;
       color: $grey-3;
       padding-top: 3px;
     }
     label {
-      @include lato-regular-14;
+      @include font-regular-14;
     }
   }
   .footer {
diff --git a/src/app/post/components/post-publish/post-publish.component.scss b/src/app/post/components/post-publish/post-publish.component.scss
index 20440cd61d9e693c3ad1c8348fb36e865c161381..aca461ef251d53bf6fb7ca914f8a01564f62152e 100644
--- a/src/app/post/components/post-publish/post-publish.component.scss
+++ b/src/app/post/components/post-publish/post-publish.component.scss
@@ -21,7 +21,7 @@ $margin-post: 20px;
 .content {
   color: $grey-1;
   h2 {
-    @include lato-bold-30;
+    @include font-bold-30;
     margin: 0;
   }
   .image {
@@ -33,7 +33,7 @@ $margin-post: 20px;
     }
   }
   .informations {
-    @include lato-regular-18;
+    @include font-regular-18;
     ul {
       margin: 0;
       padding: 0;
@@ -48,7 +48,7 @@ $margin-post: 20px;
     text-decoration: none;
     width: auto;
     padding: 10.5px 24px;
-    @include lato-regular-16;
+    @include font-regular-16;
     font-size: 16px;
   }
 }
diff --git a/src/app/post/components/post-tag/post-tag.component.scss b/src/app/post/components/post-tag/post-tag.component.scss
index 896797531f9be5c2d08e57c2691459d979579147..576bf34461d4d0bc41a5bb1a732d65ebe204fa73 100644
--- a/src/app/post/components/post-tag/post-tag.component.scss
+++ b/src/app/post/components/post-tag/post-tag.component.scss
@@ -2,7 +2,7 @@
 @import 'color';
 
 .tag {
-  @include lato-bold-16;
+  @include font-bold-16;
   text-transform: uppercase;
   color: $primary-color;
   fill: $primary-color;
diff --git a/src/app/profile/edit/edit.component.scss b/src/app/profile/edit/edit.component.scss
index 974e5936ace69d93fa5d626fad5214ed331da15f..f0a00bca4864ff9062c65c5885ca33ca54fc572c 100644
--- a/src/app/profile/edit/edit.component.scss
+++ b/src/app/profile/edit/edit.component.scss
@@ -38,10 +38,10 @@
     .title {
       align-items: center;
       h1 {
-        @include lato-regular-24;
+        @include font-regular-24;
         margin: 0;
         @media #{$tablet} {
-          @include lato-regular-20;
+          @include font-regular-20;
         }
       }
 
@@ -63,7 +63,7 @@
         }
         span {
           color: $red;
-          @include lato-regular-14;
+          @include font-regular-14;
         }
       }
     }
@@ -99,7 +99,7 @@
     flex: 1;
     max-width: 600px;
     p.subTitle {
-      @include lato-regular-16;
+      @include font-regular-16;
       text-align: left;
       margin-top: 0;
       margin-bottom: 4px;
@@ -133,7 +133,7 @@
     .descriptionTab {
       p.descriptionLength {
         text-align: right;
-        @include lato-regular-14;
+        @include font-regular-14;
         color: $grey-3;
         font-style: italic;
         margin-top: 8px;
@@ -182,7 +182,7 @@
       border: 1px solid $grey-6;
       padding: 0 8px;
       h3 {
-        @include lato-bold-18;
+        @include font-bold-18;
       }
       svg,
       .empty {
@@ -205,7 +205,7 @@
       text-align: center;
       margin: 10px 0;
       &.passwordInfo {
-        @include lato-regular-14;
+        @include font-regular-14;
         text-align: left;
         &.warn {
           color: $orange-warning;
diff --git a/src/app/profile/personal-offer-edition/personal-offer-edition.component.scss b/src/app/profile/personal-offer-edition/personal-offer-edition.component.scss
index e8a3a24c2d1a14bf7a6ed01dd0b9aed007624dc1..1c87048d446d05f1bddb699d1c3322d869248c6a 100644
--- a/src/app/profile/personal-offer-edition/personal-offer-edition.component.scss
+++ b/src/app/profile/personal-offer-edition/personal-offer-edition.component.scss
@@ -38,10 +38,10 @@
     .title {
       align-items: center;
       h1 {
-        @include lato-regular-24;
+        @include font-regular-24;
         margin: 0;
         @media #{$tablet} {
-          @include lato-regular-20;
+          @include font-regular-20;
         }
         padding-bottom: 1.25em;
       }
@@ -67,7 +67,7 @@
         }
         span {
           color: $red;
-          @include lato-regular-14;
+          @include font-regular-14;
         }
       }
     }
@@ -142,7 +142,7 @@
         margin: 1em 0;
       }
       h3 {
-        @include lato-bold-18;
+        @include font-bold-18;
         margin: 0;
       }
       a {
@@ -176,7 +176,7 @@
 }
 
 .overtitle {
-  @include lato-regular-18;
+  @include font-regular-18;
   color: $grey-3;
   margin: 0 0 3px;
 }
diff --git a/src/app/profile/profile-structure/personal-offer/personal-offer.component.scss b/src/app/profile/profile-structure/personal-offer/personal-offer.component.scss
index 5635508908fb617ca91753fd732d08344334f78a..5d9504a9f8297733b4cd06fb1dd5b0183da3c56d 100644
--- a/src/app/profile/profile-structure/personal-offer/personal-offer.component.scss
+++ b/src/app/profile/profile-structure/personal-offer/personal-offer.component.scss
@@ -14,7 +14,7 @@
     justify-content: space-between;
     p {
       text-transform: uppercase;
-      @include lato-bold-14;
+      @include font-bold-14;
       color: $grey-3;
     }
   }
@@ -45,7 +45,7 @@
           list-style-position: inside;
           li {
             line-height: 2rem;
-            @include lato-regular-15;
+            @include font-regular-15;
           }
         }
       }
diff --git a/src/app/profile/profile-structure/profile-structure-member/profile-structure-member.component.scss b/src/app/profile/profile-structure/profile-structure-member/profile-structure-member.component.scss
index 9339f7e35ce4575be7c238244cdc0469e742f531..a2895c04b7efd32534bbde14b67bc88619984835 100644
--- a/src/app/profile/profile-structure/profile-structure-member/profile-structure-member.component.scss
+++ b/src/app/profile/profile-structure/profile-structure-member/profile-structure-member.component.scss
@@ -4,7 +4,7 @@
 @import 'shapes';
 
 .structureMember {
-  @include lato-regular-14;
+  @include font-regular-14;
   display: flex;
   align-items: center;
   gap: 8px;
@@ -21,7 +21,7 @@
   }
   a {
     &.name {
-      @include lato-bold-14;
+      @include font-bold-14;
       color: $black;
     }
     &.email {
diff --git a/src/app/profile/profile-structure/profile-structure.component.scss b/src/app/profile/profile-structure/profile-structure.component.scss
index e4f158f919742012b78326f95d6012a2cb06f991..6af907fe0badb9d9f02b46008479517636c98408 100644
--- a/src/app/profile/profile-structure/profile-structure.component.scss
+++ b/src/app/profile/profile-structure/profile-structure.component.scss
@@ -49,15 +49,15 @@
     p {
       margin: 0 !important;
       &.structureName {
-        @include lato-bold-16;
+        @include font-bold-16;
       }
       &.structureType {
-        @include lato-regular-14;
+        @include font-regular-14;
         font-style: italic;
         color: $grey-3;
       }
       &.invalidText {
-        @include lato-regular-13;
+        @include font-regular-13;
         margin: 0 0.5rem;
         color: $orange-warning;
       }
@@ -86,13 +86,13 @@
 
         .sectionTitle {
           text-transform: uppercase;
-          @include lato-bold-14;
+          @include font-bold-14;
           color: $grey-3;
         }
 
         p {
           text-transform: uppercase;
-          @include lato-bold-14;
+          @include font-bold-14;
           color: $grey-3;
         }
         .sectionButtons {
@@ -103,7 +103,7 @@
 
       .sectionContent {
         &.infoSection {
-          @include lato-regular-14;
+          @include font-regular-14;
           display: flex;
           flex-direction: column;
           gap: 4px;
diff --git a/src/app/profile/profile.component.scss b/src/app/profile/profile.component.scss
index 044926716f2c43d92aeb4faa836268cc13c0e50f..67dd14c871139a24aeb63b7f47cb117498805a75 100644
--- a/src/app/profile/profile.component.scss
+++ b/src/app/profile/profile.component.scss
@@ -41,7 +41,7 @@ section {
   }
   h1 {
     margin: 0;
-    @include lato-regular-24;
+    @include font-regular-24;
     color: $grey-1;
     flex-grow: 1;
   }
@@ -56,7 +56,7 @@ section {
 }
 
 .profile {
-  @include lato-regular-15;
+  @include font-regular-15;
   .avatar {
     height: 112px;
     width: 112px;
@@ -69,7 +69,7 @@ section {
   }
   .information {
     .name {
-      @include lato-bold-18;
+      @include font-bold-18;
       min-height: 24px;
     }
     .job {
@@ -81,7 +81,7 @@ section {
     }
     .email {
       display: block;
-      @include lato-regular-14;
+      @include font-regular-14;
       height: 24px;
       text-decoration: underline;
       color: $grey-1;
diff --git a/src/app/profile/structure-add-member-modal/structure-add-member-modal.component.scss b/src/app/profile/structure-add-member-modal/structure-add-member-modal.component.scss
index cc809729b52d7570a9214e4d65954931ad1ae64f..77bd3939a84fe80f84bf7c8a1ef5c42bea8d922c 100644
--- a/src/app/profile/structure-add-member-modal/structure-add-member-modal.component.scss
+++ b/src/app/profile/structure-add-member-modal/structure-add-member-modal.component.scss
@@ -14,7 +14,7 @@
       border: 1px solid $grey-6;
       padding: 0 8px;
       h3 {
-        @include lato-bold-18;
+        @include font-bold-18;
       }
     }
 
@@ -28,7 +28,7 @@
 
       &.special {
         margin: 8px 0;
-        @include lato-regular-14;
+        @include font-regular-14;
         color: $grey-3;
         &.invalid {
           color: $orange-warning;
diff --git a/src/app/profile/structure-edition-summary/structure-edition-summary.component.scss b/src/app/profile/structure-edition-summary/structure-edition-summary.component.scss
index 876bde1475454d566e8dffc6487daa554e5b0180..7610435bad6436855302cf622ef043eac4dd0e08 100644
--- a/src/app/profile/structure-edition-summary/structure-edition-summary.component.scss
+++ b/src/app/profile/structure-edition-summary/structure-edition-summary.component.scss
@@ -44,7 +44,7 @@
       align-items: center;
 
       h1 {
-        @include lato-regular-24;
+        @include font-regular-24;
         margin: 0;
         span {
           color: $red;
@@ -57,7 +57,7 @@
         display: flex;
         justify-content: space-between;
         align-items: center;
-        @include lato-bold-16;
+        @include font-bold-16;
         p {
           margin: 0;
         }
@@ -119,7 +119,7 @@
             }
             .titleCollapse {
               width: 100%;
-              @include lato-regular-16;
+              @include font-regular-16;
             }
             .collapseHeader {
               display: flex;
diff --git a/src/app/profile/structure-members-management/structure-members-management.component.scss b/src/app/profile/structure-members-management/structure-members-management.component.scss
index 1bf080e90c1cda3e5bd09756eeaf6cb05d6c6ca1..dd6f1cd70a12d85eadd13e9be26ba0e0a93c5c43 100644
--- a/src/app/profile/structure-members-management/structure-members-management.component.scss
+++ b/src/app/profile/structure-members-management/structure-members-management.component.scss
@@ -24,7 +24,7 @@
       display: flex;
       align-items: center;
       h1 {
-        @include lato-regular-24;
+        @include font-regular-24;
         color: $grey-1;
         cursor: initial;
         span {
@@ -59,10 +59,10 @@
           gap: 4px;
           p {
             margin: 0;
-            @include lato-regular-14;
+            @include font-regular-14;
           }
           .member {
-            @include lato-bold-14;
+            @include font-bold-14;
             color: $black;
           }
         }
@@ -79,7 +79,7 @@
           color: $grey-3;
         }
         .text {
-          @include lato-regular-13;
+          @include font-regular-13;
           color: $grey-3;
           margin-left: 3px;
         }
diff --git a/src/app/profile/structures-management/structures-management.component.scss b/src/app/profile/structures-management/structures-management.component.scss
index 182ba1a8135997845121502f5604982aafe5fb8c..6bb288bccbad58539138529865332dbcf7215b25 100644
--- a/src/app/profile/structures-management/structures-management.component.scss
+++ b/src/app/profile/structures-management/structures-management.component.scss
@@ -19,7 +19,7 @@
     }
   }
   h1 {
-    @include lato-regular-24;
+    @include font-regular-24;
     color: $grey-1;
     cursor: initial;
   }
@@ -53,10 +53,10 @@
         p {
           margin: 0 !important;
           &.structureName {
-            @include lato-bold-16;
+            @include font-bold-16;
           }
           &.structureLocation {
-            @include lato-regular-13;
+            @include font-regular-13;
             font-style: italic;
             color: $grey-3;
           }
@@ -64,7 +64,7 @@
       }
 
       .deleteInProgress {
-        @include lato-regular-13;
+        @include font-regular-13;
         display: flex;
         gap: 8px;
         color: $orange-warning;
diff --git a/src/app/reset-password/reset-password.component.scss b/src/app/reset-password/reset-password.component.scss
index f0b8829e44899ecd796dde63864ac40e0341d672..246725c5dd2dad13036cedb6e10bf7d1a7eb749a 100644
--- a/src/app/reset-password/reset-password.component.scss
+++ b/src/app/reset-password/reset-password.component.scss
@@ -32,10 +32,10 @@
     margin: 0.5rem 0;
   }
   h1 {
-    @include lato-bold-24;
+    @include font-bold-24;
   }
   p {
-    @include lato-regular-14;
+    @include font-regular-14;
   }
 }
 .form-group {
@@ -55,7 +55,7 @@
     border-color: $orange-warning;
   }
   .incorrectId {
-    @include lato-regular-14;
+    @include font-regular-14;
     color: $orange-warning;
   }
 }
diff --git a/src/app/shared/components/appointment-choice/appointment-choice.component.scss b/src/app/shared/components/appointment-choice/appointment-choice.component.scss
index 7d4777cd2f9618e79590eecd12191994e98d1e1a..102b6f391860bba51a98902bf85929db5ceed2c3 100644
--- a/src/app/shared/components/appointment-choice/appointment-choice.component.scss
+++ b/src/app/shared/components/appointment-choice/appointment-choice.component.scss
@@ -2,7 +2,7 @@
 @import 'color';
 
 .subtitle {
-  @include lato-regular-18;
+  @include font-regular-18;
   font-weight: 500;
 }
 .details {
diff --git a/src/app/shared/components/button/button.component.scss b/src/app/shared/components/button/button.component.scss
index b08e706662b242b7e3763d9e6ebd0ce9752b631d..e5379787e012f1b8cec865c45ac7ce1f04419315 100644
--- a/src/app/shared/components/button/button.component.scss
+++ b/src/app/shared/components/button/button.component.scss
@@ -4,7 +4,7 @@
 @import 'shapes';
 
 @mixin btn-bold {
-  @include lato-bold-13;
+  @include font-bold-13;
   line-height: 18px;
 }
 @mixin btn-bold-underline {
@@ -12,7 +12,7 @@
   text-decoration: underline;
 }
 @mixin btn-regular {
-  @include lato-regular-13;
+  @include font-regular-13;
   line-height: 19px;
 }
 button {
@@ -276,7 +276,7 @@ button {
 .btn-tags-cloud {
   appearance: none;
 
-  @include lato-regular-12;
+  @include font-regular-12;
   justify-content: center;
   align-items: center;
   box-sizing: border-box;
diff --git a/src/app/shared/components/checkbox-form/checkbox-form.component.scss b/src/app/shared/components/checkbox-form/checkbox-form.component.scss
index a41646fedbe1c97bde2f29fdb8ceb47b7b6b5222..2f83d832b3097884c952942d0ad51abb3d246912 100644
--- a/src/app/shared/components/checkbox-form/checkbox-form.component.scss
+++ b/src/app/shared/components/checkbox-form/checkbox-form.component.scss
@@ -29,7 +29,7 @@ button {
   }
 
   p {
-    @include lato-bold-16;
+    @include font-bold-16;
     text-align: left;
     color: $grey-2;
   }
diff --git a/src/app/shared/components/custom-modal/custom-modal.component.scss b/src/app/shared/components/custom-modal/custom-modal.component.scss
index e9ce0e2841f83db8dfb66b200990d5174e95b9f7..16c8f317c97191cf424e8c24b7d81c49a11195ed 100644
--- a/src/app/shared/components/custom-modal/custom-modal.component.scss
+++ b/src/app/shared/components/custom-modal/custom-modal.component.scss
@@ -20,7 +20,7 @@
           flex-direction: column;
           max-width: 300px;
           h3 {
-            @include lato-bold-18;
+            @include font-bold-18;
             color: $red;
             margin: 10px 0 25px;
             text-align: center;
@@ -29,11 +29,11 @@
             text-align: center;
             margin: 10px;
             &.light {
-              @include lato-regular-13;
+              @include font-regular-13;
             }
           }
           p.mainText {
-            @include lato-regular-18;
+            @include font-regular-18;
           }
         }
       }
diff --git a/src/app/shared/components/data-share-consent/data-share-consent.component.scss b/src/app/shared/components/data-share-consent/data-share-consent.component.scss
index 7d22cf2aac9caa050d1688471ccb30bd9fcd9b04..e60753d79570cd82ffceb3b0db936072bcc7c870 100644
--- a/src/app/shared/components/data-share-consent/data-share-consent.component.scss
+++ b/src/app/shared/components/data-share-consent/data-share-consent.component.scss
@@ -20,7 +20,7 @@
   }
 }
 h3 {
-  @include lato-bold-26;
+  @include font-bold-26;
   color: $black;
   margin-top: 0;
 }
diff --git a/src/app/shared/components/hour-picker/hour-picker.component.scss b/src/app/shared/components/hour-picker/hour-picker.component.scss
index 0022fc3d1bfbb13b0cf6e4e7a7ea3f30b2ac4515..1abd6451f44e39ecadd62022127d24b2a132635e 100644
--- a/src/app/shared/components/hour-picker/hour-picker.component.scss
+++ b/src/app/shared/components/hour-picker/hour-picker.component.scss
@@ -56,7 +56,7 @@
   border: 1px solid $grey-5;
   box-sizing: border-box;
   border-radius: 22px;
-  @include lato-regular-14;
+  @include font-regular-14;
   color: $grey-2;
   display: flex;
   justify-content: center;
@@ -74,7 +74,7 @@ input {
   border-radius: 4px;
   height: 36px;
   margin-top: 0;
-  @include lato-regular-14;
+  @include font-regular-14;
   min-width: 56px;
   text-align: center;
   outline: none;
diff --git a/src/app/shared/components/logo-card/logo-card.component.scss b/src/app/shared/components/logo-card/logo-card.component.scss
index e2e77bc984f1ffb59f830a88414f18ba4676e3dc..06aab551ca706e035177d9544e0bdeb4d7b86a2a 100644
--- a/src/app/shared/components/logo-card/logo-card.component.scss
+++ b/src/app/shared/components/logo-card/logo-card.component.scss
@@ -7,7 +7,7 @@ img {
 }
 
 p {
-  @include lato-regular-16;
+  @include font-regular-16;
   margin: 0;
 }
 
diff --git a/src/app/shared/components/modal-confirmation/modal-confirmation.component.scss b/src/app/shared/components/modal-confirmation/modal-confirmation.component.scss
index 699a5fe9a58ede916654d25b7e68e24c1de7868f..f4f1e3cc548e0cc64a09a96042a4355b11ead873 100644
--- a/src/app/shared/components/modal-confirmation/modal-confirmation.component.scss
+++ b/src/app/shared/components/modal-confirmation/modal-confirmation.component.scss
@@ -13,7 +13,7 @@
         width: 390px;
         padding: 0 8px;
         h3 {
-          @include lato-bold-18;
+          @include font-bold-18;
           color: $red;
           margin: 10px 0;
         }
diff --git a/src/app/shared/components/modal-join-confirmation/modal-join-confirmation.component.scss b/src/app/shared/components/modal-join-confirmation/modal-join-confirmation.component.scss
index 0c95626bc9172fcec464924f44ee99498e4242f5..afac06e1356893c01c6d7c92174be3fc0367ae38 100644
--- a/src/app/shared/components/modal-join-confirmation/modal-join-confirmation.component.scss
+++ b/src/app/shared/components/modal-join-confirmation/modal-join-confirmation.component.scss
@@ -10,7 +10,7 @@
       margin-top: 0.5rem;
       width: 100%;
       h1 {
-        @include lato-bold-18;
+        @include font-bold-18;
         margin: 10px 0;
       }
       svg,
@@ -25,7 +25,7 @@
     .contentModal {
       padding: 0 1.5rem 1rem 1.5rem;
       p {
-        @include lato-regular-18;
+        @include font-regular-18;
         text-align: center;
         margin: 10px 0;
       }
diff --git a/src/app/shared/components/password-form/password-form.component.scss b/src/app/shared/components/password-form/password-form.component.scss
index 2687d17230ceb3e79ec5539848e5259647027d2f..87b140313f0edaf319b0f47df0d9d5a7f25b1783 100644
--- a/src/app/shared/components/password-form/password-form.component.scss
+++ b/src/app/shared/components/password-form/password-form.component.scss
@@ -28,7 +28,7 @@
   justify-content: center;
 }
 h1 {
-  @include lato-bold-24;
+  @include font-bold-24;
 }
 .form-group {
   margin-bottom: 20px;
diff --git a/src/app/shared/components/radio-form/radio-form.component.scss b/src/app/shared/components/radio-form/radio-form.component.scss
index 705bcbfe4ff28c9d08c880b81d7a7becfde60802..819a33941642c17f79e768a38468360db8ca211a 100644
--- a/src/app/shared/components/radio-form/radio-form.component.scss
+++ b/src/app/shared/components/radio-form/radio-form.component.scss
@@ -46,14 +46,14 @@ button {
     }
   }
   p {
-    @include lato-bold-16;
+    @include font-bold-16;
   }
   .nomargin {
     text-align: left !important;
     margin: 0;
   }
   .hint {
-    @include lato-regular-14;
+    @include font-regular-14;
     margin: 0;
   }
   .checkmark {
diff --git a/src/app/shared/components/structure-detail-print/structure-detail-print.component.scss b/src/app/shared/components/structure-detail-print/structure-detail-print.component.scss
index 84e8dc1fc327310d3bbcb3a8edbdd16d6ed7b209..47e930605d21073c113eed4e898c94c0cdcad1a0 100644
--- a/src/app/shared/components/structure-detail-print/structure-detail-print.component.scss
+++ b/src/app/shared/components/structure-detail-print/structure-detail-print.component.scss
@@ -8,21 +8,21 @@
 h2 {
   margin-top: 0;
   margin-bottom: 5px;
-  @include lato-regular-26;
+  @include font-regular-26;
 }
 h3 {
   margin: 0 0 8px 0;
-  @include lato-regular-14;
+  @include font-regular-14;
 }
 h4 {
   margin: 0;
-  @include lato-regular-14;
+  @include font-regular-14;
   color: $grey-2;
   text-transform: capitalize;
 }
 p,
 .custom-link {
-  @include lato-regular-14;
+  @include font-regular-14;
   margin-top: 9px;
   margin-bottom: 9px;
   &.no-margin {
@@ -55,7 +55,7 @@ a {
 }
 
 .subtitle {
-  @include lato-bold-14;
+  @include font-bold-14;
   margin-bottom: 8px;
   color: $grey-3;
 }
@@ -78,7 +78,7 @@ a {
 }
 
 .bold-info {
-  @include lato-bold-14;
+  @include font-bold-14;
 }
 
 @media print {
diff --git a/src/app/shared/components/structure-type-picker/structure-type-picker.component.scss b/src/app/shared/components/structure-type-picker/structure-type-picker.component.scss
index 071a00eae5e31ed7c9f487a36c9cf08e55aa4ef2..023d3ec4857dc2f204b52723309728e6d39a09d6 100644
--- a/src/app/shared/components/structure-type-picker/structure-type-picker.component.scss
+++ b/src/app/shared/components/structure-type-picker/structure-type-picker.component.scss
@@ -34,7 +34,7 @@
       cursor: pointer;
       .titleCollapse {
         width: 100%;
-        @include lato-bold-14;
+        @include font-bold-14;
         color: $grey-1;
       }
       .logo {
diff --git a/src/app/shared/components/text-input-modal/text-input-modal.component.scss b/src/app/shared/components/text-input-modal/text-input-modal.component.scss
index aaee615c4f762a63badb23656e4c810505525326..ba3096428169107b250aff50d85b8c7335d946cd 100644
--- a/src/app/shared/components/text-input-modal/text-input-modal.component.scss
+++ b/src/app/shared/components/text-input-modal/text-input-modal.component.scss
@@ -19,7 +19,7 @@
         border-radius: 1px;
         resize: none;
         width: 90%;
-        @include lato-regular-16;
+        @include font-regular-16;
       }
 
       .footerModal {
diff --git a/src/app/shared/components/training-type-picker/training-type-picker.component.scss b/src/app/shared/components/training-type-picker/training-type-picker.component.scss
index 5255a5450b773550798e4312d7867e5dd60f5711..dc192e71b4e6d63da7ba60806d8f9a1ec7fce55a 100644
--- a/src/app/shared/components/training-type-picker/training-type-picker.component.scss
+++ b/src/app/shared/components/training-type-picker/training-type-picker.component.scss
@@ -58,7 +58,7 @@ label.checkbox {
     }
     .titleCollapse {
       width: 100%;
-      @include lato-bold-14;
+      @include font-bold-14;
       color: $grey-1;
     }
     .logo {
diff --git a/src/app/shared/components/v3/textarea/textarea.component.scss b/src/app/shared/components/v3/textarea/textarea.component.scss
index 84de13fbfb4abc5a495f3781564d1c9896ab67a7..bf9e173516e7433052fcf0a7c20f4a3fbcd4ac7e 100644
--- a/src/app/shared/components/v3/textarea/textarea.component.scss
+++ b/src/app/shared/components/v3/textarea/textarea.component.scss
@@ -33,7 +33,6 @@
   }
 
   textarea {
-    font-family: $text-font;
     margin-top: 8px;
     box-sizing: border-box;
     max-width: 300px;
diff --git a/src/app/structure-list/components/card/card.component.scss b/src/app/structure-list/components/card/card.component.scss
index 0fc185abe16e6a005a3da95ea54115e97de3a049..d4e39485817a7194d31e7f56738aa6aa4e897806 100644
--- a/src/app/structure-list/components/card/card.component.scss
+++ b/src/app/structure-list/components/card/card.component.scss
@@ -22,7 +22,7 @@
   }
   .typeStructure {
     color: $grey-3;
-    @include lato-regular-16;
+    @include font-regular-16;
     font-style: italic;
     padding-top: 5px;
   }
@@ -33,7 +33,7 @@
     align-items: center;
   }
   .structure-name {
-    @include lato-bold-18;
+    @include font-bold-18;
     color: $grey-1;
     width: 100%;
 
@@ -48,7 +48,7 @@
     }
   }
   .distanceStructure {
-    @include lato-regular-16;
+    @include font-regular-16;
     color: $grey-3;
     text-align: right;
   }
@@ -80,7 +80,7 @@
 }
 
 .distance {
-  @include lato-regular-14;
+  @include font-regular-14;
   color: $grey-3;
 }
 
diff --git a/src/app/structure-list/components/more-filters/more-filters.component.scss b/src/app/structure-list/components/more-filters/more-filters.component.scss
index 4cfe921544b19236bcb1210322d5b018bf0a7950..4331c4261faf2d4c458a6f2300b7fcd045469507 100644
--- a/src/app/structure-list/components/more-filters/more-filters.component.scss
+++ b/src/app/structure-list/components/more-filters/more-filters.component.scss
@@ -99,7 +99,7 @@
     color: $grey-1;
     background: white;
     padding: 1rem;
-    @include lato-bold-18;
+    @include font-bold-18;
     align-items: center;
     justify-content: center;
     border-bottom: solid 1px $grey-6;
diff --git a/src/app/structure-list/components/structure-details/structure-details.component.scss b/src/app/structure-list/components/structure-details/structure-details.component.scss
index d6adc3f29657272843e5ab7eaa204bdadb72946d..be34ccbae9520d6baa8ba0b782bdf32cd20b8d1b 100644
--- a/src/app/structure-list/components/structure-details/structure-details.component.scss
+++ b/src/app/structure-list/components/structure-details/structure-details.component.scss
@@ -16,18 +16,18 @@ p:empty {
 }
 
 h1 {
-  @include lato-bold-20;
+  @include font-bold-20;
   color: $grey-1;
 }
 h2 {
-  @include lato-bold-14;
+  @include font-bold-14;
   color: $grey-3;
   text-transform: uppercase;
   margin-top: 0;
   margin-bottom: 12px;
 }
 h3 {
-  @include lato-regular-16;
+  @include font-regular-16;
   margin: 0 0 8px 0;
 }
 
@@ -59,7 +59,7 @@ ul {
   padding: 0px 8px;
   overflow-y: auto;
   scrollbar-gutter: stable;
-  @include lato-regular-14;
+  @include font-regular-14;
 }
 
 .structure-buttons {
@@ -81,7 +81,7 @@ ul {
       align-items: center;
     }
     .iconTitle {
-      @include lato-regular-13;
+      @include font-regular-13;
       height: 36px;
       display: flex;
       justify-content: center;
@@ -120,14 +120,14 @@ ul {
         margin: 0;
       }
       .member {
-        @include lato-bold-14;
+        @include font-bold-14;
         text-decoration: none;
         &:hover {
           text-decoration: underline;
         }
       }
       .job {
-        @include lato-regular-14;
+        @include font-regular-14;
       }
     }
   }
@@ -168,7 +168,7 @@ ul {
           margin-top: 0;
           margin-left: 0;
           margin-bottom: 0;
-          @include lato-regular-14;
+          @include font-regular-14;
           color: $grey-3;
           text-transform: capitalize;
         }
@@ -209,7 +209,7 @@ ul {
       }
       .titleSkills {
         width: 100%;
-        @include lato-regular-16;
+        @include font-regular-16;
       }
       .detailsContainer {
         margin: 8px 0px;
@@ -224,7 +224,7 @@ ul {
   }
 
   .updated {
-    @include lato-regular-14;
+    @include font-regular-14;
     color: $grey-3;
     font-style: italic;
   }
@@ -236,7 +236,7 @@ ul {
 
 p,
 .custom-link {
-  @include lato-regular-16;
+  @include font-regular-16;
   margin-top: 9px;
   margin-bottom: 9px;
   &.no-margin {
@@ -258,7 +258,7 @@ p,
 }
 
 .bold-info {
-  @include lato-bold-16;
+  @include font-bold-16;
 }
 
 @media print {
diff --git a/src/app/structure-list/components/structure-list-search-print/structure-list-search-print.component.scss b/src/app/structure-list/components/structure-list-search-print/structure-list-search-print.component.scss
index 2fc5793d68e65baa0c0e9a45fd0d41cd8f8f8fc7..9524ed6637e5f426fd9c47dd3a1c6c9a6608d852 100644
--- a/src/app/structure-list/components/structure-list-search-print/structure-list-search-print.component.scss
+++ b/src/app/structure-list/components/structure-list-search-print/structure-list-search-print.component.scss
@@ -20,7 +20,7 @@
         width: 20px;
       }
       h1 {
-        @include lato-regular-15;
+        @include font-regular-15;
         margin: 0;
       }
     }
@@ -44,7 +44,7 @@
           padding-left: 5px;
 
           p {
-            @include lato-regular-10;
+            @include font-regular-10;
             margin: 0;
             &.structureName {
               font-weight: bold;
@@ -59,7 +59,7 @@
     bottom: 0;
     width: 100%;
     text-align: center;
-    @include lato-bold-14;
+    @include font-bold-14;
   }
 }
 
diff --git a/src/app/structure-list/components/structure-list-search/structure-list-search.component.scss b/src/app/structure-list/components/structure-list-search/structure-list-search.component.scss
index d3fc261df22556e1c4147b00a38102fadb2091b4..984133502e450f4262f6c8f4c2512c0ddebf7952 100644
--- a/src/app/structure-list/components/structure-list-search/structure-list-search.component.scss
+++ b/src/app/structure-list/components/structure-list-search/structure-list-search.component.scss
@@ -39,7 +39,7 @@
     align-items: center;
     justify-content: center;
     transition: all 300ms ease;
-    @include lato-regular-13;
+    @include font-regular-13;
     line-height: 110%;
     @media #{$large-tablet} {
       width: max-content;
diff --git a/src/app/structure-list/structure-list.component.scss b/src/app/structure-list/structure-list.component.scss
index 8c1d63084c679e06840e479da5396ad844664a6c..2cab4f9a48eacd07391b865a8219156faa960cd7 100644
--- a/src/app/structure-list/structure-list.component.scss
+++ b/src/app/structure-list/structure-list.component.scss
@@ -33,7 +33,7 @@
   gap: 8px;
   margin: 8px 16px;
   .nbStructuresLabel {
-    @include lato-regular-14;
+    @include font-regular-14;
     color: $grey-3;
     flex: 1;
   }
diff --git a/src/app/structure/structure-exclude/structure-exclude.component.scss b/src/app/structure/structure-exclude/structure-exclude.component.scss
index ff268e44d5ce69fea2c25ac40a7142db5d1ec6b6..1964b4ead9a0f9e2f04a095dabd19726e956b9ed 100644
--- a/src/app/structure/structure-exclude/structure-exclude.component.scss
+++ b/src/app/structure/structure-exclude/structure-exclude.component.scss
@@ -12,7 +12,7 @@
         padding: 0 8px 8px;
         border-bottom: 1px solid $grey-6;
         h3 {
-          @include lato-bold-18;
+          @include font-bold-18;
           margin: 0;
         }
         svg,
@@ -25,7 +25,7 @@
         }
       }
       p {
-        @include lato-bold-18;
+        @include font-bold-18;
         text-align: center;
         margin: 10px 0;
       }
diff --git a/src/assets/scss/_buttons.scss b/src/assets/scss/_buttons.scss
index a9300350397794487f2e689ed9328b237fb2062e..0efadc6c0154dee1e1c793faffb9cb429ad976de 100644
--- a/src/assets/scss/_buttons.scss
+++ b/src/assets/scss/_buttons.scss
@@ -12,7 +12,7 @@
   border-radius: 4px;
   cursor: pointer;
   @include btn-normal;
-  @include lato-regular-13;
+  @include font-regular-13;
   transition: all 300ms ease;
   & > * {
     transition: all 300ms ease;
@@ -28,7 +28,7 @@
   outline: none;
   border: 1px solid transparent;
   cursor: pointer;
-  @include lato-regular-13;
+  @include font-regular-13;
   line-break: 18px;
 }
 
@@ -39,7 +39,7 @@
   color: $grey-1;
   border: 1px solid $grey-1;
   cursor: pointer;
-  @include lato-regular-12;
+  @include font-regular-12;
   line-height: 18px;
   padding: 8px 15px;
 }
@@ -48,7 +48,7 @@
   background: $red;
   color: $white;
   cursor: pointer;
-  @include lato-regular-12;
+  @include font-regular-12;
   line-height: 18px;
   padding: 8px 15px;
 }
diff --git a/src/assets/scss/_ghost.scss b/src/assets/scss/_ghost.scss
index bfb9c6aeab3b387144e92a0dea8beb4bfe947afe..b6f27098d64bf1eac6ec249ee124ca8a6ffafa38 100644
--- a/src/assets/scss/_ghost.scss
+++ b/src/assets/scss/_ghost.scss
@@ -16,7 +16,7 @@ $margin-post: 20px;
     var(--vh, 1vh) * 100 - #{$header-height} - #{$footer-height} - #{$header-post-height} - #{$margin-post} * 3
   );
   .title {
-    @include lato-bold-30;
+    @include font-bold-30;
     color: $grey-1;
     margin-bottom: 8px;
   }
diff --git a/src/assets/scss/_inputs.scss b/src/assets/scss/_inputs.scss
index 8b67757e0aa390ee87381b80296696b001f8b2af..0a53f5a5beedc07f91f28176b7c840487f830609 100644
--- a/src/assets/scss/_inputs.scss
+++ b/src/assets/scss/_inputs.scss
@@ -20,7 +20,7 @@
   border-radius: $input-radius;
   height: 36px;
   padding: 8px;
-  @include lato-regular-14;
+  @include font-regular-14;
   transition: all 0.2s;
 }
 .form-input:focus-within {
diff --git a/src/assets/scss/_search.scss b/src/assets/scss/_search.scss
index a14cfe567f781fa5884b1398d733ba6613796751..3ab45321c5d6a6f87aafe4f08832a998dce8a3d9 100644
--- a/src/assets/scss/_search.scss
+++ b/src/assets/scss/_search.scss
@@ -18,7 +18,7 @@
   align-items: center;
   gap: 0.5rem;
   input {
-    @include lato-regular-13;
+    @include font-regular-13;
     @include input-search;
     margin-top: unset;
   }
@@ -76,7 +76,7 @@
     transition: all 300ms ease;
     line-height: 110%;
     @include btn-normal;
-    @include lato-regular-13;
+    @include font-regular-13;
     &:hover:not(.selected) {
       background: $grey-8;
     }
diff --git a/src/assets/scss/_typography.scss b/src/assets/scss/_typography.scss
index 4669024be60099e6b042e306e974d08e948fe876..4caaf08fe6d98cf4cb77a5c746f5badb1e6bbfee 100644
--- a/src/assets/scss/_typography.scss
+++ b/src/assets/scss/_typography.scss
@@ -1,7 +1,3 @@
-$text-font: 'Lato', 'Helvetica', sans-serif;
-$footer-text-font: 'Arial', 'Helvetica', sans-serif;
-$title-font: 'Lato', 'Helvetica', sans-serif;
-
 $font-size-xxxxsmall: 0.625em; // 10px
 $font-size-xxsmall: 0.75em; // 12px
 $font-size-xmsmall: 0.813em; // 13px
@@ -18,178 +14,134 @@ $font-size-xlarge: 1.75em; // 28px
 $font-size-xxlarge: 1.875em; // 30px
 $font-size-xcxlarge: 2em; // 32px
 
-html,
-body,
-p,
-span,
-label {
-  font-family: $text-font;
-}
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  font-family: $title-font;
-}
-
-@mixin arial-regular-16 {
-  font-family: $footer-text-font;
-  font-style: normal;
-  font-size: $font-size-small;
+* {
+  font-family: 'Lato', 'Helvetica', sans-serif;
 }
 
-@mixin lato-regular-32 {
-  font-family: $title-font;
+@mixin font-regular-32 {
   font-style: normal;
   font-weight: bold;
   font-size: $font-size-xcxlarge;
 }
-@mixin lato-bold-30 {
-  font-family: $title-font;
+@mixin font-bold-30 {
   font-style: normal;
   font-weight: bold;
   font-size: $font-size-xxlarge;
 }
 
-@mixin lato-bold-28 {
-  font-family: $title-font;
+@mixin font-bold-28 {
   font-style: normal;
   font-weight: bold;
   font-size: $font-size-xlarge;
 }
 
-@mixin lato-bold-26 {
-  font-family: $title-font;
+@mixin font-bold-26 {
   font-style: normal;
   font-weight: bold;
   font-size: $font-size-large;
 }
-@mixin lato-regular-26 {
-  font-family: $text-font;
+@mixin font-regular-26 {
   font-style: normal;
   font-weight: normal;
   font-size: $font-size-large;
 }
-@mixin lato-bold-24 {
-  font-family: $title-font;
+@mixin font-bold-24 {
   font-style: normal;
   font-weight: bold;
   font-size: $font-size-xxmedium;
 }
-@mixin lato-regular-24 {
-  font-family: $text-font;
+@mixin font-regular-24 {
   font-style: normal;
   font-weight: normal;
   font-size: $font-size-xxmedium;
 }
-@mixin lato-regular-22 {
-  font-family: $text-font;
+@mixin font-regular-22 {
   font-style: normal;
   font-weight: normal;
   font-size: $font-size-xmedium;
 }
 
-@mixin lato-bold-22 {
-  font-family: $text-font;
+@mixin font-bold-22 {
   font-style: normal;
   font-weight: bold;
   font-size: $font-size-xmedium;
 }
-@mixin lato-bold-20 {
-  font-family: $text-font;
+@mixin font-bold-20 {
   font-style: normal;
   font-weight: bold;
   font-size: $font-size-medium;
 }
-@mixin lato-regular-20 {
-  font-family: $text-font;
+@mixin font-regular-20 {
   font-style: normal;
   font-weight: normal;
   font-size: $font-size-medium;
 }
-@mixin lato-bold-20 {
-  font-family: $title-font;
+@mixin font-bold-20 {
   font-style: normal;
   font-weight: bold;
   font-size: $font-size-medium;
 }
-@mixin lato-regular-20 {
-  font-family: $title-font;
+@mixin font-regular-20 {
   font-style: normal;
   font-weight: normal;
   font-size: $font-size-medium;
 }
-@mixin lato-regular-18 {
-  font-family: $title-font;
+@mixin font-regular-18 {
   font-style: normal;
   font-weight: normal;
   font-size: $font-size-smedium;
 }
-@mixin lato-bold-18 {
-  font-family: $title-font;
+@mixin font-bold-18 {
   font-style: normal;
   font-weight: bold;
   font-size: $font-size-smedium;
 }
-@mixin lato-bold-16 {
-  font-family: $text-font;
+@mixin font-bold-16 {
   font-style: normal;
   font-weight: bold;
   font-size: $font-size-small;
 }
-@mixin lato-regular-16 {
-  font-family: $text-font;
+@mixin font-regular-16 {
   font-style: normal;
   font-weight: normal;
   font-size: $font-size-small;
 }
-@mixin lato-bold-15 {
-  font-family: $text-font;
+@mixin font-bold-15 {
   font-style: normal;
   font-weight: bold;
   font-size: $font-size-xismall;
 }
-@mixin lato-regular-15 {
-  font-family: $text-font;
+@mixin font-regular-15 {
   font-style: normal;
   font-weight: normal;
   font-size: $font-size-xismall;
 }
-@mixin lato-bold-14 {
-  font-family: $text-font;
+@mixin font-bold-14 {
   font-style: normal;
   font-weight: bold;
   font-size: $font-size-xsmall;
 }
-@mixin lato-regular-14 {
-  font-family: $text-font;
+@mixin font-regular-14 {
   font-style: normal;
   font-weight: normal;
   font-size: $font-size-xsmall;
 }
-@mixin lato-regular-13 {
-  font-family: $text-font;
+@mixin font-regular-13 {
   font-style: normal;
   font-weight: normal;
   font-size: $font-size-xmsmall;
 }
-@mixin lato-bold-13 {
-  font-family: $text-font;
+@mixin font-bold-13 {
   font-style: normal;
   font-weight: bold;
   font-size: $font-size-xmsmall;
 }
-@mixin lato-regular-12 {
-  font-family: $text-font;
+@mixin font-regular-12 {
   font-style: normal;
   font-weight: normal;
   font-size: $font-size-xxsmall;
 }
-@mixin lato-regular-10 {
-  font-family: $text-font;
+@mixin font-regular-10 {
   font-style: normal;
   font-weight: normal;
   font-size: $font-size-xxxxsmall;
@@ -202,7 +154,7 @@ h6 {
 }
 
 @mixin btn-bold {
-  @include lato-bold-16;
+  @include font-bold-16;
   line-height: 18px;
 }
 
@@ -211,11 +163,11 @@ h6 {
   text-decoration: underline;
 }
 @mixin btn-normal {
-  @include lato-regular-16;
+  @include font-regular-16;
   line-height: 19px;
 }
 
 @mixin btn-pass {
-  @include lato-regular-14;
+  @include font-regular-14;
   line-height: 15.5px;
 }
diff --git a/src/styles.scss b/src/styles.scss
index bdf5eb8f920a7a17241aaa4f02e798e519587af4..3b00fe0c92215a5d3c22504c2bf1af9ac1d5d93b 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -57,7 +57,7 @@ a {
   color: $default-link-color;
   text-decoration: none;
   background-color: transparent;
-  @include lato-regular-14;
+  @include font-regular-14;
   cursor: pointer;
   &:focus {
     text-decoration: none;
@@ -205,7 +205,7 @@ textarea {
   border-radius: $input-radius;
   resize: none;
   outline: none;
-  @include lato-regular-16;
+  @include font-regular-16;
   &:focus {
     border: 1px solid $grey-3;
   }
@@ -248,7 +248,7 @@ button {
     padding-right: 10px;
     @include btn-pass;
     &.pass {
-      @include lato-regular-16;
+      @include font-regular-16;
     }
   }
   .customCheck {
@@ -383,7 +383,7 @@ button {
     .titleFilter {
       display: none !important;
       margin: 27px 25px 0px 25px;
-      @include lato-bold-26;
+      @include font-bold-26;
       @media #{$large-phone} {
         display: flex !important;
       }
@@ -422,7 +422,7 @@ button {
       }
     }
     label {
-      @include lato-regular-16;
+      @include font-regular-16;
       color: $grey-1;
     }
 
@@ -480,7 +480,7 @@ button {
     .footerModal {
       width: 100%;
       margin-top: 1rem;
-      @include lato-bold-16;
+      @include font-bold-16;
       .btn {
         background: $primary-color;
         border-radius: 4px;
@@ -527,7 +527,7 @@ button {
   cursor: pointer;
   color: $grey-2;
   margin-bottom: 40px;
-  @include lato-bold-16;
+  @include font-bold-16;
   &:hover {
     opacity: 0.4;
   }