testing fonts

public/index.html

@@ -4,6 +4,7 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
+    <meta name="copyright" content="SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
     <title><%= htmlWebpackPlugin.options.title %></title>

src/App.vue

@@ -1,32 +1,83 @@
 <template>
   <div id="app">
-    <div class="container" style="position: absolute;">
-      <span>For tests :</span>
-      <button class="btn btn-primary" @click="display = 'app-menu'">
-        Menu
-      </button>
-      <button class="btn btn-primary" @click="display = 'app-game'">
-        Game
-      </button>
-    </div>
-    <div class="container fill" style="height: 100vh;">
-      <!-- <div class="bg"> -->
-      <keep-alive>
-        <transition
-          enter-active-class="animated bounceInUp"
-          leave-active-class="animated bounceOutDown"
-          mode="out-in"
-          appear
+    <div class="container-fluid">
+      <div class="row">
+        <div
+          class="col-4"
+          style="background-color:lightgreen;"
+          v-if="!hideTest"
         >
-          <component
-            :is="display"
-            @join-game-id="launchOnlineGame($event)"
-            :username="username"
-            :game-id="onlineGameId"
-          ></component>
-        </transition>
-      </keep-alive>
-      <!-- </div> -->
+          <span class="test-germania">For tests :</span>
+          <br />
+          <button
+            class="btn btn-primary custom-button"
+            @click="display = 'app-menu'"
+          >
+            Enter Menu
+          </button>
+          <br />
+          <br />
+          <button
+            class="btn btn-primary custom-button custom-button2"
+            @click="display = 'app-game'"
+          >
+            Enter Game
+          </button>
+          <br />
+          <br />
+
+          <input
+            type="text"
+            placeholder="Username"
+            autocomplete="off"
+            class="form-control custom-input"
+          />
+          <br />
+          <input
+            type="text"
+            placeholder="Username"
+            autocomplete="off"
+            class="form-control custom-input2"
+          />
+          <br />
+          <input
+            type="text"
+            placeholder="Username"
+            autocomplete="off"
+            class="form-control custom-input3"
+          />
+          <p class="custom-text">
+            Test 1 font for some long text, like a description of something or
+            some indication
+          </p>
+          <p class="custom-text2">
+            Test 2 font for some long text, like a description of something or
+            some indication
+          </p>
+        </div>
+        <div class="col">
+          <!-- <div class="bg"> -->
+          <button style="font-size:8px" @click="hideTest = !hideTest">
+            Hide test
+          </button>
+          <keep-alive>
+            <transition
+              enter-active-class="animated bounceInUp"
+              leave-active-class="animated bounceOutDown"
+              mode="out-in"
+              appear
+            >
+              <component
+                :is="display"
+                @join-game-id="launchOnlineGame($event)"
+                :username="username"
+                :game-id="onlineGameId"
+              ></component>
+            </transition>
+          </keep-alive>
+          <!-- </div> -->
+        </div>
+      </div>
     </div>
   </div>
 </template>
@@ -41,7 +92,8 @@ export default {
     return {
       display: 'app-menu',
       username: '',
-      onlineGameId: -1
+      onlineGameId: -1,
+      hideTest: false
     };
   },
   components: {
@@ -67,6 +119,69 @@ export default {
 </script>
 
 <style scoped>
+@font-face {
+  font-family: 'GermaniaOne';
+  src: url('./assets/fonts/GermaniaOne-Regular.ttf') format('truetype');
+}
+@font-face {
+  font-family: 'AutourOne';
+  src: url('./assets/fonts/AutourOne-Regular.ttf') format('truetype');
+}
+@font-face {
+  font-family: 'BeyondWonderland';
+  src: url('./assets/fonts/BeyondWonderland.ttf') format('truetype');
+}
+@font-face {
+  font-family: 'MedievalSharp';
+  src: url('./assets/fonts/MedievalSharp.ttf') format('truetype');
+}
+@font-face {
+  font-family: 'OncialePh';
+  src: url('./assets/fonts/OncialePhF01.ttf') format('truetype');
+}
+@font-face {
+  font-family: 'CupAndTalon';
+  src: url('./assets/fonts/CupAndTalon.ttf') format('truetype');
+}
+.test-germania {
+  font-family: GermaniaOne, cursive;
+  font-size: 80px;
+}
+.custom-button {
+  font-family: GermaniaOne, cursive;
+  font-size: 60px;
+  background-color: transparent;
+  color: red;
+  border: none;
+}
+.custom-button2 {
+  font-family: CupAndTalon, cursive;
+  font-size: 60px;
+  font-weight: bold;
+}
+.custom-input {
+  font-family: BeyondWonderland, cursive;
+  font-size: 45px;
+  text-transform: capitalize;
+}
+.custom-input2 {
+  font-family: MedievalSharp, cursive;
+  font-size: 40px;
+  text-transform: capitalize;
+}
+.custom-input3 {
+  font-family: OncialePh, cursive;
+  font-size: 40px;
+  text-transform: capitalize;
+}
+.custom-text {
+  font-family: GermaniaOne, cursive;
+  font-size: 30px;
+}
+.custom-text2 {
+  font-family: AutourOne, cursive;
+  font-size: 30px;
+}
 .bg {
   height: 100%;
   width: auto;