Pretendardは、クロスプラットフォームで製品を提供するとき、そして多言語タイポグラフィでも自然な現代的なフォントです。Interと源ノ角ゴシック、そしてM PLUS 1pに基づいて整えられたPretendardは、読み込み環境で可読性と視覚補正のために追加の作業をする必要はありません。
Pretendardは9種類の太さで提供され、可変フォントにも対応しています。
Pretendardの背景や特徴、OpenType機能などを説明する詳細な話はこちら(韓国語)で確認できます。
特定の環境に適したPretendardを使用するには、以下をご覧ください
- Pretendard JP：日本の環境に適しており、韓国の漢字環境に対応するOpenType機能があります。
- Pretendard Std(英語)：ラテン環境に適しています。
- Pretendard GOV(韓国語)：韓国の公共サービス環境に適しています。
CDNを利用してPretendardを使用することができ、トグルをチェックして基本的に推奨するjsDelivr以外にもcdnjsとUNPKGの中でお好みのCDNを使用することができます。
すべての機能を含むPretendardをWebフォントとして使用するには、下記のコードを使用してください。使用するfont-family名はPretendardです。
<link rel="stylesheet" as="style" crossorigin href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css" />cdnjsおよびUNPKG
<link rel="stylesheet" as="style" crossorigin href="https://cdnjs.cloudflare.com/ajax/libs/pretendard/1.3.9/static/pretendard.min.css" /><link rel="stylesheet" as="style" crossorigin href="https://unpkg.com/pretendard@1.3.9/dist/web/static/pretendard.css" />@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");cdnjsおよびUNPKG
@import url("https://cdnjs.cloudflare.com/ajax/libs/pretendard/1.3.9/static/pretendard.min.css");@import url("https://unpkg.com/pretendard@1.3.9/dist/web/static/pretendard.css");Pretendardは、Webフォントの容量の問題を解決するための方法として、Google Fontsで提供されるNoto Sans JPと同じ方法で動的サブセットを提供します。ページに含まれている文字のみを選択的にダウンロードしてより早くPretendardを表示するには、下記のコードを使用してください。使用するfont-family名はPretendardです。
<link rel="stylesheet" as="style" crossorigin href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard-dynamic-subset.min.css" />cdnjsおよびUNPKG
<link rel="stylesheet" as="style" crossorigin href="https://cdnjs.cloudflare.com/ajax/libs/pretendard/1.3.9/static/pretendard-dynamic-subset.min.css" /><link rel="stylesheet" as="style" crossorigin href="https://unpkg.com/pretendard@1.3.9/dist/web/static/pretendard-dynamic-subset.css" />@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard-dynamic-subset.min.css");cdnjsおよびUNPKG
@import url("https://cdnjs.cloudflare.com/ajax/libs/pretendard/1.3.9/static/pretendard-dynamic-subset.min.css");@import url("https://unpkg.com/pretendard@1.3.9/dist/web/static/pretendard-dynamic-subset.css");従来のダイナミックサブセットより著しく少ない容量で可変Weight属性と共にPretendardを使用できます。 モダンブラウザでより快適にPretendardを使用するには、以下のコードを使用してください。 使用するfont-familyの名前は"Pretendard Variable"です。
<link rel="stylesheet" as="style" crossorigin href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css" />cdnjsおよびUNPKG
<link rel="stylesheet" as="style" crossorigin href="https://cdnjs.cloudflare.com/ajax/libs/pretendard/1.3.9/variable/pretendardvariable-dynamic-subset.min.css" /><link rel="stylesheet" as="style" crossorigin href="https://unpkg.com/pretendard@1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.css" />@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");cdnjsおよびUNPKG
@import url("https://cdnjs.cloudflare.com/ajax/libs/pretendard/1.3.9/variable/pretendardvariable-dynamic-subset.min.css");@import url("https://unpkg.com/pretendard@1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.css");可変weightプロパティを使用するには、下記のコードを使用してください。使用するfont-family名は"Pretendard Variable"です。
<link rel="stylesheet" as="style" crossorigin href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css" />cdnjsおよびUNPKG
<link rel="stylesheet" as="style" crossorigin href="https://cdnjs.cloudflare.com/ajax/libs/pretendard/1.3.9/variable/pretendardvariable.min.css" /><link rel="stylesheet" as="style" crossorigin href="https://unpkg.com/pretendard@1.3.9/dist/web/variable/pretendardvariable.css" />@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css");cdnjsおよびUNPKG
@import url("https://cdnjs.cloudflare.com/ajax/libs/pretendard/1.3.9/variable/pretendardvariable.min.css");@import url("https://unpkg.com/pretendard@1.3.9/dist/web/variable/pretendardvariable.css");システムにできるだけ合わせたいなら、下記のようなfont-family構成をおすすめします。
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;どこでも同じ環境を持ちたければ下記のようなfont-family構成をおすすめします。
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;Pretendardは以下のパッケージマネージャで利用できます。
npm i pretendardyarn add pretendardPretendardはデバイスにインストールしてシステムフォントとして使用できます。
brew tap homebrew/cask-fonts
brew install font-pretendard# configuration.nix
{
fonts.fonts = with pkgs; [
pretendard
];
}yay -S otf-pretendard
yay -S ttf-pretendardInter: Rasmus Andersson
Source Han Sans: Adobe, Google, Sandoll Communications; Jang Soo-young and Kang Joo-yeon
M PLUS 1p: UNDERFOREST DESIGN; 森下浩司
Kil Hyung-jin
PretendardはSIL Open Font Licenseとして配布されています。フォントの単独販売を除くすべての商業行為、修正、再配布が可能です。
Pretendardにコントリビュートしていただきありがとうございます。
@hiddenest: WebフォントサービングとCDNアップデートの自動化、サブセットとダイナミックサブセットの作業、そして可変ダイナミックサブセットの自動化を作業してくださいました。
@leejh10003: Pretendardが使用された例を作成しました。
@black7375: すべてのWebフォントビルド自動化、npmjsおよびYarnにPublishおよびリリースファイル生成自動化、CDN URLでブザーニング改善、monorepo対応、ビルドパフォーマンスの向上、そしてPretendard GOV CDNのドキュメンテーション作業を行ってくださいました。
@victorrica: npmとYarn パッケージの配布を作業しました。
@kms0219kms: すべてのWebフォントCDN配布多重化、ReadmeでのFormattingの改善、Readmeの英語及び日本語文書化を作業してくださいました。
@Gamsake: ビルド自動化を改善しました。
@quiple: 日本語Readme翻訳を改善してくださいました。
@sudosubin: homebrew-cask-fontsとnixにPretendardを追加しました。
解決が必要な場合は、IssuesでIssueを登録してください。