`
+**기본값:** `undefined`
+
-2. 두 번째 파일을 만들어 unifont `provider` 구현을 내보냅니다.
+식별을 위해 사용되는 직렬화 가능한 객체입니다.
- ```ts title="implementation.ts"
- import { defineFontProvider } from "unifont";
+#### `init()`
- export const provider = defineFontProvider("my-provider", async (options, ctx) => {
- // 사용자 정의 글꼴을 가져오거나 정의합니다.
- // ...
- });
- ```
+
- :::tip
-
- unifont 제공자를 만드는 방법에 대해 더 자세히 알아보려면 [unifont 제공자의 소스 코드](https://github.com/unjs/unifont/blob/main/src/providers/)를 확인하세요.
+**타입:** `(context: FontProviderInitContext) => Awaitable`
+**기본값:** `undefined`
+
- :::
+초기화 로직을 수행하는 데 사용되는 선택적 콜백입니다. 컨텍스트에는 캐싱에 유용한 `storage` 객체가 포함되어 있습니다.
-3. 글꼴 구성에 사용자 정의 제공자를 추가합니다.
+#### `listFonts()`
- ```js title="astro.config.mjs" ins="myProvider()"
- import { defineConfig } from "astro/config";
- import { myProvider } from "./provider/config";
+
- export default defineConfig({
- experimental: {
+**타입:** `() => Awaitable`
+**기본값:** `undefined`
+
+
+사용 가능한 글꼴 이름 목록을 반환하는 데 사용되는 선택적 콜백입니다.
+
+### 비공개 레지스트리 지원
+
+다음 예시는 비공개 레지스트리를 위한 글꼴 제공자를 정의합니다.
+
+```ts title="font-provider.ts"
+import type { FontProvider } from "astro";
+import { retrieveFonts, type Fonts } from "./utils.js",
+
+interface Config {
+ token: string;
+}
+
+export function registryFontProvider(config: Config): FontProvider {
+ let data: Fonts = {}
+
+ return {
+ name: "registry",
+ config,
+ init: async () => {
+ data = await retrieveFonts(token);
+ },
+ listFonts: () => {
+ return Object.keys(data);
+ },
+ resolveFont: ({ familyName, ...options }) => {
+ const fonts = data[familyName];
+ if (fonts) {
+ return { fonts };
+ }
+ return undefined;
+ },
+ };
+}
+```
+
+이후 Astro 구성에서 이 글꼴 제공자를 등록할 수 있습니다.
+
+```ts title="astro.config.ts"
+import { defineConfig } from "astro/config";
+import { registryFontProvider } from "./font-provider";
+
+export default defineConfig({
+ experimental: {
fonts: [{
- provider: myProvider(),
- // ...
+ provider: registryFontProvider({
+ token: "..."
+ }),
+ name: "Custom",
+ cssVariable: "--font-custom"
}]
- }
- });
- ```
+ }
+});
+```
-