目次
目次
このドキュメントは、Framerを学ぶ日本のユーザーが日本語資料の不足で経験する困難を解決するために、公式ブログの内容を日本語に翻訳し、実務で役立つ情報を追加しました。Framerを使用する皆様の助けとなれば幸いです。
Framerで制作された全てのサイトは、ウェブフォントまたはカスタムフォントを使用し、ブラウザがレンダリングする前に必ずロードする必要があります。Framerはテキストのレンダリング速度を向上させるために様々な最適化手法を適用しています。
フォント最適化のヒント
Light(300)からBold(700)までのウェブフォントの太さを使用してください。
この範囲のテキストはfont-display: swapルールのおかげで、ロード中にも隠されることがありません。Google Fontsの使用をお勧めします。
Google Fontsは自動サブセッティングが適用されているため、より速くロードされます。
直接アップロードせず、「Web」タブから選択するのが良いです。
サポートされるフォントタイプ
Google fonts: 「Web」タブで選択可能で、fonts.google.comで提供されています。
Fontshareフォント:「Web」タブで選択可能で、fontshare.comで提供されています。
ユーザーアップロードフォント: ユーザーが直接アップロードしたフォントで、Customタブのフォントからアクセスできます。
標準Inter: 新しいテキストブロックにデフォルトで適用されるフォントで、Google Fontsバージョンとは異なり、イタリック体をサポートしています。
各フォントタイプは出典と使用方法に応じて最適化方式が異なります。
Font-display: swap
このCSSルールは、ウェブフォントがロードされるまでシステムフォントを先に表示し、ユーザーが感じるロード時間を短縮します。
適用対象: Google FontsおよびFontshare Fonts (Serif / Sans-serif, Light~Boldの太さ)、Custom Fonts (全ての太さとスタイル)、Standard Inter (Light~Boldの太さ)
注意事項
Thin(100)などの特殊な太さはシステムフォントと大きく異なるため適用されません。
装飾的(decorative)なフォントなどの非-セリフ系統は代替フォント(例: Arial)との不一致を防ぐため適用されません。
Framerはfont-display: swapが適用されたフォントに対して、システムフォントが実際のフォントとできるだけ似て見えるようにsize-adjustのようなCSSルールを計算・適用します。これにより、ウェブフォントがロードされる際に発生する画面のズレを最小化します。
フォントサブセッティング
多くのフォントがラテン、キリル、ギリシャ文字など様々なアルファベットをサポートします。しかし、サイトが一つの言語のみ使用するならば不要な文字セットを全てダウンロードする必要はありません。
適用対象: Google Fonts, Standard Inter
最適化方式
Google Fontsは自動でサブセッティングを処理します。
FramerはStandard InterフォントをGoogle Fontsと同じ方式でサブセッティングします。
ブラウザはページに実際に使用された文字に基づいて必要なサブセットのみロードし、フォントファイルのサイズを小さくします。WOFF2フォント圧縮
WOFF2フォント圧縮
WOFF2は最新かつ効率的なフォント圧縮形式で、TTFやOTFよりもはるかに容量が小さいです。
適用対象: Google Fonts, Fontshare Fonts, 2023年11月以降にアップロードされたCustom Fonts, Standard Inter
詳細
2023年11月以前にアップロードされたCustom Fontsは既存の形式を維持します。
アップグレードするには、既存のフォントと共に
.woff2ファイルをアップロードしてください。するとFramerが自動でWOFF2バージョンを使用します。自動変換はサイトデザインに影響を与える可能性のある問題を防ぐために適用されません。
このような最適化のおかげで、Framerで制作された全てのサイトはより速いフォント読み込みと安定したパフォーマンスが保証されます。Google Fontsを積極的に活用し、適切な太さと圧縮形式を選択して、ウェブサイトのテキスト体験を改善しましょう。
本記事はFramer公式ブログの『How fonts are optimized in Framer』を翻訳・脚色したコンテンツです。
