Use "Lato" font also in titles

apps/datahub-e2e/src/e2e/search.cy.ts

@@ -42,7 +42,7 @@ describe('search', () => {
 
     it('shold display the correct subtitle', () => {
       cy.get('mel-datahub-search-header')
-        .find('.font-title')
+        .find('.mel-section-title')
         .first()
         .should('have.text', ' Derniers jeux de données publiés ')
     })
@@ -99,7 +99,7 @@ describe('search', () => {
 
       it('should display the correct subtitle', () => {
         cy.get('mel-datahub-search-header')
-          .find('.font-title')
+          .find('.mel-section-title')
           .first()
           .should('have.text', ' Jeux de données suivis ')
       })

apps/datahub/src/app/app.module.ts

@@ -160,8 +160,7 @@ export class AppModule {
       '#007A80',
       '#212029',
       'white',
-      'Lato',
-      'Montserrat'
+      'Lato'
     )
   }
 }

apps/datahub/src/app/dataset/dataset-apis/api-form/api-form.component.html

@@ -1,7 +1,7 @@
 <div class="flex flex-col gap-6">
   <div class="flex flex-col bg-white p-8 ng-star-inserted shadow-xl gap-8">
     <div class="flex flex-row">
-      <div class="text-[16px] text-black truncate font-title w-11/12" translate>
+      <div class="text-[16px] text-black truncate w-11/12" translate>
         mel.metadata.api.form.create
       </div>
       <button
@@ -62,7 +62,7 @@
     </div>
   </div>
   <div class="flex flex-col gap-3 mb-3">
-    <div class="text-sm text-black truncate font-title w-11/12" translate>
+    <div class="text-sm text-black truncate w-11/12" translate>
       mel.metadata.api.form.customUrl
     </div>
     <div class="bg-white rounded-lg">

apps/datahub/src/app/dataset/dataset-apis/dataset-apis.component.html

@@ -38,7 +38,7 @@
   <div class="mel-grid-container-dataset py-8">
     <div class="flex flex-col gap-8 sm:col-start-2 sm:col-span-8">
       <div class="flex flex-wrap justify-between sm:mb-2 ng-star-inserted">
-        <p class="text-[21px] text-title font-title" translate>
+        <p class="text-[21px] text-title" translate>
           mel.record.metadata.api.form.title
         </p>
         <button

apps/datahub/src/app/dataset/dataset-downloads/download-item/download-item.component.html

@@ -3,7 +3,7 @@
 >
   <div class="overflow-hidden basis-2/3">
     <div
-      class="text-21 text-black truncate font-title"
+      class="text-21 text-black truncate"
       [title]="link.description || link.name"
     >
       {{ link.description || link.name }}

apps/datahub/src/app/dataset/dataset-downloads/downloads-list/downloads-list.component.html

@@ -2,10 +2,7 @@
 <div class="mt-8 mb-6 sm:mt-12 sm:mb-2">
   <div class="mel-title-line"></div>
   <div class="flex flex-wrap justify-between">
-    <p
-      class="font-title text-[28px] text-title font-medium mr-4 pb-4 text-center sm:text-left"
-      translate
-    >
+    <p class="mel-section-title mr-4 pb-4" translate>
       mel.record.metadata.download
     </p>
     <div

apps/datahub/src/app/dataset/dataset-visualisation/dataset-visualisation.component.html

@@ -9,7 +9,7 @@
     <div class="flex flex-col">
       <div class="pb-2 gap-1">
         <div class="inline-flex bg-primary h-1 w-16"></div>
-        <div class="text-2xl font-title" translate="">mel.record.preview</div>
+        <div class="mel-section-title" translate="">mel.record.preview</div>
       </div>
       <span class="w-5/6 leading-5" translate>mel.record.preview.subtitle</span>
     </div>

apps/datahub/src/app/search/search-form/search-form.component.html

@@ -1,7 +1,7 @@
 <div class="flex flex-col justify-between gap-10 mb-14 px-5">
   <div class="w-full md:w-7/12 lg:w-6/12 xl:w-5/12">
     <div class="mel-title-line"></div>
-    <h2 class="text-2xl font-title font-bold mb-3" translate="">
+    <h2 class="mel-section-title mb-3" translate="">
       mel.datahub.search.form.title
     </h2>
     <p class="text-[17px]" translate="">mel.datahub.search.form.description</p>

apps/datahub/src/app/search/search-header/search-header.component.html

@@ -6,7 +6,7 @@ <h1 class="flex mel-page-title md:mb-12" translate="">
       </h1>
 
       <div class="mel-title-line"></div>
-      <div class="text-2xl font-title">
+      <div class="mel-section-title">
         {{
           (hasFavorites$ | async)
             ? ('mel.searchpage.subtitle.favorites' | translate)

apps/datahub/tailwind.config.js

@@ -29,9 +29,6 @@ module.exports = {
         'gray-7': '#EEEEEE',
         'gray-8': '#FFFFFF',
       },
-      fontFamily: {
-        title: ['Montserrat'],
-      },
     },
   },
   plugins: [],

apps/home/src/app/app.module.ts

@@ -73,8 +73,7 @@ export class AppModule {
       '#007A80',
       '#212029',
       'white',
-      'Lato',
-      'Montserrat'
+      'Lato'
     )
   }
 }

apps/home/src/app/home/home-header/home-header.component.html

@@ -14,7 +14,7 @@ <h1 class="flex justify-center mel-page-title" translate="">
     <div class="max-w-[1182px] mx-auto">
       <div class="sm:ml-16">
         <div class="mel-title-line"></div>
-        <div class="text-2xl font-title" translate="">
+        <div class="mel-section-title" translate="">
           mel.homepage.public.datasets
         </div>
       </div>

apps/home/tailwind.config.js

@@ -29,9 +29,6 @@ module.exports = {
         'gray-7': '#EEEEEE',
         'gray-8': '#FFFFFF',
       },
-      fontFamily: {
-        title: ['Montserrat'],
-      },
     },
   },
   plugins: [],

resources/assets/css/default-fonts.css

@@ -19,103 +19,43 @@
     U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
 
-/* cyrillic-ext */
 @font-face {
-  font-family: 'Montserrat';
-  font-style: normal;
-  font-weight: 700;
-  src: url(../fonts/Montserrat-cyrillic-ext.woff2) format('woff2');
-  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F,
-    U+FE2E-FE2F;
-}
-
-/* cyrillic */
-@font-face {
-  font-family: 'Montserrat';
-  font-style: normal;
-  font-weight: 700;
-  src: url(../fonts/Montserrat-cyrillic.woff2) format('woff2');
-  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
-}
-
-/* vietnamese */
-@font-face {
-  font-family: 'Montserrat';
-  font-style: normal;
-  font-weight: 700;
-  src: url(../fonts/Montserrat-vietnamese.woff2) format('woff2');
-  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1,
-    U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329,
-    U+1EA0-1EF9, U+20AB;
-}
-
-/* latin-ext */
-@font-face {
-  font-family: 'Montserrat';
+  font-family: 'Lato';
   font-style: normal;
   font-weight: 700;
-  src: url(../fonts/Montserrat-latin-ext.woff2) format('woff2');
+  font-display: swap;
+  src: url(../fonts/Lato-Bold.woff2) format('woff2');
   unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF,
     U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
 }
 
-/* latin */
 @font-face {
-  font-family: 'Montserrat';
+  font-family: 'Lato';
   font-style: normal;
   font-weight: 700;
-  src: url(../fonts/Montserrat-latin.woff2) format('woff2');
+  font-display: swap;
+  src: url(../fonts/Lato-Bold.woff2) format('woff2');
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
     U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
     U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
 
-/* cyrillic-ext */
 @font-face {
-  font-family: 'Montserrat';
-  font-style: normal;
-  font-weight: 800;
-  src: url(../fonts/Montserrat-cyrillic-ext.woff2) format('woff2');
-  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F,
-    U+FE2E-FE2F;
-}
-
-/* cyrillic */
-@font-face {
-  font-family: 'Montserrat';
-  font-style: normal;
-  font-weight: 800;
-  src: url(../fonts/Montserrat-cyrillic.woff2) format('woff2');
-  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
-}
-
-/* vietnamese */
-@font-face {
-  font-family: 'Montserrat';
-  font-style: normal;
-  font-weight: 800;
-  src: url(../fonts/Montserrat-vietnamese.woff2) format('woff2');
-  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1,
-    U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329,
-    U+1EA0-1EF9, U+20AB;
-}
-
-/* latin-ext */
-@font-face {
-  font-family: 'Montserrat';
+  font-family: 'Lato';
   font-style: normal;
   font-weight: 800;
-  src: url(../fonts/Montserrat-latin-ext.woff2) format('woff2');
+  font-display: swap;
+  src: url(../fonts/Lato-Heavy.woff2) format('woff2');
   unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF,
     U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
 }
 
-/* latin */
 @font-face {
-  font-family: 'Montserrat';
+  font-family: 'Lato';
   font-style: normal;
   font-weight: 800;
-  src: url(../fonts/Montserrat-latin.woff2) format('woff2');
+  font-display: swap;
+  src: url(../fonts/Lato-Heavy.woff2) format('woff2');
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
     U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
     U+2193, U+2212, U+2215, U+FEFF, U+FFFD;

resources/styles.css

@@ -6,7 +6,7 @@
 
 @layer components {
   .mel-page-title {
-    @apply text-black text-5xl font-extrabold font-title;
+    @apply text-black text-5xl font-extrabold;
   }
   .mel-title-line {
     @apply inline-flex bg-primary h-1 w-16;
@@ -21,7 +21,7 @@
     @apply mel-badge text-secondary border border-secondary;
   }
   .mel-section-title {
-    @apply font-title text-[28px] font-medium text-title text-center sm:text-left;
+    @apply text-[28px] font-bold text-title text-center sm:text-left;
   }
   .mel-badge {
     @apply inline-block bg-white py-1.5 px-2 rounded font-medium text-sm leading-none transition-colors;