A single-page showcase website breaking down the typography behind the Loki TV series logo (Marvel / Disney+). Each of the four letters — L, O, K, I — is rendered in a different typeface. This site identifies, displays, and explains every font used.
Live site: loki.allbestfonts.com
| Letter | Font | Foundry |
|---|---|---|
| L | US Angel | Iconian Fonts |
| O | Old English Five | Typographer Mediengestaltung |
| K | ARB 85 Poster Script JAN-39 | Fontry |
| I | Cloister Black | Typographer Mediengestaltung |
- Astro 6.3 — static site generator (zero JS framework overhead)
- Vanilla CSS — scoped styles, CSS custom properties, keyframe animations
- Vanilla JS — glitch font-switching effect in the hero section
- Zero dependencies beyond Astro core
- Dark theme with Loki-green (#00e676) neon accents and scanline overlay
- Hero section with animated logo letters that randomly switch between the four typefaces
- Logo breakdown — interactive cards showing each letter and its font
- Detailed font showcase — full alphabet samples, descriptions, and specimen text for each typeface
- FAQ section with expandable answers (matched to JSON-LD structured data)
- Full responsive design (mobile, tablet, desktop)
- Semantic HTML (
<h1>,<section>,<details>, proper heading hierarchy) - JSON-LD structured data:
WebSite,WebPage,FAQPage,CreativeWork - Open Graph + Twitter Card meta tags
robots.txtandsitemap.xml<link rel="canonical"><meta name="robots" content="index, follow">- Accessible:
sr-onlytext,lang="en", keyboard-navigable FAQ
loki/
├── public/
│ ├── fonts/
│ │ ├── usangel.ttf
│ │ ├── old-english-five.regular.ttf
│ │ ├── ARB 85 Poster Script JAN-39 FRE.ttf
│ │ └── CloisterBlack.ttf
│ ├── favicon.svg
│ ├── robots.txt
│ └── sitemap.xml
├── src/
│ ├── layouts/
│ │ └── Layout.astro # Base layout, meta tags, global styles, @font-face
│ └── pages/
│ └── index.astro # Main page with all sections
├── astro.config.mjs
├── deploy.sh # Build + rsync deploy script
├── package.json
└── tsconfig.json
# Install dependencies
npm install
# Start dev server (http://localhost:4321)
npm run dev
# Build for production (output to dist/)
npm run build
# Preview production build locally
npm run previewThe fonts included in this project are the property of their respective creators:
- US Angel — Iconian Fonts (freeware)
- Old English Five — Typographer Mediengestaltung (free for personal use)
- ARB 85 Poster Script JAN-39 — Fontry
- Cloister Black — Typographer Mediengestaltung (free for personal use)
This website is a font identification and educational resource. Not affiliated with Marvel Studios, Disney, or the Loki TV series.