Add fonts selector

canvas.js

@@ -19,6 +19,7 @@ let draw = function() {
   let bgColor = document.querySelector('.colorpicker input[type="radio"][name="bg-color"]:checked').value;
   let fgColor = document.querySelector('.colorpicker input[type="radio"][name="fg-color"]:checked').value;
   let fillText = document.getElementById('step2value').value.trim();
+  let font = document.querySelector('#step3 input[type="radio"]:checked').value;
   let signature = document.getElementById('signature').value.trim();
 
   // Clear canvas
@@ -30,7 +31,7 @@ let draw = function() {
   ctx.fill();
 
   // Write text
-  ctx.font = fontSize + 'px Arial';
+  ctx.font = fontSize + 'px ' + font;
   ctx.fillStyle = 'white';
   ctx.textBaseline = 'top';
   ctx.fillText('Internet,', width * 0.08, height * 0.2);
@@ -67,7 +68,7 @@ let draw = function() {
   ctx.fillText('La Quadrature du Net !', offset, height * 0.9);
 }
 
-let bgColorElems = document.querySelectorAll('.colorpicker input[type="radio"]');
+let bgColorElems = document.querySelectorAll('.colorpicker input[type="radio"], #step3 input[type="radio"]');
 let i;
 
 for (i in bgColorElems) {

index.html

@@ -142,9 +142,17 @@
       <div id="step3">
 	<h2>Choisissez votre police</h2>
 	<div>
-	  <input type="radio" id="radio-font-1" name="font" value="1" /><label for="radio-font-1">Font 1</label>
-	  <input type="radio" id="radio-font-2" name="font" value="2" checked/><label for="radio-font-2">Font 2</label>
-	  <input type="radio" id="radio-font-3" name="font" value="3" /><label for="radio-font-3">Font 3</label>
+	  <input type="radio" id="radio-font-1" name="font" value="bilbo-inc" /><label for="radio-font-1" style="font-family: bilbo-inc">Bilbo inc</label>
+	  <input type="radio" id="radio-font-2" name="font" value="bluu-next" checked/><label for="radio-font-2" style="font-family: bluu-next">Bluu Next</label>
+	  <input type="radio" id="radio-font-3" name="font" value="boeticher" /><label for="radio-font-3" style="font-family: boeticher">Boeticher</label>
+	  <input type="radio" id="radio-font-4" name="font" value="combat" /><label for="radio-font-4" style="font-family: combat">Combat</label>
+	  <input type="radio" id="radio-font-5" name="font" value="gulax" /><label for="radio-font-5" style="font-family: gulax">Gulax</label>
+	  <input type="radio" id="radio-font-6" name="font" value="lineal" /><label for="radio-font-6" style="font-family: lineal">Lineal</label>
+	  <input type="radio" id="radio-font-7" name="font" value="resistance" /><label for="radio-font-7" style="font-family: resistance">Resistance</label>
+	  <input type="radio" id="radio-font-8" name="font" value="savate" /><label for="radio-font-8" style="font-family: savate">Savate</label>
+	  <input type="radio" id="radio-font-9" name="font" value="solid-mirage" /><label for="radio-font-9" style="font-family: solid-mirage">Solid Mirage</label>
+	  <input type="radio" id="radio-font-10" name="font" value="steps-mono" /><label for="radio-font-10" style="font-family: steps-mono">Steps-Mono</label>
+	  <input type="radio" id="radio-font-11" name="font" value="terminal" /><label for="radio-font-11" style="font-family: terminal">Terminal</label>
 	</div>
 	<div class="navButtons">
 	  <a href="#step2" class="prevButton">&lsaquo;</a>

style.css

@@ -188,4 +188,81 @@ textarea, input[type="text"] {
   font-size: 16px;
   border: none;
   resize: none;
+}
+
+@font-face {
+  font-family: 'bilbo-inc';
+  src: url('/fonts/BilboINC.ttf') format('truetype');
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'bluu-next';
+  src: url('/fonts/BluuNext-Bold.otf') format('truetype');
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'boeticher';
+  src: url('/fonts/Boeticher-Roman.otf') format('truetype');
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'combat';
+  src: url('/fonts/Combat.otf') format('truetype');
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'gulax';
+  src: url('/fonts/Gulax.otf') format('truetype');
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'lineal';
+  src: url('/fonts/Lineal.otf') format('truetype');
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'resistance';
+  src: url('/fonts/Resistance.otf') format('truetype');
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'savate';
+  src: url('/fonts/savate-regular.otf') format('truetype');
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'solid-mirage';
+  src: url('/fonts/SolideMirageMono.otf') format('truetype');
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'steps-mono';
+  src: url('/fonts/Steps-Mono.otf') format('truetype');
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'terminal';
+  src: url('/fonts/terminal-grotesque_open.otf') format('truetype');
+  font-weight: normal;
+  font-style: normal;
 }
\ No newline at end of file