크로스 플랫폼에서 자연스러운 타이포그래피를 제공합니다.
``` -------------------------------- ### Install Pretendard Font on macOS using Homebrew Source: https://context7.com/orioncactus/pretendard/llms.txt Install Pretendard and its variants (JP, Std) as system fonts on macOS using Homebrew for system-wide availability. ```bash # macOS - Homebrew brew tap homebrew/cask-fonts brew install font-pretendard # Pretendard JP (일본어) brew install font-pretendard-jp # Pretendard Std (라틴) brew install font-pretendard-std ``` -------------------------------- ### Next.js Local Font Setup Source: https://context7.com/orioncactus/pretendard/llms.txt Utilize Next.js's `next/font/local` for optimized Pretendard usage. Ensure `weight` is specified for variable fonts to prevent rendering issues. ```typescript // app/layout.tsx 또는 pages/_app.tsx import localFont from 'next/font/local'; const pretendard = localFont({ src: './fonts/PretendardVariable.woff2', display: 'swap', weight: '45 920', // 가변 폰트 weight 범위 지정 (필수) variable: '--font-pretendard', }); export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( {children} ); } // CSS에서 변수로 사용 // styles/globals.css /* :root { --font-pretendard: 'Pretendard Variable', sans-serif; } body { font-family: var(--font-pretendard); } */ ``` -------------------------------- ### Install Pretendard via Homebrew Cask Fonts Source: https://github.com/orioncactus/pretendard/blob/main/packages/pretendard/README.md Install Pretendard as a system font on macOS using Homebrew. ```bash brew tap homebrew/cask-fonts brew install font-pretendard ``` -------------------------------- ### Use Pretendard via Webfont CDN (@import CSS) Source: https://context7.com/orioncactus/pretendard/llms.txt Import Pretendard into your CSS file using the @import rule. It's recommended to place this at the top of your stylesheet. This example shows jsDelivr, with cdnjs and UNPKG as alternatives. ```css /* jsDelivr CDN (권장) */ @import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css"); /* cdnjs CDN (대안) */ /* @import url("https://cdnjs.cloudflare.com/ajax/libs/pretendard/1.3.9/static/pretendard.min.css"); */ /* UNPKG CDN (대안) */ /* @import url("https://unpkg.com/pretendard@1.3.9/dist/web/static/pretendard.css"); */ /* 시스템 폰트와 조화롭게 사용하는 font-family 설정 */ body { font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Pretendard Variable", Pretendard, Roboto, "Noto Sans KR", "Segoe UI", "Malgun Gothic", sans-serif; } /* 모든 환경에서 동일한 폰트를 우선 적용하는 설정 */ .consistent-font { font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif; } ``` -------------------------------- ### Use Variable Font for Fine-Grained Weight Control Source: https://context7.com/orioncactus/pretendard/llms.txt Utilize the variable font version of Pretendard, which allows for flexible weight adjustments within a single font file. The font family name is 'Pretendard Variable'. This example demonstrates applying various weights and custom weights. ```htmlThin (100)
Regular (400)
Bold (700)
Black (900)
Custom Weight (450)
``` -------------------------------- ### Pretendard JP Dynamic Subset via UNPKG (HTML) Source: https://github.com/orioncactus/pretendard/blob/main/packages/pretendard-jp/README.md Include the Pretendard JP dynamic subset via HTML using UNPKG. This CDN is useful for quick integration and testing. ```html ``` -------------------------------- ### Configure Pretendard JP on NixOS Source: https://github.com/orioncactus/pretendard/blob/main/packages/pretendard-jp/README.md Add Pretendard JP to your system fonts on NixOS by including it in the `fonts.packages` list within your `configuration.nix` file. ```nix # configuration.nix { fonts.packages = with pkgs; [ pretendard-jp ]; } ``` -------------------------------- ### Include Pretendard JP Dynamic Subset via HTML Source: https://github.com/orioncactus/pretendard/blob/main/packages/pretendard-jp/README.md Integrate the dynamic subset of Pretendard JP using HTML for optimized loading. This version offers a smaller file size. ```html ``` -------------------------------- ### Flutter App Theme with Pretendard Source: https://context7.com/orioncactus/pretendard/llms.txt Apply Pretendard as the default font family in your Flutter application's theme. This example demonstrates setting the `fontFamily` in `ThemeData`. ```dart // lib/main.dart import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Pretendard Flutter Demo', theme: ThemeData( primarySwatch: Colors.blue, // 앱 전역에 Pretendard 적용 fontFamily: 'Pretendard', ), home: MyHomePage(), ); } } class MyHomePage extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: Text('Pretendard 예제')), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ // 기본 폰트 패밀리 사용 Text( '안녕하세요, Pretendard!', style: TextStyle(fontSize: 24), ), // 굵기 지정 Text( '굵은 텍스트', style: TextStyle( fontFamily: 'Pretendard', fontWeight: FontWeight.w700, fontSize: 20, ), ), // 가벼운 굵기 Text( '가벼운 텍스트', style: TextStyle( fontFamily: 'Pretendard', fontWeight: FontWeight.w300, fontSize: 18, ), ), ], ), ), ); } } ``` -------------------------------- ### Pretendard JP Dynamic Subset CSS Import via UNPKG Source: https://github.com/orioncactus/pretendard/blob/main/packages/pretendard-jp/README.md Import the Pretendard JP dynamic subset via CSS using UNPKG. This is an alternative to HTML inclusion for the optimized font. ```css @import url("https://unpkg.com/pretendard-jp@1.3.9/dist/web/static/pretendard-jp-dynamic-subset.css"); ``` -------------------------------- ### Use Pretendard JP for Japanese Environments Source: https://context7.com/orioncactus/pretendard/llms.txt Integrate Pretendard JP into an HTML document for Japanese environments. Activate the 'ss05' OpenType feature to use Korean Hanja style. ```html日本語環境に最適化されたフォントです。
한자를 한국 스타일로 표시합니다: 漢字
``` -------------------------------- ### Include Pretendard JP Variable Dynamic Subset via CSS Source: https://github.com/orioncactus/pretendard/blob/main/packages/pretendard-jp/README.md Import the variable dynamic subset of Pretendard JP via CSS for efficient loading and variable weight capabilities in modern browsers. ```css @import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-jp-dynamic-subset.min.css"); ``` -------------------------------- ### Include Optimized Pretendard Std Dynamic Subset via HTML Source: https://github.com/orioncactus/pretendard/blob/main/packages/pretendard-std/README.md Include the dynamic subset version of Pretendard Std via HTML for optimized loading. This version is smaller and loads only the necessary characters. ```html ``` ```html ``` ```html ``` -------------------------------- ### Import Pretendard Variable Font via UNPKG Source: https://github.com/orioncactus/pretendard/blob/main/packages/pretendard/README.md Use this CSS import for the dynamic subset of Pretendard variable font from UNPKG. ```css @import url("https://unpkg.com/pretendard@1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.css"); ``` -------------------------------- ### Recommended font-family Configuration Source: https://github.com/orioncactus/pretendard/blob/main/packages/pretendard-jp/README.md This font-family stack is recommended for a consistent viewing experience across various platforms and browsers. It prioritizes Pretendard JP and includes fallbacks. ```css font-family: "Pretendard JP Variable", "Pretendard JP", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Hiragino Sans", "Apple SD Gothic Neo", Meiryo, "Noto Sans JP", "Noto Sans KR", "Malgun Gothic", Osaka, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif; ``` -------------------------------- ### Pretendard JP Variable Dynamic Subset via UNPKG (HTML) Source: https://github.com/orioncactus/pretendard/blob/main/packages/pretendard-jp/README.md Include the Pretendard JP variable dynamic subset via HTML using UNPKG. This CDN offers the variable font with dynamic subsetting. ```html ``` -------------------------------- ### Include Pretendard JP Dynamic Subset via CSS Source: https://github.com/orioncactus/pretendard/blob/main/packages/pretendard-jp/README.md Use this CSS @import rule to include the dynamic subset of Pretendard JP, which provides optimized performance. ```css @import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard-jp-dynamic-subset.min.css"); ``` -------------------------------- ### Pretendard JP Dynamic Subset CSS Import via cdnjs Source: https://github.com/orioncactus/pretendard/blob/main/packages/pretendard-jp/README.md CSS @import for the Pretendard JP dynamic subset using cdnjs. This method allows for CSS-based inclusion of the optimized font. ```css @import url("https://cdnjs.cloudflare.com/ajax/libs/pretendard-jp/1.3.9/static/pretendard-jp-dynamic-subset.min.css"); ``` -------------------------------- ### Import Pretendard Variable Font via UNPKG Source: https://github.com/orioncactus/pretendard/blob/main/packages/pretendard/README.md Import the Pretendard variable font CSS file from UNPKG into your CSS. ```css @import url("https://unpkg.com/pretendard@1.3.9/dist/web/variable/pretendardvariable.css"); ``` -------------------------------- ### Configure Pretendard Std in NixOS Source: https://github.com/orioncactus/pretendard/blob/main/packages/pretendard-std/README.md Add Pretendard Std to your system's font packages in NixOS by modifying your configuration.nix file. ```nix # configuration.nix { fonts.packages = with pkgs; [ pretendard-std ]; } ``` -------------------------------- ### Include Variable Dynamic Subset Pretendard Std via CSS Source: https://github.com/orioncactus/pretendard/blob/main/packages/pretendard-std/README.md Import the variable dynamic subset of Pretendard Std using CSS. This method is suitable for projects that require variable weight support and optimized loading. ```css @import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-std-dynamic-subset.min.css"); ``` ```css @import url("https://cdnjs.cloudflare.com/ajax/libs/pretendard-std/1.3.9/variable/pretendardvariable-std-dynamic-subset.min.css"); ``` ```css @import url("https://unpkg.com/pretendard-std@1.3.9/dist/web/variable/pretendardvariable-std-dynamic-subset.css"); ``` -------------------------------- ### Include Optimized Pretendard Std Dynamic Subset via CSS Source: https://github.com/orioncactus/pretendard/blob/main/packages/pretendard-std/README.md Import the dynamic subset version of Pretendard Std using CSS for optimized font loading. This is suitable for projects that prefer CSS imports. ```css @import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard-std-dynamic-subset.min.css"); ``` ```css @import url("https://cdnjs.cloudflare.com/ajax/libs/pretendard-std/1.3.9/static/pretendard-std-dynamic-subset.css"); ``` ```css @import url("https://unpkg.com/pretendard-std@1.3.9/dist/web/static/pretendard-std-dynamic-subset.min.css"); ``` -------------------------------- ### Include Pretendard Variable Font via UNPKG in HTML Source: https://github.com/orioncactus/pretendard/blob/main/packages/pretendard/README.md Link to the Pretendard variable font CSS file from UNPKG in your HTML. ```html ``` -------------------------------- ### Configure Pretendard font on NixOS Source: https://github.com/orioncactus/pretendard/blob/main/README.md Add Pretendard to your system fonts configuration in NixOS. ```nix # configuration.nix { fonts.packages = with pkgs; [ pretendard ]; } ``` -------------------------------- ### Pretendard GOV Dynamic Subset Web Font via UNPKG (CSS) Source: https://github.com/orioncactus/pretendard/blob/main/packages/pretendard-gov/README.md Alternative CSS snippet for importing the dynamically subsetted Pretendard GOV web font using UNPKG. Ensure the 'Pretendard GOV' font-family name is used in your CSS. ```css @import url("https://www.unpkg.com/pretendard-gov@1.3.9/dist/web/static/pretendard-gov-dynamic-subset.css"); ``` -------------------------------- ### Import Pretendard Dynamic Subset Web Font (UNPKG) Source: https://github.com/orioncactus/pretendard/blob/main/packages/pretendard/README.md Use this CSS import statement to include the dynamic subset version of Pretendard web font via UNPKG for optimized loading. The font-family name is 'Pretendard'. ```css @import url("https://unpkg.com/pretendard@1.3.9/dist/web/static/pretendard-dynamic-subset.css"); ``` -------------------------------- ### Pretendard JP Dynamic Subset via cdnjs (HTML) Source: https://github.com/orioncactus/pretendard/blob/main/packages/pretendard-jp/README.md HTML inclusion for the Pretendard JP dynamic subset using cdnjs. This CDN provides access to the optimized font subset. ```html ``` -------------------------------- ### Pretendard JP Variable Dynamic Subset CSS Import via UNPKG Source: https://github.com/orioncactus/pretendard/blob/main/packages/pretendard-jp/README.md Import the Pretendard JP variable dynamic subset via CSS using UNPKG. This method is suitable for projects requiring variable fonts and CSS imports. ```css @import url("https://unpkg.com/pretendard-jp@1.3.9/dist/web/variable/pretendardvariable-jp-dynamic-subset.css"); ``` -------------------------------- ### Pretendard JP Variable Font via UNPKG (HTML) Source: https://github.com/orioncactus/pretendard/blob/main/packages/pretendard-jp/README.md Include the Pretendard JP variable font via HTML using UNPKG. This CDN is useful for integrating variable fonts. ```html ``` -------------------------------- ### Include Pretendard JP Full Font via HTML Source: https://github.com/orioncactus/pretendard/blob/main/packages/pretendard-jp/README.md Use this HTML snippet to include the full Pretendard JP font from the project's CDN. Ensure the `as="style"` and `crossorigin` attributes are set correctly. ```html ``` -------------------------------- ### Apply Pretendard Std for Latin Environments Source: https://context7.com/orioncactus/pretendard/llms.txt Use CSS to import and apply the Pretendard Std font, optimized for Latin environments, to your web page. ```css /* Pretendard Std - 라틴 환경 최적화 */ @import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard-std.min.css"); body { font-family: "Pretendard Std Variable", "Pretendard Std", -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", sans-serif; } ``` -------------------------------- ### Pretendard JP Full Font CSS Import via UNPKG Source: https://github.com/orioncactus/pretendard/blob/main/packages/pretendard-jp/README.md Import Pretendard JP full font via CSS using UNPKG. This method is suitable for projects that prefer CSS imports. ```css @import url("https://unpkg.com/pretendard-jp@1.3.9/dist/web/static/pretendard-jp.css"); ``` -------------------------------- ### Pretendard JP Variable Dynamic Subset via cdnjs (HTML) Source: https://github.com/orioncactus/pretendard/blob/main/packages/pretendard-jp/README.md HTML inclusion for the Pretendard JP variable dynamic subset using cdnjs. This option provides variable weight support with optimization. ```html ``` -------------------------------- ### Configure Pretendard Fonts in NixOS Source: https://context7.com/orioncactus/pretendard/llms.txt Add Pretendard font packages, including JP and Std variants, to your NixOS system configuration for system-wide use. ```nix # NixOS - configuration.nix { fonts.packages = with pkgs; [ pretendard pretendard-jp # 일본어 환경용 pretendard-std # 라틴 환경용 ]; } ``` -------------------------------- ### Include Pretendard JP Variable Dynamic Subset via HTML Source: https://github.com/orioncactus/pretendard/blob/main/packages/pretendard-jp/README.md Embed the variable dynamic subset of Pretendard JP using HTML for modern browsers, offering reduced size and variable weight support. ```html ``` -------------------------------- ### Configure Assets in react-native.config.js Source: https://github.com/orioncactus/pretendard/blob/main/examples/react_native_pretendard/README.md Register your font directory in the react-native.config.js file. This step is crucial for the `react-native link` command to find and link your assets. ```javascript module.exports = { assets: ['./assets/fonts'], }; ``` -------------------------------- ### Import Pretendard Variable Font via CDN Source: https://github.com/orioncactus/pretendard/blob/main/packages/pretendard/README.md Import the Pretendard variable font CSS file directly into your CSS. ```css @import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css"); ``` -------------------------------- ### Pretendard JP Variable Dynamic Subset CSS Import via cdnjs Source: https://github.com/orioncactus/pretendard/blob/main/packages/pretendard-jp/README.md CSS @import for the Pretendard JP variable dynamic subset using cdnjs. This enables variable font features with CSS integration. ```css @import url("https://cdnjs.cloudflare.com/ajax/libs/pretendard-jp/1.3.9/variable/pretendardvariable-jp-dynamic-subset.min.css"); ``` -------------------------------- ### Import Pretendard CSS in Bundlers Source: https://context7.com/orioncactus/pretendard/llms.txt Import Pretendard CSS files within bundlers like Webpack or Vite. Supports static, variable, and dynamic subset versions. ```javascript // webpack, Vite 등의 번들러에서 사용 import 'pretendard/dist/web/static/pretendard.css'; // 가변 폰트 사용 import 'pretendard/dist/web/variable/pretendardvariable.css'; // 다이나믹 서브셋 사용 import 'pretendard/dist/web/static/pretendard-dynamic-subset.css'; ``` -------------------------------- ### Use Dynamic Subsets for Faster Loading Source: https://context7.com/orioncactus/pretendard/llms.txt Implement dynamic subsets to load only the characters used on a page, optimizing web font loading times. This method functions similarly to Google Fonts' approach for Korean fonts. ```html이 페이지에서 사용된 글자만 다운로드됩니다. 빠른 로딩 속도를 경험하세요!
``` -------------------------------- ### Include Pretendard GOV Dynamic Subset Web Font (CSS) Source: https://github.com/orioncactus/pretendard/blob/main/packages/pretendard-gov/README.md Use this CSS snippet to import a dynamically subsetted Pretendard GOV web font for optimized loading. Ensure the 'Pretendard GOV' font-family name is used in your CSS. ```css @import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard-gov-dynamic-subset.min.css"); ``` -------------------------------- ### Include Variable Dynamic Subset Pretendard Std via HTML Source: https://github.com/orioncactus/pretendard/blob/main/packages/pretendard-std/README.md Use this HTML snippet to include the variable dynamic subset of Pretendard Std. This offers variable weight support and optimized loading for modern browsers. ```html ``` ```html ``` ```html ``` -------------------------------- ### Import Pretendard Dynamic Subset Web Font (CSS) Source: https://github.com/orioncactus/pretendard/blob/main/packages/pretendard/README.md Use this CSS import statement to include the dynamic subset version of Pretendard web font via jsDelivr for optimized loading. The font-family name is 'Pretendard'. ```css @import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard-dynamic-subset.min.css"); ``` -------------------------------- ### Import Pretendard Variable Font via CDNJS Source: https://github.com/orioncactus/pretendard/blob/main/packages/pretendard/README.md Use this CSS import for the dynamic subset of Pretendard variable font from CDNJS. ```css @import url("https://cdnjs.cloudflare.com/ajax/libs/pretendard/1.3.9/variable/pretendardvariable-dynamic-subset.min.css"); ``` -------------------------------- ### Recommended font-family for consistent environment Source: https://github.com/orioncactus/pretendard/blob/main/packages/pretendard/README.md This font-family stack ensures a uniform appearance regardless of the user's system fonts. ```css font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif; ``` -------------------------------- ### Include Variable Pretendard Std via CSS Source: https://github.com/orioncactus/pretendard/blob/main/packages/pretendard-std/README.md Import the variable version of Pretendard Std using CSS. This allows for dynamic control over font weights in modern browsers. ```css @import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-std.min.css"); ``` ```css @import url("https://cdnjs.cloudflare.com/ajax/libs/pretendard-std/1.3.9/variable/pretendardvariable-std.min.css"); ``` ```css @import url("https://unpkg.com/pretendard-std@1.3.9/dist/web/variable/pretendardvariable-std.css"); ``` -------------------------------- ### Pretendard JP Full Font CSS Import via cdnjs Source: https://github.com/orioncactus/pretendard/blob/main/packages/pretendard-jp/README.md CSS @import for Pretendard JP full font using cdnjs. This offers an alternative CSS-based integration method. ```css @import url("https://cdnjs.cloudflare.com/ajax/libs/pretendard-jp/1.3.9/static/pretendard-jp.min.css"); ``` -------------------------------- ### Pretendard JP Variable Font CSS Import via UNPKG Source: https://github.com/orioncactus/pretendard/blob/main/packages/pretendard-jp/README.md Import the Pretendard JP variable font via CSS using UNPKG. This is an alternative to HTML inclusion for variable font integration. ```css @import url("https://unpkg.com/pretendard-jp@1.3.9/dist/web/variable/pretendardvariable-jp.css"); ``` -------------------------------- ### Configure local Pretendard font in Next.js Source: https://github.com/orioncactus/pretendard/blob/main/packages/pretendard/README.md Use Next.js's local font feature to load Pretendard from local files. Ensure the 'weight' option is specified to prevent rendering issues in WebKit browsers. ```typescript import localFont from 'next/font/local' const pretendard = localFont({ src: './fonts/PretendardVariable.woff2', display: 'swap', weight: '45 920', }) ``` -------------------------------- ### Recommended font-family for system compatibility Source: https://github.com/orioncactus/pretendard/blob/main/packages/pretendard/README.md This font-family stack aims to match system fonts for a consistent look across different operating systems. ```css font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Pretendard Variable", Pretendard, Roboto, "Noto Sans KR", "Segoe UI", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif; ``` -------------------------------- ### Import Pretendard Dynamic Subset Web Font (cdnjs) Source: https://github.com/orioncactus/pretendard/blob/main/packages/pretendard/README.md Use this CSS import statement to include the dynamic subset version of Pretendard web font via cdnjs for optimized loading. The font-family name is 'Pretendard'. ```css @import url("https://cdnjs.cloudflare.com/ajax/libs/pretendard/1.3.9/static/pretendard-dynamic-subset.min.css"); ``` -------------------------------- ### Import Pretendard Variable Dynamic Subset Web Font (CSS) Source: https://github.com/orioncactus/pretendard/blob/main/packages/pretendard/README.md Use this CSS import statement to include the variable dynamic subset version of Pretendard web font via jsDelivr for reduced file size and variable weight support. The font-family name is 'Pretendard Variable'. ```css @import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css"); ``` -------------------------------- ### Include Pretendard Std via HTML Source: https://github.com/orioncactus/pretendard/blob/main/packages/pretendard-std/README.md Use this HTML snippet to include the standard Pretendard Std web font. Ensure the `crossorigin` attribute is set for proper CORS handling. ```html ``` ```html ``` ```html ``` -------------------------------- ### CSS font-family for Consistent Environment Source: https://github.com/orioncactus/pretendard/blob/main/packages/pretendard-std/README.md This font-family configuration is recommended for maintaining an identical font environment across all platforms, prioritizing Pretendard. ```css font-family: "Pretendard Std Variable", "Pretendard Std", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif; ``` -------------------------------- ### Pretendard GOV Dynamic Subset Web Font via UNPKG (HTML) Source: https://github.com/orioncactus/pretendard/blob/main/packages/pretendard-gov/README.md Alternative HTML snippet for including the dynamically subsetted Pretendard GOV web font using UNPKG. Ensure the 'Pretendard GOV' font-family name is used in your CSS. ```html ``` -------------------------------- ### Pretendard JP Full Font via UNPKG Source: https://github.com/orioncactus/pretendard/blob/main/packages/pretendard-jp/README.md HTML snippet to include Pretendard JP full font using UNPKG. This CDN is useful for testing and development. ```html ``` -------------------------------- ### Import Pretendard Web Font (All Features) via UNPKG Source: https://github.com/orioncactus/pretendard/blob/main/packages/pretendard/README.md Use this CSS import statement to include all features of the Pretendard web font via UNPKG. The font-family name is 'Pretendard'. ```css @import url("https://unpkg.com/pretendard@1.3.9/dist/web/static/pretendard.css"); ``` -------------------------------- ### Pretendard GOV Dynamic Subset Web Font via cdnjs (CSS) Source: https://github.com/orioncactus/pretendard/blob/main/packages/pretendard-gov/README.md Alternative CSS snippet for importing the dynamically subsetted Pretendard GOV web font using cdnjs. Ensure the 'Pretendard GOV' font-family name is used in your CSS. ```css @import url("https://cdnjs.cloudflare.com/ajax/libs/pretendard-gov/1.3.9/static/pretendard-gov-dynamic-subset.min.css"); ``` -------------------------------- ### Include Pretendard JP Full Font via CSS Source: https://github.com/orioncactus/pretendard/blob/main/packages/pretendard-jp/README.md Import the full Pretendard JP font using a CSS @import rule. This method is suitable for direct CSS integration. ```css @import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard-jp.min.css"); ``` -------------------------------- ### Pretendard GOV Full Web Font via UNPKG (CSS) Source: https://github.com/orioncactus/pretendard/blob/main/packages/pretendard-gov/README.md Alternative CSS snippet for importing the full Pretendard GOV web font using UNPKG. Ensure the 'Pretendard GOV' font-family name is used in your CSS. ```css @import url("https://www.unpkg.com/pretendard-gov@1.3.9/dist/web/static/pretendard-gov.css"); ``` -------------------------------- ### Include Pretendard Std via CSS Source: https://github.com/orioncactus/pretendard/blob/main/packages/pretendard-std/README.md Use this CSS snippet to import the standard Pretendard Std web font. This method is useful for applying font styles directly within CSS files. ```css @import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard-std.min.css"); ``` ```css @import url("https://cdnjs.cloudflare.com/ajax/libs/pretendard-std/1.3.9/static/pretendard-std.min.css"); ``` ```css @import url("https://unpkg.com/pretendard-std@1.3.9/dist/web/static/pretendard-std.css"); ``` -------------------------------- ### Using Variable Dynamic Subset CSS Source: https://context7.com/orioncactus/pretendard/llms.txt This is the most efficient method for using variable fonts with dynamic subsets in modern browsers. It requires importing the CSS file. ```css /* 가변 다이나믹 서브셋 - 가장 효율적인 방식 */ @import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css"); /* cdnjs */ /* @import url("https://cdnjs.cloudflare.com/ajax/libs/pretendard/1.3.9/variable/pretendardvariable-dynamic-subset.min.css"); */ /* UNPKG */ /* @import url("https://unpkg.com/pretendard@1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.css"); */ body { font-family: "Pretendard Variable", sans-serif; } /* 가변 폰트 기능 활용 */ h1 { font-weight: 700; font-variation-settings: "wght" 700; } p { font-weight: 400; } /* 호버 시 굵기 애니메이션 */ .animated-weight { transition: font-weight 0.3s ease; } .animated-weight:hover { font-weight: 700; } ``` -------------------------------- ### Import Pretendard Variable Font via CDNJS Source: https://github.com/orioncactus/pretendard/blob/main/packages/pretendard/README.md Import the Pretendard variable font CSS file from CDNJS into your CSS. ```css @import url("https://cdnjs.cloudflare.com/ajax/libs/pretendard/1.3.9/variable/pretendardvariable.min.css"); ``` -------------------------------- ### Pretendard JP Variable Font CSS Import via cdnjs Source: https://github.com/orioncactus/pretendard/blob/main/packages/pretendard-jp/README.md CSS @import for the Pretendard JP variable font using cdnjs. This method allows for CSS-based integration of variable fonts. ```css @import url("https://cdnjs.cloudflare.com/ajax/libs/pretendard-jp/1.3.9/variable/pretendardvariable-jp.min.css"); ``` -------------------------------- ### Include Pretendard Variable Font in HTML via CDN Source: https://github.com/orioncactus/pretendard/blob/main/packages/pretendard/README.md Link to the Pretendard variable font CSS file in your HTML for web usage. ```html ``` -------------------------------- ### Include Pretendard GOV Full Web Font (CSS) Source: https://github.com/orioncactus/pretendard/blob/main/packages/pretendard-gov/README.md Use this CSS snippet to import the full Pretendard GOV web font. Ensure the 'Pretendard GOV' font-family name is used in your CSS. ```css @import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard-gov.min.css"); ``` -------------------------------- ### Apply Pretendard GOV for Korean Public Services Source: https://context7.com/orioncactus/pretendard/llms.txt Import and apply the Pretendard GOV font variant using CSS, suitable for Korean public service environments. Includes commented-out options for dynamic subsets and variable fonts. ```css /* Pretendard GOV - 대한민국 공공 서비스용 */ @import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard-gov.min.css"); /* 다이나믹 서브셋 */ /* @import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard-gov-dynamic-subset.min.css"); */ /* 가변 글꼴 */ /* @import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-gov.min.css"); */ body { font-family: "Pretendard GOV Variable", "Pretendard GOV", -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif; } ``` -------------------------------- ### Pretendard JP Full Font via cdnjs Source: https://github.com/orioncactus/pretendard/blob/main/packages/pretendard-jp/README.md Alternative HTML inclusion for Pretendard JP full font using cdnjs. This provides a different CDN source for the font files. ```html ``` -------------------------------- ### Include Variable Pretendard Std via HTML Source: https://github.com/orioncactus/pretendard/blob/main/packages/pretendard-std/README.md Use this HTML snippet to include the variable version of Pretendard Std. This version supports variable weight properties for flexible typography. ```html ``` ```html ``` ```html ``` -------------------------------- ### Include Pretendard JP Variable Font via CSS Source: https://github.com/orioncactus/pretendard/blob/main/packages/pretendard-jp/README.md Use this CSS @import rule to include the Pretendard JP variable font, enabling variable weight styling. ```css @import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-jp.min.css"); ``` -------------------------------- ### Pretendard GOV Dynamic Subset Web Font via cdnjs (HTML) Source: https://github.com/orioncactus/pretendard/blob/main/packages/pretendard-gov/README.md Alternative HTML snippet for including the dynamically subsetted Pretendard GOV web font using cdnjs. Ensure the 'Pretendard GOV' font-family name is used in your CSS. ```html ``` -------------------------------- ### Include Pretendard GOV Dynamic Subset Web Font (HTML) Source: https://github.com/orioncactus/pretendard/blob/main/packages/pretendard-gov/README.md Use this HTML snippet for a dynamically subsetted Pretendard GOV web font for optimized loading. Ensure the 'Pretendard GOV' font-family name is used in your CSS. ```html ``` -------------------------------- ### Configure Pretendard Font in pubspec.yaml Source: https://github.com/orioncactus/pretendard/blob/main/examples/flutter_pretendard/README.md Define the Pretendard font family and its various weights in your Flutter project's pubspec.yaml file. Ensure the font assets are correctly referenced. ```yaml flutter: fonts: - family: Pretendard fonts: - asset: fonts/Pretendard-Black.otf weight: 900 - asset: fonts/Pretendard-ExtraBold.otf weight: 800 - asset: fonts/Pretendard-Bold.otf weight: 700 - asset: fonts/Pretendard-SemiBold.otf weight: 600 - asset: fonts/Pretendard-Medium.otf weight: 500 - asset: fonts/Pretendard-Regular.otf weight: 400 - asset: fonts/Pretendard-Light.otf weight: 300 - asset: fonts/Pretendard-Light.otf weight: 200 - asset: fonts/Pretendard-Thin.otf weight: 100 ``` -------------------------------- ### Pretendard GOV Variable Dynamic Subset Font via UNPKG (CSS) Source: https://github.com/orioncactus/pretendard/blob/main/packages/pretendard-gov/README.md Alternative CSS snippet for importing the variable dynamic subset Pretendard GOV font using UNPKG. The font-family name is 'Pretendard GOV Variable'. ```css @import url("https://www.unpkg.com/pretendard-gov@1.3.9/dist/web/variable/pretendardvariable-gov-dynamic-subset.css"); ```