Add guide to use webfont

yf-dev · Jun 13, 2024 · abcb0ea · abcb0ea
1 parent 5d4fff6
commit abcb0ea
Show file tree

Hide file tree

Showing 5 changed files with 217 additions and 16 deletions.
diff --git a/README.ko.md b/README.ko.md
@@ -16,6 +16,43 @@ INAFFont는 [Ninomae Ina'nis](https://hololive.hololivepro.com/en/talents/ninoma
 
 - INAFFont Meconopsis: [MECONOPSIS MV](https://www.youtube.com/watch?v=XzkNg89Cq9Y)에 사용된 글리프를 바탕으로 만든 폰트입니다.
 
+## 사용 방법
+
+폰트 파일을 다운로드하거나 웹폰트를 사용하여 프로젝트에서 폰트를 사용할 수 있습니다.
+
+### 웹폰트
+
+다음의 CSS를 프로젝트에 포함하여 웹폰트를 사용할 수 있습니다.
+
+```css
+@font-face {
+    font-family: "INAFFont Meconopsis";
+	font-weight: 100;
+    font-display: swap;
+    src:
+        url("https://cdn.jsdelivr.net/gh/yf-dev/inaffont@v0.4/dist/inaffont-meconopsis-thin.woff2") format("woff2"),
+        url("https://cdn.jsdelivr.net/gh/yf-dev/inaffont@v0.4/dist/inaffont-meconopsis-thin.otf") format("opentype");
+}
+
+@font-face {
+    font-family: "INAFFont Meconopsis";
+    font-weight: 400;
+    font-display: swap;
+    src:
+        url("https://cdn.jsdelivr.net/gh/yf-dev/inaffont@v0.4/dist/inaffont-meconopsis-regular.woff2") format("woff2"),
+        url("https://cdn.jsdelivr.net/gh/yf-dev/inaffont@v0.4/dist/inaffont-meconopsis-regular.otf") format("opentype");
+}
+
+@font-face {
+    font-family: "INAFFont Meconopsis";
+    font-weight: 700;
+    font-display: swap;
+    src:
+        url("https://cdn.jsdelivr.net/gh/yf-dev/inaffont@v0.4/dist/inaffont-meconopsis-bold.woff2") format("woff2"),
+        url("https://cdn.jsdelivr.net/gh/yf-dev/inaffont@v0.4/dist/inaffont-meconopsis-bold.otf") format("opentype");
+}
+```
+
 ## Build
 
 ```bash

diff --git a/README.md b/README.md
@@ -16,6 +16,43 @@ Some characters that are not represented in the artwork are approximated to look
 
 - INAFFont Meconopsis: A font created based on the glyphs used in [MECONOPSIS MV](https://www.youtube.com/watch?v=XzkNg89Cq9Y).
 
+## Usage
+
+You can use the font in your projects by downloading the font files or using the webfont.
+
+### Webfont
+
+You can use the webfont by including the following CSS in your project.
+
+```css
+@font-face {
+    font-family: "INAFFont Meconopsis";
+	font-weight: 100;
+    font-display: swap;
+    src:
+        url("https://cdn.jsdelivr.net/gh/yf-dev/inaffont@v0.4/dist/inaffont-meconopsis-thin.woff2") format("woff2"),
+        url("https://cdn.jsdelivr.net/gh/yf-dev/inaffont@v0.4/dist/inaffont-meconopsis-thin.otf") format("opentype");
+}
+
+@font-face {
+    font-family: "INAFFont Meconopsis";
+    font-weight: 400;
+    font-display: swap;
+    src:
+        url("https://cdn.jsdelivr.net/gh/yf-dev/inaffont@v0.4/dist/inaffont-meconopsis-regular.woff2") format("woff2"),
+        url("https://cdn.jsdelivr.net/gh/yf-dev/inaffont@v0.4/dist/inaffont-meconopsis-regular.otf") format("opentype");
+}
+
+@font-face {
+    font-family: "INAFFont Meconopsis";
+    font-weight: 700;
+    font-display: swap;
+    src:
+        url("https://cdn.jsdelivr.net/gh/yf-dev/inaffont@v0.4/dist/inaffont-meconopsis-bold.woff2") format("woff2"),
+        url("https://cdn.jsdelivr.net/gh/yf-dev/inaffont@v0.4/dist/inaffont-meconopsis-bold.otf") format("opentype");
+}
+```
+
 ## Build
 
 ```bash

diff --git a/assets/style.css b/assets/style.css
@@ -2,21 +2,27 @@
 @import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
 
 @font-face {
-    font-family: "INAFFont Meconopsis Thin";
+    font-family: "INAFFont Meconopsis";
+    font-weight: 100;
+    font-display: swap;
     src:
         url("../dist/inaffont-meconopsis-thin.woff2") format("woff2"),
         url("../dist/inaffont-meconopsis-thin.otf") format("opentype");
 }
 
 @font-face {
-    font-family: "INAFFont Meconopsis Regular";
+    font-family: "INAFFont Meconopsis";
+    font-weight: 400;
+    font-display: swap;
     src:
         url("../dist/inaffont-meconopsis-regular.woff2") format("woff2"),
         url("../dist/inaffont-meconopsis-regular.otf") format("opentype");
 }
 
 @font-face {
-    font-family: "INAFFont Meconopsis Bold";
+    font-family: "INAFFont Meconopsis";
+    font-weight: 700;
+    font-display: swap;
     src:
         url("../dist/inaffont-meconopsis-bold.woff2") format("woff2"),
         url("../dist/inaffont-meconopsis-bold.otf") format("opentype");
@@ -133,7 +139,8 @@ a {
 }
 
 h1 {
-    font-family: "INAFFont Meconopsis Bold";
+    font-family: "INAFFont Meconopsis";
+    font-weight: 700;
     font-size: min(3rem, 10vw);
 }
 
@@ -189,16 +196,20 @@ h2 {
     font-weight: 600;
 }
 
+.preview {
+    font-family: "INAFFont Meconopsis";
+}
+
 .preview.thin {
-    font-family: "INAFFont Meconopsis Thin";
+    font-weight: 100;
 }
 
 .preview.regular {
-    font-family: "INAFFont Meconopsis Regular";
+    font-weight: 400;
 }
 
 .preview.bold {
-    font-family: "INAFFont Meconopsis Bold";
+    font-weight: 700;
 }
 
 .demo fieldset {
@@ -224,7 +235,8 @@ h2 {
     min-width: 100%;
     max-width: 100%;
     min-height: 200px;
-    font-family: "INAFFont Meconopsis Regular";
+    font-family: "INAFFont Meconopsis";
+    font-weight: 400;
     font-size: 1.8rem;
     padding: 1rem;
     border: none;
@@ -236,4 +248,9 @@ h2 {
 
 .demo textarea:focus-visible {
     outline: none;
+}
+
+#webfont-code pre {
+    overflow-x: scroll;
+    padding: 0.8rem;
 }
diff --git a/index.html b/index.html
@@ -89,9 +89,9 @@ <h2>Try it</h2>
             <fieldset>
                 <label for="font">Font</label>
                 <select name="font" id="font">
-                    <option value="INAFFont Meconopsis Thin">INAFFont Meconopsis Thin</option>
-                    <option value="INAFFont Meconopsis Regular" selected>INAFFont Meconopsis Regular</option>
-                    <option value="INAFFont Meconopsis Bold">INAFFont Meconopsis Bold</option>
+                    <option value="meconopsis-100">INAFFont Meconopsis Thin</option>
+                    <option value="meconopsis-400" selected>INAFFont Meconopsis Regular</option>
+                    <option value="meconopsis-700">INAFFont Meconopsis Bold</option>
                 </select>
                 <br>
                 <label for="size">Size</label>
@@ -104,14 +104,69 @@ <h2>Try it</h2>
                 const textarea = document.querySelector('textarea');
 
                 font.addEventListener('change', () => {
-                    textarea.style.fontFamily = font.value;
+                    const newValue = font.value.split('-');
+                    if (newValue[0] === 'meconopsis') {
+                        textarea.style.fontFamily = 'INAFFont Meconopsis';
+                    }
+                    textarea.style.fontWeight = newValue[1];
                 });
 
                 size.addEventListener('input', () => {
                     textarea.style.fontSize = `${size.value}rem`;
                 });
             </script>
         </div>
+        <div>
+            <h2>Usage</h2>
+            <p>
+                You can use the font in your projects by downloading the font files or using the webfont.
+            </p>
+        </div>
+        <div>
+            <h3>Webfont</h3>
+            <p>
+                You can use the webfont by including the following CSS in your project.
+            </p>
+            <div id="webfont-code">
+                <pre>
+@font-face {
+    font-family: "INAFFont Meconopsis";
+    font-weight: 100;
+    font-display: swap;
+    src:
+        url("https://cdn.jsdelivr.net/gh/yf-dev/inaffont@v0.4/dist/inaffont-meconopsis-thin.woff2") format("woff2"),
+        url("https://cdn.jsdelivr.net/gh/yf-dev/inaffont@v0.4/dist/inaffont-meconopsis-thin.otf") format("opentype");
+}
+
+@font-face {
+    font-family: "INAFFont Meconopsis";
+    font-weight: 400;
+    font-display: swap;
+    src:
+        url("https://cdn.jsdelivr.net/gh/yf-dev/inaffont@v0.4/dist/inaffont-meconopsis-regular.woff2") format("woff2"),
+        url("https://cdn.jsdelivr.net/gh/yf-dev/inaffont@v0.4/dist/inaffont-meconopsis-regular.otf") format("opentype");
+}
+
+@font-face {
+    font-family: "INAFFont Meconopsis";
+    font-weight: 700;
+    font-display: swap;
+    src:
+        url("https://cdn.jsdelivr.net/gh/yf-dev/inaffont@v0.4/dist/inaffont-meconopsis-bold.woff2") format("woff2"),
+        url("https://cdn.jsdelivr.net/gh/yf-dev/inaffont@v0.4/dist/inaffont-meconopsis-bold.otf") format("opentype");
+}
+                </pre>
+            </div>
+            <script type="module">
+                import { codeToHtml } from 'https://esm.sh/shiki@1.6.4'
+                const webfontCode = document.getElementById('webfont-code');
+                const code = webfontCode.querySelector('pre');
+                webfontCode.innerHTML = await codeToHtml(code.innerHTML.trim(), {
+                  lang: 'css',
+                  theme: 'rose-pine-moon'
+                });
+              </script>
+        </div>
         <div>
             <h2>License</h2>
             <p>

diff --git a/index.ko.html b/index.ko.html
@@ -88,9 +88,9 @@ <h2>사용해보기</h2>
             <fieldset>
                 <label for="font">Font</label>
                 <select name="font" id="font">
-                    <option value="INAFFont Meconopsis Thin">INAFFont Meconopsis Thin</option>
-                    <option value="INAFFont Meconopsis Regular" selected>INAFFont Meconopsis Regular</option>
-                    <option value="INAFFont Meconopsis Bold">INAFFont Meconopsis Bold</option>
+                    <option value="meconopsis-100">INAFFont Meconopsis Thin</option>
+                    <option value="meconopsis-400" selected>INAFFont Meconopsis Regular</option>
+                    <option value="meconopsis-700">INAFFont Meconopsis Bold</option>
                 </select>
                 <br>
                 <label for="size">Size</label>
@@ -103,14 +103,69 @@ <h2>사용해보기</h2>
                 const textarea = document.querySelector('textarea');
 
                 font.addEventListener('change', () => {
-                    textarea.style.fontFamily = font.value;
+                    const newValue = font.value.split('-');
+                    if (newValue[0] === 'meconopsis') {
+                        textarea.style.fontFamily = 'INAFFont Meconopsis';
+                    }
+                    textarea.style.fontWeight = newValue[1];
                 });
 
                 size.addEventListener('input', () => {
                     textarea.style.fontSize = `${size.value}rem`;
                 });
             </script>
         </div>
+        <div>
+            <h2>사용 방법</h2>
+            <p>
+                폰트 파일을 다운로드하거나 웹폰트를 사용하여 프로젝트에서 폰트를 사용할 수 있습니다.
+            </p>
+        </div>
+        <div>
+            <h3>웹폰트</h3>
+            <p>
+                다음의 CSS를 프로젝트에 포함하여 웹폰트를 사용할 수 있습니다.
+            </p>
+            <div id="webfont-code">
+                <pre>
+@font-face {
+    font-family: "INAFFont Meconopsis";
+    font-weight: 100;
+    font-display: swap;
+    src:
+        url("https://cdn.jsdelivr.net/gh/yf-dev/inaffont@v0.4/dist/inaffont-meconopsis-thin.woff2") format("woff2"),
+        url("https://cdn.jsdelivr.net/gh/yf-dev/inaffont@v0.4/dist/inaffont-meconopsis-thin.otf") format("opentype");
+}
+
+@font-face {
+    font-family: "INAFFont Meconopsis";
+    font-weight: 400;
+    font-display: swap;
+    src:
+        url("https://cdn.jsdelivr.net/gh/yf-dev/inaffont@v0.4/dist/inaffont-meconopsis-regular.woff2") format("woff2"),
+        url("https://cdn.jsdelivr.net/gh/yf-dev/inaffont@v0.4/dist/inaffont-meconopsis-regular.otf") format("opentype");
+}
+
+@font-face {
+    font-family: "INAFFont Meconopsis";
+    font-weight: 700;
+    font-display: swap;
+    src:
+        url("https://cdn.jsdelivr.net/gh/yf-dev/inaffont@v0.4/dist/inaffont-meconopsis-bold.woff2") format("woff2"),
+        url("https://cdn.jsdelivr.net/gh/yf-dev/inaffont@v0.4/dist/inaffont-meconopsis-bold.otf") format("opentype");
+}
+                </pre>
+            </div>
+            <script type="module">
+                import { codeToHtml } from 'https://esm.sh/shiki@1.6.4'
+                const webfontCode = document.getElementById('webfont-code');
+                const code = webfontCode.querySelector('pre');
+                webfontCode.innerHTML = await codeToHtml(code.innerHTML.trim(), {
+                  lang: 'css',
+                  theme: 'rose-pine-moon'
+                });
+              </script>
+        </div>
         <div>
             <h2>License</h2>
             <p>