Move to a self-hosted font

index.html

@@ -5,10 +5,6 @@
   <meta charset="UTF-8">
   <link rel="icon" href="/favicon.png">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <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=Bebas+Neue&family=Mulish:wght@500;700;900&display=swap"
-    rel="stylesheet">
   <title>Ecocode</title>
 </head>
 

package.json

@@ -10,6 +10,7 @@
     "type-check": "vue-tsc --noEmit -p tsconfig.app.json --composite false"
   },
   "dependencies": {
+    "@fontsource-variable/mulish": "^5.0.16",
     "@hcaptcha/vue3-hcaptcha": "^1.3.0",
     "vue": "^3.3.4",
     "vue-router": "^4.2.4"

src/assets/main.css

@@ -1,35 +1,39 @@
-/*@import './base.css';*/
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    scroll-behavior: smooth;
+}
 
-*{
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-  scroll-behavior: smooth;
+a {
+    text-decoration: none;
 }
 
-a{
-  text-decoration: none;
+body {
+    font-family: 'Mulish Variable', sans-serif;
+    font-weight: 500;
 }
 
-#app{
-  width: 100%;
-  height: 100VH;
-  background-color: #ffffffff;
-  font-family: "Mulish", sans-serif;
+button,
+input,
+optgroup,
+select,
+textarea {
+    font-family: inherit;
 }
 
 .error-message {
-  color: red;
-  font-size: 18px;
-  font-weight: 500;
-  outline: none;
-  transition: opacity 2s ease;
+    color: red;
+    font-size: 18px;
+    font-weight: 500;
+    outline: none;
+    transition: opacity 2s ease;
 }
 
 .success-message {
-  color: #57c18b;
-  font-size: 18px;
-  font-weight: 500;
-  outline: none;
-  transition: opacity 2s ease;
+    color: #57c18b;
+    font-size: 18px;
+    font-weight: 500;
+    outline: none;
+    transition: opacity 2s ease;
 }

src/components/Shared/FormSecond.vue

@@ -217,7 +217,6 @@ const success = ref("");
   border-radius: 8px;
   border: solid 1px rgba(0, 0, 0, 0.2);
   color: #022826;
-  font-family: "Mulish", sans-serif;
   font-size: 18px;
   font-weight: 500;
   outline: none;
@@ -232,7 +231,6 @@ const success = ref("");
   border-radius: 8px;
   border: solid 1px rgba(0, 0, 0, 0.2);
   color: #022826;
-  font-family: "Mulish", sans-serif;
   font-size: 18px;
   font-weight: 500;
   outline: none;

src/components/global/Footer.vue

@@ -18,7 +18,6 @@ footer {
   }
 
   .text-footer {
-    font-family: "Mulish", sans-serif;
     font-weight: bold;
     font-style: italic;
   }

src/components/global/Newsletter.vue

@@ -134,7 +134,6 @@ input {
     border-radius: 8px;
     border: solid 1px rgba(0, 0, 0, 0.2);
     color: #022826;
-    font-family: "Mulish", sans-serif;
     font-size: 18px;
     font-weight: 500;
     outline: none;

src/main.ts

@@ -1,3 +1,4 @@
+import '@fontsource-variable/mulish/wght.css';
 import './assets/main.css'
 
 import { createApp } from 'vue'

src/views/Page/contributeur/scss/style.scss

@@ -5,7 +5,7 @@
 
 .container-title {
     font-size: 22px;
-    font-weight: 800;
+    font-weight: 900;
     font-stretch: normal;
     font-style: normal;
     line-height: normal;