jamey/berrypod
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects 1 Releases Wiki Activity

feat: add centralized fonts module for dynamic font loading

Browse Source 
Create a DRY Fonts module that centralizes all font definitions and
generates @font-face declarations dynamically based on typography preset.

- Add Fonts module with typography font mappings
- Generate @font-face CSS in CSSGenerator based on active preset
- Add font preload links in shop_root layout for performance
- Remove hardcoded font-face declarations from CSS

This improves font loading performance by only loading fonts for the
active typography preset and preloading critical fonts.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Jamey Greenwood
2026-01-25 00:33:24 +00:00
parent 2bc05097b9
commit 0ade34d994
3 changed files with 246 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
lib/simpleshop_theme_web/components/layouts/shop_root.html.heex
View File

@@ -6,10 +6,14 @@
<meta name="csrf-token" content={get_csrf_token()} />
<meta name="description" content={assigns[:page_description] || @theme_settings.site_description || "Welcome to #{@theme_settings.site_name}"} />
<.live_title><%= assigns[:page_title] || @theme_settings.site_name %></.live_title>
<!-- Preload critical fonts for the current typography preset -->
<%= for preload <- SimpleshopTheme.Theme.Fonts.preload_links(@theme_settings.typography) do %>
<link rel="preload" href={preload.href} as={preload.as} type={preload.type} crossorigin />
<% end %>
<link phx-track-static rel="stylesheet" href={~p"/assets/css/app.css"} />
<script defer phx-track-static type="text/javascript" src={~p"/assets/js/app.js"}>
<script defer phx-track-static src={~p"/assets/js/app.js"}>
</script>
<!-- Generated theme CSS (only active values, not all variants) -->
<!-- Generated theme CSS with @font-face declarations -->
<style id="theme-css"><%= Phoenix.HTML.raw(@generated_css) %></style>
</head>
<body class="h-full">