---
import { AstroFont } from "astro-font";
import theme from "@/config/theme.json";
const { head } = Astro.locals.starlightRoute;
// Get base path from config
const base = import.meta.env.BASE_URL;
// font families
const pf = theme.fonts.font_family.primary;
// @ts-ignore
const sf = theme.fonts.font_family.secondary;
let fontPrimary, fontSecondary;
if (theme.fonts.font_family.primary) {
fontPrimary = theme.fonts.font_family.primary
.replace(/\+/g, " ")
.replace(/:[ital,]*[ital@]*[wght@]*[0-9,;.]+/gi, "");
}
// @ts-ignore
if (theme.fonts.font_family.secondary) {
// @ts-ignore
fontSecondary = theme.fonts.font_family.secondary
.replace(/\+/g, " ")
.replace(/:[ital,]*[ital@]*[wght@]*[0-9,;.]+/gi, "");
}
---
{
head.map(({ tag: Tag, attrs, content }) => {
// Skip default favicon link
if (Tag === "link" && attrs.rel === "shortcut icon") {
return null;
}
return <Tag {...attrs} set:html={content} />;
})
}
<!-- Custom favicon -->
<link rel="shortcut icon" href={`${base}/favicon.svg`} type="image/svg+xml" />
<!-- google font css -->
<AstroFont
config={[
{
src: [],
preload: false,
display: "swap",
name: fontPrimary!,
fallback: "sans-serif",
cssVariable: "font-primary",
googleFontsURL: `https://fonts.googleapis.com/css2?family=${pf}&display=swap`,
},
{
src: [],
preload: false,
display: "swap",
name: fontSecondary!,
fallback: "sans-serif",
cssVariable: "font-secondary",
googleFontsURL: `https://fonts.googleapis.com/css2?family=${sf}&display=swap`,
},
]}
/>