Update index.html

index.html

@@ -7,8 +7,8 @@
         src: url("/Stencil.otf");
     }
     @font-face {
-        font-family: Rails;
-        src: url("/Rails.otf");
+        font-family: Roboto;
+        src: url("https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu4mxM.woff2");
     }
     @font-face {
         font-family: Aldrich;
@@ -17,10 +17,11 @@
   </style>
   <meta charset="UTF-8">
   <title>Standby</title>
-  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
   <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
   <link rel="manifest" href="manifest.json" />
+  <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto'>
   <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Aldrich'>
   <link rel="stylesheet" href="./style.css">
   <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
@@ -39,7 +40,7 @@
       <div class="font-options">
         <h3>Select Font</h3>
         <div class="font-option" onclick="changeFont('Stencil')">Stencil</div>
-        <div class="font-option" onclick="changeFont('Rails')">Rails</div>
+        <div class="font-option" onclick="changeFont('Roboto')">Roboto</div>
         <div class="font-option" onclick="changeFont('Aldrich')">Aldrich</div>
       </div>
       <div class="toggle-options">
@@ -53,6 +54,10 @@
           <label for="toggleAmPm">Show AM/PM</label>
         </div>
       </div>
+      <div class="spacing-options">
+        <h3>Character Spacing</h3>
+        <input type="range" id="spacingSlider" min="0" max="20" value="7" onchange="adjustSpacing(this.value)">
+      </div>
     </div>
     <button onclick="toggleMenu()">Done</button>
   </div>