目次
目次
この文書は、Framerを学ぶ日本のユーザーが日本語資料の不足で直面する困難を解決するために、公式ブログの内容を日本語に翻訳し、実務に役立つ情報を追加したものです。Framerを使用する皆様に少しでもお役に立てれば幸いです。
カスタムフォントを使う理由は？
Framerは基本的に多様なウェブフォントとGoogle・Fontshare連携を提供しています。しかし、ブランド固有のフォントや自作フォントを使用する場合は、‘Custom’タブにアップロードして使用する必要があります。
アップロード＆適用のステップ
プロジェクトにテキストレイヤーを追加
右側のプロパティパネルでフォントセレクタを開く
CustomタブをクリックUploadボタンを押すローカルから
.woff2、.woff、.ttf、.otfファイルを選択アップロード後に‘Custom’タブにフォント項目が追加されます
そのフォントを選択すると、テキストにすぐに適用可能です
Note：.woff2フォーマットがウェブに最適です。ファイルサイズも小さく、読み込みも速いです。
Figmaからインポートしたカスタムフォントの適用のヒント
Figmaで作成したテキストをFramerにインポートすると、カスタムフォントがデフォルトフォントに置き換えられる場合があります。
その場合は、Framerプロジェクト内で該当のカスタムフォントをアップロードし、テキストを選択して再適用する必要があります。
パフォーマンスの最適化＆ライセンス
フォントパフォーマンス:
.woff2ファイルを使用する際、Framerは自動的に最適化（圧縮·サブセッティング·font-display: swap）機能を提供します。フォントライセンス: ウェブサイト用には
Webfont(WOFF/WOFF2)ライセンスが必要です。デスクトップ用（TTF/OTF）より速く、互換性も高いです。
フォントアップロード後のエラー解決のヒント
変形(weight)項目が表示されない場合は:
.woff2ファイルのみがアップロードされているか確認してください。フォントファミリー/スタイル認識ができない場合: フォント名（メタデータ）が実際の名前と一致しているか、複数のスタイルが1つのファミリーにまとめられているか確認する必要があります。（Glyphs等で修正）
この機能はどのようなサービスに必要ですか？
例えば、専門的な企業ブランドページやサイトではフォントスタイルが重要であり、このような場合には手作りまたは購入したフォントを適用することが多いです。このような場合には‘カスタムフォントのアップロード’を通じて、Framer内でさまざまなフォントを自由に使用することができます。
この文章はFramer公式ブログの‘Adding custom fonts’を翻訳・脚色したコンテンツです。
