padreug/chateaudufaune.ariege.io
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(hero): trial Eileen Caps Black for the title wordmark

Browse source 
Swap the hero SVG clip text from Berry Rotunda to Eileen Caps Black
(D. Rakowski, freeware, fontspace.com/eileen-caps-font-f2027), self-hosted
as woff2. The face has no circumflex glyph, so the visible wordmark reads
"Chateau" unaccented rather than splicing a fallback-font â into the word;
the screen-reader h1 keeps "Château du Faune". Berry Rotunda stays as the
fallback.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
This commit is contained in:
Padreug 2026-09-20 23:07:23 +02:00
commit 10bad148ea
3 changed files with 15 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

BIN
src/assets/fonts/eileen-caps-black.woff2 Normal file
View file

Binary file not shown.

13
src/style.css
View file

@ -16,6 +16,17 @@
font-display: swap; font-display: swap;
} }
/* Trial hero-title face: "Eileen Caps Black" (D. Rakowski, freeware via
fontspace.com/eileen-caps-font-f2027). Caps-only-ish display face with no
circumflex glyph, so the hero text drops the accent on "Château". */
@font-face {
font-family: 'Eileen Caps Black';
src: url('./assets/fonts/eileen-caps-black.woff2') format('woff2');
font-weight: normal;
font-style: normal;
font-display: swap;
}
:root { :root {
/* Brand palette: deep forest green dominant background, cream /* Brand palette: deep forest green dominant background, cream
foreground, gold (Aboreto/calligraphic spirit) for CTAs and accents. */ foreground, gold (Aboreto/calligraphic spirit) for CTAs and accents. */
@ -99,7 +110,7 @@
'Roboto', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif; 'Roboto', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
--font-display: 'Aboreto', 'Cormorant Garamond', Georgia, serif; --font-display: 'Aboreto', 'Cormorant Garamond', Georgia, serif;
--font-script: 'Tangerine', 'Allura', cursive; --font-script: 'Tangerine', 'Allura', cursive;
--font-title: 'Berry Rotunda', 'UnifrakturMaguntia', serif; --font-title: 'Eileen Caps Black', 'Berry Rotunda', 'UnifrakturMaguntia', serif;
} }
@layer base { @layer base {

6
src/views/HomeView.vue
View file

@ -21,7 +21,7 @@ const tileStyle = {
const { t } = useI18n() const { t } = useI18n()
// The hero title is SVG text (Berry Rotunda) used as a clip over the // The hero title is SVG text (Eileen Caps Black) used as a clip over the
// wordmark video. Measure the rendered glyph box once the font loads and fit // wordmark video. Measure the rendered glyph box once the font loads and fit
// the viewBox/foreignObject to it, so the wordmark fills the SVG width without // the viewBox/foreignObject to it, so the wordmark fills the SVG width without
// clipping regardless of the font's metrics. // clipping regardless of the font's metrics.
@ -127,10 +127,10 @@ const featuredEvents = [
x="550" x="550"
y="122" y="122"
text-anchor="middle" text-anchor="middle"
font-family="'Berry Rotunda', 'UnifrakturMaguntia', serif" font-family="'Eileen Caps Black', 'Berry Rotunda', 'UnifrakturMaguntia', serif"
font-size="120" font-size="120"
> >
Château du Faune Chateau du Faune
</text> </text>
</clipPath> </clipPath>
</defs> </defs>