feat: Add Nerd Fonts support for terminal icons (#140)
Co-authored-by: Jovines <jovines@qq.com>
This commit is contained in:
committed by
GitHub
co-authored by
Jovines
parent
126cc366d7
commit
d56eef8aa6
+60
-1
@@ -15,6 +15,12 @@
|
||||
<link rel="apple-touch-icon" sizes="167x167" href="/apple-touch-icon-167x167.png" />
|
||||
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png" />
|
||||
|
||||
<!-- Preload Nerd Fonts for terminal icon display -->
|
||||
<link rel="preload" href="https://cdn.jsdelivr.net/gh/mshaugh/nerdfont-webfonts@v3.3.0/build/fonts/JetBrainsMonoNerdFont-Regular.woff2"
|
||||
as="font" type="font/woff2" crossorigin="anonymous">
|
||||
<link rel="preload" href="https://cdn.jsdelivr.net/gh/mshaugh/nerdfont-webfonts@v3.3.0/build/fonts/FiraCodeNerdFont-Regular.woff2"
|
||||
as="font" type="font/woff2" crossorigin="anonymous">
|
||||
|
||||
<!-- Web app manifest (data URL to avoid nginx auth issues) -->
|
||||
<script>
|
||||
const baseUrl = location.origin;
|
||||
@@ -119,8 +125,33 @@
|
||||
<meta name="application-name" content="OpenChamber" />
|
||||
<meta name="apple-mobile-web-app-title" content="OpenChamber" />
|
||||
|
||||
<!-- Inline CSS for loading screen (before Tailwind loads) -->
|
||||
<!-- Inline CSS for loading screen and Nerd Fonts (before Tailwind loads) -->
|
||||
<style>
|
||||
/* Nerd Font @font-face declarations for terminal icon support */
|
||||
@font-face {
|
||||
font-family: 'JetBrainsMono Nerd Font';
|
||||
src:
|
||||
local('JetBrainsMono Nerd Font'),
|
||||
url('https://cdn.jsdelivr.net/gh/mshaugh/nerdfont-webfonts@v3.3.0/build/fonts/JetBrainsMonoNerdFont-Regular.woff2') format('woff2'),
|
||||
url('https://cdn.jsdelivr.net/gh/mshaugh/nerdfont-webfonts@v3.3.0/build/fonts/JetBrainsMonoNerdFont-Regular.woff') format('woff');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
unicode-range: U+E000-F8FF, U+F0000-FFFFF;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'FiraCode Nerd Font';
|
||||
src:
|
||||
local('FiraCode Nerd Font'),
|
||||
url('https://cdn.jsdelivr.net/gh/mshaugh/nerdfont-webfonts@v3.3.0/build/fonts/FiraCodeNerdFont-Regular.woff2') format('woff2'),
|
||||
url('https://cdn.jsdelivr.net/gh/mshaugh/nerdfont-webfonts@v3.3.0/build/fonts/FiraCodeNerdFont-Regular.woff') format('woff');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
unicode-range: U+E000-F8FF, U+F0000-FFFFF;
|
||||
}
|
||||
|
||||
:root {
|
||||
--splash-background: #151313;
|
||||
--splash-stroke: white;
|
||||
@@ -239,6 +270,34 @@
|
||||
}, 10000);
|
||||
</script>
|
||||
|
||||
<!-- CSS Font Loading API for reliable Nerd Font loading -->
|
||||
<script>
|
||||
(function() {
|
||||
const fonts = [
|
||||
{
|
||||
name: 'JetBrainsMono Nerd Font',
|
||||
url: 'https://cdn.jsdelivr.net/gh/mshaugh/nerdfont-webfonts@v3.3.0/build/fonts/JetBrainsMonoNerdFont-Regular.woff2'
|
||||
},
|
||||
{
|
||||
name: 'FiraCode Nerd Font',
|
||||
url: 'https://cdn.jsdelivr.net/gh/mshaugh/nerdfont-webfonts@v3.3.0/build/fonts/FiraCodeNerdFont-Regular.woff2'
|
||||
}
|
||||
];
|
||||
|
||||
const fontPromises = fonts.map(font => {
|
||||
const fontFace = new FontFace(font.name, `url(${font.url}) format('woff2')`);
|
||||
document.fonts.add(fontFace);
|
||||
return fontFace.load().catch(err => {
|
||||
console.warn(`Failed to load font: ${font.name}`, err);
|
||||
});
|
||||
});
|
||||
|
||||
Promise.allSettled(fontPromises).then(() => {
|
||||
document.documentElement.classList.add('fonts-loaded');
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
|
||||
<!-- Polyfill for process before loading React -->
|
||||
<script>
|
||||
if (typeof process === 'undefined') {
|
||||
|
||||
Reference in New Issue
Block a user