<!--
Font v77 — 2026-10-14 | Appen: exakt samma avstånd till kanten som övriga appar – 8 px i mobilen, 16 px på dator (appbar.js v646).
Font v76 — 2026-10-14 | Appen: lika stort utrymme på båda sidor om rullisten – innehållet står mitt i fönstret i Windows-appen och Telefonlänk (appbar.js v645).
Font v75 — 2026-10-14 | topbar.js laddas med aktuell version (?v=643) – den gamla adressen (?v=555) kunde ge en gammal toppheader och flikrad från webbläsarens cache, så att ändringar i appläget inte syntes.
Font v74 — 2026-10-14 | Mobil: tecknen i utfällbara grupper (Versaler, Gemener, Siffror, Tecken) med antal klara i varje – ingen vågrät rullista. Sidan hoppar inte ner när nästa tecken väljs. Appen: rubrikkortet och innehållet står mitt i fönstret (appbar.js v643).
Font v73 — 2026-10-13 | Mobil: lugnt rutnät i alla vyer – gemensamma kanter, lika stora knappar (40 px), inga brutna knapptexter och inget som går utanför skärmen.
Font v72 — 2026-10-13 | Mörkt läge: webbläsartillägg som Dark Reader räknar inte längre om sidan (appen har egna mörka färger).
Font v71 — 2026-10-13 | Mobilen: en kolumn igen (inställningarna låg i en egen kolumn bredvid tecknen). Städning: oanvänd kod borttagen.
Font v68 — 2026-10-08 | appbar.js och topbar.js v552 (inget ljust blink i mörkt läge i appen).
Font v67 — 2026-10-08 | Panelerna minns senast valda läge (sparas tyst på kontot när man är inloggad); topbar.js ?v=550.
Font v65 — 2026-10-04 | topbar.js ?v=507 (ny kakbanner).
Font v64 — 2026-10-04 | topbar.js ?v=482.
Font v63 — 2026-10-04 | topbar.js ?v=481.
Font v62 — 2026-10-04 | topbar.js ?v=467.
Font v61 — 2026-10-04 | topbar.js ?v=466 (egen kakbanner).
Font v60 — 2026-10-04 | topbar.js ?v=465.
Font v59 — 2026-10-04 | topbar.js ?v=464 (toppheadern ritas direkt även första gången i appen).
Font v58 — 2026-10-04 | topbar.js ?v=463.
Font v57 — 2026-10-04 | topbar.js ?v=462.
Font v56 — 2026-10-04 | topbar.js ?v=461.
Font v55 — 2026-10-04 | topbar.js ?v=460 (kakbannern överst).
Font v54 — 2026-10-04 | topbar.js ?v=459 (kakbannern visas även i appen).
Font v53 — 2026-10-04 | Fäll ihop/ut-knapparna hoppar inte.
Font v52 — 2026-10-04 | Ikonerna mitt i den hopfällda panelen.
Font v51 — 2026-10-04 | Panelknappen syns även i ikonlisten och fäller ut rubrikerna.
Font v50 — 2026-10-04 | Panelerna: ikonlist till höger tills något fälls ut (rubriken kommer då), vänstra verktygen kan fällas ihop till en ikon.
Font v49 — 2026-10-04 | index.html (den sida som visas) är nu lika med app.html – panelen till höger hopfälld vid start.
Font v48 — 2026-10-04 | Förhandsvisning och Inställningar till höger är hopfällda vid start (font.css ?v=5).
Font v47 — 2026-10-04 | topbar.js ?v=458 (Gäst öppnar inloggningsrutan).
Font v46 — 2026-10-04 | topbar.js ?v=457.
Font v45 — 2026-10-04 | topbar.js ?v=456 (header.js v456: samma inloggningsruta som webbplatsen, Välj app visar appen man använder).
Font v44 — 2026-10-04 | topbar.js ?v=455 (toppheadern ritas direkt, sidan hoppar inte).
Font v43 — 2026-10-03 | datoden-ui.css v420 (nytt mörkt läge).
Font v42 — 2026-10-03 | datoden-ui.css v419 (toppheadern i mellanbredder).
Font v41 — 2026-10-03 | datoden-ui.css v418 (toppheadern på smala skärmar).
Font v40 — 2026-10-02 | appbar.js v404 (appskalet: flikraden ligger still).
Font v39 — 2026-10-02 | appbar.js i head (flikraden i appläget ligger still vid sidbyten).
Font v38 — 2026-10-02 | topbar.js ?v=402 (flikraden laddas direkt).
Font v37 — 2026-10-02 | topbar.js ?v=401.
Font v36 — 2026-10-02 | topbar.js ?v=400.
Font v35 — 2026-10-02 | topbar.js ?v=399.
Font v34 — 2026-10-02 | topbar.js ?v=398 (appläge med flikrad).
Font v33 — 2026-10-02 | Ikonfilen med Vektors ikoner.
Font v32 — 2026-10-02 | Ikonfilen med Bilds ikoner.
Font v7 — 2026-09-30 | Engelska texter i appen (namn, exempel, hjälplinjer, teckengrupper).
Font v6 — 2026-09-30 | topbar.js ?v=307 (översättningar med mönster).
Font v5 — 2026-09-30 | Uppgradera → Abonnemang; aktivt pass = ingen gräns.
Font v4 — 2026-09-30 | Spara projekt visas först efter Tillämpa.
Font v3 — 2026-09-30 | Tillämpa (räknas mot gratisgränsen) och förhandsvisning med Ladda ner font / Fortsätt redigera, som i PDF.
Font v2 — 2026-09-30 | Gratisgräns: 3 nedladdningar per timme, sedan väntan (nedräkning) eller uppgradera.
Font v1 — 2026-09-30 | Ny app: skapa egna typsnitt. Skriv tecknen på en pekskärm (Skriv) eller rita dem med verktyg (Rita), förhandsvisa och ladda ner som .ttf. Allt i webbläsaren.
-->
<!doctype html>
<html lang="sv" class="datoden-ui">
<head>
  <meta charset="utf-8">
  <link rel="icon" href="https://datoden.se/?datoden_route=favicon&amp;mode=light" data-datoden-favicon-light="https://datoden.se/?datoden_route=favicon&amp;mode=light" data-datoden-favicon-dark="https://datoden.se/?datoden_route=favicon&amp;mode=dark">
  <script>/* Datoden: färgläget sätts innan sidan målas, så att den inte blinkar till i systemets läge. */(function(){try{var d=document.documentElement,v="";if(d.getAttribute("data-datoden-guest")==="true"){var r=sessionStorage.getItem("datoden-guest:font:v1:theme");if(r)v=JSON.parse(r)}else{var m=document.cookie.match(/(?:^|; )datoden_color_preference=([^;]*)/);if(m)v=decodeURIComponent(m[1])}if(!/^(system|light|dark)$/.test(v))v="system";var k=v==="dark"||(v==="system"&&window.matchMedia&&matchMedia("(prefers-color-scheme: dark)").matches);d.setAttribute("data-datoden-theme",v);d.setAttribute("data-theme",k?"dark":"light");d.classList.add(k?"datoden-theme-dark":"datoden-theme-light");var ic=document.querySelector("link[data-datoden-favicon-dark]");if(ic)ic.href=k?ic.getAttribute("data-datoden-favicon-dark"):ic.getAttribute("data-datoden-favicon-light")}catch(e){}})();</script>
  <script>/* Datoden: färgtema (Login 387) sätts innan sidan målas; "-bg" färgar även bakgrunderna. */(function(){try{var m=document.cookie.match(/(?:^|;\s*)datoden_palette=([a-z-]+)/),v=m?m[1]:"";if(!v)try{v=localStorage.getItem("datoden-palette")||""}catch(e){}var k=v.replace(/-bg$/,""),d=document.documentElement;if(/^(hav|skog|lavendel|solnedgang|hallon|grafit|kontrast)$/.test(k))d.setAttribute("data-datoden-palette",k);if(/^(standard|hav|skog|lavendel|solnedgang|hallon|grafit|kontrast)-bg$/.test(v))d.setAttribute("data-datoden-bg","1")}catch(e){}})();</script>
  <meta name="viewport" content="width=device-width,initial-scale=1"><meta name="darkreader-lock">
  <title>Font – Datoden</title>
  <meta name="description" content="Skapa ditt eget typsnitt gratis: skriv bokstäverna med fingret eller pennan, eller rita dem, och ladda ner fonten som TTF.">
  <link rel="stylesheet" href="https://datoden.se/konto/assets/css/datoden-ui.css?v=420">
  <link rel="stylesheet" href="https://datoden.se/konto/assets/css/theme.css?v=180">
  <link rel="stylesheet" href="https://datoden.se/konto/assets/css/sub-datoden.css?v=212">
  <link rel="stylesheet" href="https://datoden.se/konto/assets/css/app-update.css?v=269">
  <link rel="stylesheet" href="assets/css/font.css?v=74">
  <script src="https://datoden.se/konto/assets/js/topbar.js?v=646" data-app="font"></script>
  <script src="https://datoden.se/konto/assets/js/appbar.js?v=646"></script> <!-- appläget: flikraden finns från första ritningen -->
</head>
<body>
<div id="quotaInfo" class="font-quota" hidden><span id="quotaText"></span><a id="quotaUpgrade" class="font-quota-link" href="#">Uppgradera för obegränsat</a></div>
<header id="pageHeader">
  <div class="header-brand"><div class="header-copy"><h1 id="headerTitle">Font</h1><p id="headerSubtitle">Font · Min handstil</p></div></div>
  <div class="actions du-toolbar">
    <button type="button" id="newProject" class="du-btn"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><use href="assets/media/icons.svg?v=1#icon-plus"></use></svg><span>Ny font</span></button>
    <button type="button" id="openProject" class="du-btn"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><use href="assets/media/icons.svg?v=1#icon-upload"></use></svg><span>Öppna projekt</span></button>
    <button type="button" id="saveProject" class="du-btn" hidden><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><use href="assets/media/icons.svg?v=1#icon-save"></use></svg><span>Spara projekt</span></button>
    <button type="button" id="applyBtn" class="du-btn du-btn--primary" disabled title="Tillämpa och se resultatet (Ctrl+S)"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><use href="assets/media/icons.svg?v=1#icon-apply"></use></svg><span>Tillämpa</span></button>
    <button type="button" id="continueBtn" class="du-btn" hidden><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><use href="assets/media/icons.svg?v=1#icon-edit"></use></svg><span>Fortsätt redigera</span></button>
    <button type="button" id="downloadFont" class="du-btn du-btn--primary" hidden><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><use href="assets/media/icons.svg?v=1#icon-download"></use></svg><span>Ladda ner font</span></button>
    <input type="file" id="projectFile" accept=".json,application/json" hidden>
  </div>
</header>
<main id="workspace" class="font-workspace">
  <aside class="font-card font-glyphs" aria-label="Tecken">
    <div class="font-card-head"><h2>Tecken</h2><span id="fontCount" class="font-muted"></span></div>
    <div id="fontTiles" class="font-tiles"></div>
  </aside>
  <section class="font-card font-editor" aria-label="Rityta">
    <div class="font-editor-top">
      <div class="du-segmented font-mode" role="group" aria-label="Läge">
        <button type="button" data-mode="write" aria-pressed="false"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><use href="assets/media/icons.svg?v=1#icon-pen"></use></svg><span>Skriv</span></button>
        <button type="button" data-mode="draw" aria-pressed="true"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><use href="assets/media/icons.svg?v=1#icon-shapes"></use></svg><span>Rita</span></button>
      </div>
      <div class="font-current"><button type="button" id="prevChar" class="du-btn du-btn--icon" aria-label="Föregående tecken" title="Föregående tecken (←)"><span class="font-arrow">‹</span></button>
        <strong id="currentChar" translate="no" data-i18n-skip>A</strong><span id="currentCode" class="font-muted" translate="no">U+0041</span>
        <button type="button" id="nextChar" class="du-btn du-btn--icon" aria-label="Nästa tecken" title="Nästa tecken (→)"><span class="font-arrow">›</span></button></div>
    </div>
    <div id="drawTools" class="font-tools">
      <div class="du-toolbar" role="group" aria-label="Verktyg">
        <button type="button" class="du-btn du-btn--icon" data-tool="pen" title="Penna (P)" aria-label="Penna"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><use href="assets/media/icons.svg?v=1#icon-pen"></use></svg></button>
        <button type="button" class="du-btn du-btn--icon" data-tool="line" title="Linje (L)" aria-label="Linje"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><use href="assets/media/icons.svg?v=1#icon-line"></use></svg></button>
        <button type="button" class="du-btn du-btn--icon" data-tool="rect" title="Rektangel (R)" aria-label="Rektangel"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><use href="assets/media/icons.svg?v=1#icon-rect"></use></svg></button>
        <button type="button" class="du-btn du-btn--icon" data-tool="ellipse" title="Ellips (E)" aria-label="Ellips"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><use href="assets/media/icons.svg?v=1#icon-ellipse"></use></svg></button>
        <button type="button" class="du-btn du-btn--icon" data-tool="eraser" title="Sudda (S)" aria-label="Sudda"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><use href="assets/media/icons.svg?v=1#icon-eraser"></use></svg></button>
      </div>
      <button type="button" id="undoBtn" class="du-btn" disabled><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><use href="assets/media/icons.svg?v=1#icon-undo"></use></svg><span>Ångra</span></button>
      <button type="button" id="redoBtn" class="du-btn du-btn--icon" disabled aria-label="Gör om" title="Gör om"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><use href="assets/media/icons.svg?v=1#icon-redo"></use></svg></button>
      <button type="button" id="clearBtn" class="du-btn"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><use href="assets/media/icons.svg?v=1#icon-remove"></use></svg><span>Rensa</span></button>
      <select id="copyFrom" class="du-select" aria-label="Kopiera från ett annat tecken"></select>
    </div>
    <div id="writeTools" class="font-tools" hidden>
      <p class="font-write-help">Skriv <strong id="writePrompt" translate="no" data-i18n-skip>A</strong> i rutan med fingret eller pennan.</p>
      <button type="button" id="writeUndo" class="du-btn"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><use href="assets/media/icons.svg?v=1#icon-undo"></use></svg><span>Ångra</span></button>
      <button type="button" id="writeClear" class="du-btn"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><use href="assets/media/icons.svg?v=1#icon-remove"></use></svg><span>Rensa</span></button>
      <button type="button" id="writeSkip" class="du-btn">Hoppa över</button>
      <button type="button" id="writeNext" class="du-btn du-btn--primary">Nästa<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><use href="assets/media/icons.svg?v=1#icon-arrow-right"></use></svg></button>
      <label class="font-check"><input type="checkbox" id="autoNext" checked> Gå vidare automatiskt</label>
    </div>
    <div class="font-canvas-wrap"><canvas id="glyphCanvas" aria-label="Rityta för tecknet"></canvas></div>
    <div class="font-editor-foot">
      <label class="font-range">Tjocklek <input type="range" id="penWidth" min="10" max="180" step="2" value="70"> <output id="penWidthOut">70</output></label>
      <label class="font-check"><input type="checkbox" id="showGuide" checked> Visa förlaga</label>
    </div>
  </section>
  <section class="font-card font-side" aria-label="Förhandsvisning och inställningar">
    <details class="font-sec"><summary><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><use href="assets/media/icons.svg?v=1#icon-text"></use></svg><h2>Förhandsvisning</h2></summary><div class="font-sec-body">
    <input type="text" id="previewInput" class="du-input" value="Hej! Min egen font 123" aria-label="Text att förhandsvisa">
    <div id="previewText" class="font-preview" translate="no" data-i18n-skip>Hej! Min egen font 123</div>
    <label class="font-range">Storlek <input type="range" id="previewSize" min="20" max="120" value="48"></label>
    <p id="previewNote" class="font-muted"></p>
    </div></details>
    <details class="font-sec"><summary><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><use href="assets/media/icons.svg?v=1#icon-settings-sliders"></use></svg><h2>Inställningar</h2></summary><div class="font-sec-body">
    <label class="font-field">Fontens namn<input type="text" id="fontName" class="du-input" maxlength="60"></label>
    <label class="font-field">Luft runt tecknen<input type="number" id="fontBearing" class="du-input" min="0" max="300" step="10"></label>
    <label class="font-field">Mellanslagets bredd<input type="number" id="fontSpace" class="du-input" min="50" max="1000" step="10"></label>
    <p class="font-muted">Allt sparas automatiskt i den här webbläsaren. Spara projektet som fil för att fortsätta på en annan dator. Inget laddas upp.</p>
    </div></details>
  </section>
</main>
<section id="previewView" class="font-preview-view" hidden aria-label="Förhandsvisning">
  <div id="appliedNote" class="font-card font-preview-note" role="status"></div>
  <div class="font-card font-specimen">
    <p class="font-specimen-l" data-specimen id="specimenText" translate="no" data-i18n-skip></p>
    <p class="font-specimen-m" data-specimen translate="no" data-i18n-skip>Det var en gång en liten font som ville bli skriven.</p>
    <p class="font-specimen-s" data-specimen translate="no" data-i18n-skip>ABCDEFGHIJKLMNOPQRSTUVWXYZÅÄÖ abcdefghijklmnopqrstuvwxyzåäö 0123456789</p>
    <h3>Tecknen i din font</h3>
    <p class="font-specimen-chars" data-specimen id="specimenChars" translate="no" data-i18n-skip></p>
  </div>
</section>
<dialog id="quotaDialog" class="du-dialog font-dialog" aria-labelledby="quotaDialogTitle">
  <button type="button" class="du-close" data-close aria-label="Stäng" title="Stäng"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><use href="assets/media/icons.svg?v=1#icon-close"></use></svg></button>
  <div class="font-dialog-body">
  <h2 id="quotaDialogTitle">Din gräns är nådd</h2>
  <p id="quotaDialogText"></p>
  <p class="font-countdown" aria-live="off"><span>Nya tillämpningar om</span> <strong data-countdown>60:00</strong></p>
  <p class="font-muted">Det du har ritat finns kvar och sparas i webbläsaren.</p>
  <div class="font-dialog-actions"><button type="button" class="du-btn" data-close>Vänta</button><a id="quotaDialogUpgrade" class="du-btn du-btn--primary" href="#">Uppgradera – obegränsat antal</a></div>
  </div>
</dialog>
<div id="fontStatus" class="font-status" role="status" hidden></div>
<script src="assets/js/ttf.js?v=1"></script>
<script src="assets/js/font-app.js?v=74"></script>
</body>
</html>