/*
* ============================================================
* TILE ATLAS — Font Declarations v3.1
* Pixelcius Studio · 2026-05-01
*
* ROYAL MATCH-grade font system overhaul.
* Patron mobile feedback: "Cinzel/Inter pek oyun hissi vermiyor"
* ──────────────────────────────────────────────────────────────
* PRIMARY ROLES
* --font-display = Lilita One (chunky arcade — heading + buttons + score)
* --font-body = Fredoka (rounded modern — body, ui labels)
* --font-wordmark = Cinzel (brand identity — splash logo only)
* --font-number = Lilita One (premium score numbers)
*
* Cinzel kept for the "Tile Atlas" splash wordmark only — preserves
* the historic/Anatolian brand identity. Inter retained as legacy
* fallback for any unmigrated component but no longer the primary
* body face.
*
* FONT LOADING STRATEGY: Self-Hosted Primary + Google Fallback
* ─────────────────────────────────────────────────────────────
* 1. PRIMARY: @font-face declarations point to self-hosted
* woff2 files in /static/fonts/. These ship inside the
* Capacitor APK/IPA, so they work completely offline.
* 2. FALLBACK (dev only): Google Fonts @import is included
* as a CSS comment below — uncomment it for local browser
* testing only.
*
* PRELOAD HINTS (already added to in app.html):
*
*
*
*
* TURKISH CHARACTER SUPPORT:
* Latin-ext woff2 file (loaded via unicode-range U+0100-024F)
* covers İ ı Ğ ğ Ş ş Ç ç Ö ö Ü ü and the full Latin
* Extended-A/B blocks required for full TR coverage.
* ============================================================
*/
/* ─────────────────────────────────────────────────────────────
GOOGLE FONTS FALLBACK — FOR LOCAL DEV ONLY (commented out)
──────────────────────────────────────────────────────────── */
/* @import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700;900&family=Lilita+One&family=Fredoka:wght@300..700&display=swap'); */
/* ============================================================
LILITA ONE — Display / Heading / Button / Score
Chunky arcade-style game face. Used for:
- Screen titles (h1, h2)
- Button labels (primary CTA)
- Score numbers (large)
- Hero counters / level numbers
Single weight (400 — natively heavy, no other weights needed)
============================================================ */
/* latin (basic ASCII + Latin-1 Supplement) */
@font-face {
font-family: "Lilita One";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("/fonts/LilitaOne-Regular-latin.woff2") format("woff2");
unicode-range:
U+0000-00FF, /* Basic Latin + Latin-1 Supplement */
U+0131, /* dotless i */
U+0152-0153, /* OE / oe */
U+02BB-02BC,
U+02C6, U+02DA, U+02DC,
U+0304, U+0308, U+0329,
U+2000-206F, /* General Punctuation */
U+20AC, /* Euro */
U+2122, /* TM */
U+2191, U+2193,
U+2212, U+2215,
U+FEFF, U+FFFD;
}
/* latin-ext (Turkish coverage: İ Ğ Ş Ç Ö Ü etc.) */
@font-face {
font-family: "Lilita One";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("/fonts/LilitaOne-Regular-latinext.woff2") format("woff2");
unicode-range:
U+0100-02BA, /* Latin Extended-A + Extended-B (TR) */
U+02BD-02C5,
U+02C7-02CC,
U+02CE-02D7,
U+02DD-02FF,
U+0304, U+0308, U+0329,
U+1D00-1DBF,
U+1E00-1E9F,
U+1EF2-1EFF,
U+2020,
U+20A0-20AB,
U+20AD-20C0,
U+2113,
U+2C60-2C7F,
U+A720-A7FF;
}
/* ============================================================
FREDOKA — Body / UI (Variable Font 300–700)
Modern rounded sans-serif. Used for:
- All body copy
- UI labels, badges, captions
- Settings, forms, dialogs
Variable axis: weight 300 (Light) → 700 (Bold)
Single woff2 covers all weights — saves ~5 HTTP roundtrips.
============================================================ */
/* latin (basic) */
@font-face {
font-family: "Fredoka";
font-style: normal;
font-weight: 300 700; /* full variable range */
font-stretch: 100%;
font-display: swap;
src: url("/fonts/Fredoka-Variable-latin.woff2") format("woff2-variations"),
url("/fonts/Fredoka-Variable-latin.woff2") format("woff2");
unicode-range:
U+0000-00FF,
U+0131,
U+0152-0153,
U+02BB-02BC,
U+02C6, U+02DA, U+02DC,
U+0304, U+0308, U+0329,
U+2000-206F,
U+20AC, U+2122,
U+2191, U+2193,
U+2212, U+2215,
U+FEFF, U+FFFD;
}
/* latin-ext (Turkish: İ ı Ğ ğ Ş ş etc.) */
@font-face {
font-family: "Fredoka";
font-style: normal;
font-weight: 300 700;
font-stretch: 100%;
font-display: swap;
src: url("/fonts/Fredoka-Variable-latinext.woff2") format("woff2-variations"),
url("/fonts/Fredoka-Variable-latinext.woff2") format("woff2");
unicode-range:
U+0100-02BA,
U+02BD-02C5,
U+02C7-02CC,
U+02CE-02D7,
U+02DD-02FF,
U+0304, U+0308, U+0329,
U+1D00-1DBF,
U+1E00-1E9F,
U+1EF2-1EFF,
U+2020,
U+20A0-20AB,
U+20AD-20C0,
U+2113,
U+2C60-2C7F,
U+A720-A7FF;
}
/* ============================================================
CINZEL — Wordmark / Brand Identity ONLY
Classical Roman serif. Used EXCLUSIVELY for:
- Splash wordmark "Tile Atlas"
- Brand-identity surfaces (about screen credit line)
No longer the default display font (replaced by Lilita One).
Weights: 400 (Regular), 700 (Bold), 900 (Black)
============================================================ */
@font-face {
font-family: "Cinzel";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("/fonts/Cinzel-Regular.woff2") format("woff2");
unicode-range:
U+0020-007E, /* Basic Latin */
U+00A0-00FF, /* Latin-1 Supplement (ç ö ü etc.) */
U+0100-017E, /* Latin Extended-A (İ ı ş ğ etc.) */
U+0180-024F, /* Latin Extended-B */
U+1E00-1EFF; /* Latin Extended Additional */
}
@font-face {
font-family: "Cinzel";
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("/fonts/Cinzel-Bold.woff2") format("woff2");
unicode-range:
U+0020-007E,
U+00A0-00FF,
U+0100-017E,
U+0180-024F,
U+1E00-1EFF;
}
@font-face {
font-family: "Cinzel";
font-style: normal;
font-weight: 900;
font-display: swap;
src: url("/fonts/Cinzel-Black.woff2") format("woff2");
unicode-range:
U+0020-007E,
U+00A0-00FF,
U+0100-017E,
U+0180-024F,
U+1E00-1EFF;
}
/* ============================================================
INTER — Legacy Fallback ONLY
Retained for any unmigrated UI. New code MUST consume
--font-body (Fredoka) instead. To be removed after full audit.
============================================================ */
@font-face {
font-family: "Inter";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("/fonts/Inter-Regular.woff2") format("woff2");
unicode-range:
U+0020-007E,
U+00A0-00FF,
U+0100-017E,
U+0180-024F,
U+1E00-1EFF,
U+2000-206F,
U+2070-209F,
U+20A0-20CF,
U+2C60-2C7F;
}
@font-face {
font-family: "Inter";
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("/fonts/Inter-Medium.woff2") format("woff2");
unicode-range:
U+0020-007E,
U+00A0-00FF,
U+0100-017E,
U+0180-024F,
U+1E00-1EFF,
U+2000-206F,
U+20A0-20CF;
}
@font-face {
font-family: "Inter";
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("/fonts/Inter-SemiBold.woff2") format("woff2");
unicode-range:
U+0020-007E,
U+00A0-00FF,
U+0100-017E,
U+0180-024F,
U+1E00-1EFF,
U+2000-206F,
U+20A0-20CF;
}
@font-face {
font-family: "Inter";
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("/fonts/Inter-Bold.woff2") format("woff2");
unicode-range:
U+0020-007E,
U+00A0-00FF,
U+0100-017E,
U+0180-024F,
U+1E00-1EFF,
U+2000-206F,
U+20A0-20CF;
}
@font-face {
font-family: "Inter";
font-style: normal;
font-weight: 900;
font-display: swap;
src: url("/fonts/Inter-Black.woff2") format("woff2");
unicode-range:
U+0020-007E,
U+00A0-00FF,
U+0100-017E,
U+0180-024F,
U+1E00-1EFF,
U+2000-206F,
U+20A0-20CF;
}