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

feat(home/hero): use Berry Rotunda for the title font

Browse source 
Swap the hero wordmark font from Sketch Gothic School (free for personal
use only) to Berry Rotunda — a public-domain rotunda/insular face that
suits the celtic-knot theme and carries no licensing constraints for
commercial/web use. Self-host as woff2/woff and drop the old font files.
The SVG clip viewBox auto-fits to the new glyph metrics.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Padreug 2026-06-15 20:19:28 +02:00
commit 80597f6e35
6 changed files with 10 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

BIN
src/assets/fonts/berry-rotunda.woff Normal file
View file

Binary file not shown.

BIN
src/assets/fonts/berry-rotunda.woff2 Normal file
View file

Binary file not shown.

BIN
src/assets/fonts/sketch-gothic-school.woff
View file

Binary file not shown.

BIN
src/assets/fonts/sketch-gothic-school.woff2
View file

Binary file not shown.

13
src/style.css
View file

@ -3,13 +3,14 @@
@custom-variant dark (&:is(.dark *));
/* Self-hosted blackletter used for the hero title ("Sketch Gothic School").
Only needed to shape the SVG clip glyphs the hero video shows through. */
/* Self-hosted rotunda used for the hero title ("Berry Rotunda", public
domain). Only needed to shape the SVG clip glyphs the hero video shows
through. */
@font-face {
font-family: 'Sketch Gothic School';
font-family: 'Berry Rotunda';
src:
url('./assets/fonts/sketch-gothic-school.woff2') format('woff2'),
url('./assets/fonts/sketch-gothic-school.woff') format('woff');
url('./assets/fonts/berry-rotunda.woff2') format('woff2'),
url('./assets/fonts/berry-rotunda.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: swap;
@ -98,7 +99,7 @@
'Roboto', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
--font-display: 'Aboreto', 'Cormorant Garamond', Georgia, serif;
--font-script: 'Tangerine', 'Allura', cursive;
--font-blackletter: 'Sketch Gothic School', 'UnifrakturMaguntia', serif;
--font-title: 'Berry Rotunda', 'UnifrakturMaguntia', serif;
}
@layer base {

6
src/views/HomeView.vue
View file

@ -20,7 +20,7 @@ const tileStyle = {
const { t } = useI18n()
// The hero title is SVG text (Sketch Gothic School) used as a clip over the
// The hero title is SVG text (Berry Rotunda) used as a clip over the
// 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
// clipping regardless of the font's metrics.
@ -110,7 +110,7 @@ const featuredEvents = [
{{ t('common.tagline') }}
</p>
<h1 class="sr-only">Château du Faune</h1>
<!-- Hero title: blackletter text clips the forest/cloud video so it
<!-- Hero title: rotunda text clips the forest/cloud video so it
appears to drift through the letters. The SVG scales by viewBox
(always one line); a gold drop-shadow gives the engraved edge. -->
<svg
@ -126,7 +126,7 @@ const featuredEvents = [
x="550"
y="122"
text-anchor="middle"
font-family="'Sketch Gothic School', 'UnifrakturMaguntia', serif"
font-family="'Berry Rotunda', 'UnifrakturMaguntia', serif"
font-size="120"
>
Château du Faune