Add fonts selector

parent 44da5be7
......@@ -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) {
......
......@@ -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>
......
......@@ -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
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment