Google Fonts をTilda ウェブサイトに接続する方法

読む
読む
読む
読む
Google Fontsは、商用を含むあらゆるプロジェクトで使用できるフリーフォントの大規模なライブラリです。この記事では、あなたのウェブサイトで使用するために、このライブラリからフォントを追加する方法について説明します。
Tilda フォントライブラリ内を検索して、Google Fonts からフォントを接続する。
Google Fontsのフォントを接続するには、「サイト設定」→「フォント」に移動し、「詳細設定」ボタンをクリックしてください。
Site Settings > Fonts: the "Advanced settings" button below the font preview slider.
Google Fontsタブをクリックし、"Search in Fonts "ボタンをクリックしてGoogle Fontsのフォントライブラリにアクセスします。
Site Settings → "Fonts" → "Google Fonts": the magnifying glass search icon next to the "HEADING FONT" field with the tooltip "Search in Fonts".
フォントを名前で検索したり、希望するフォントスタイル(セリフ体、サンセリフ体、手書き体、等幅体、ディスプレイフォント(大きな見出しやテキスト要素用の特殊フォント))を選択したりできるパネルが表示されます。
Google Fonts directory page with font preview cards on the right and search, category, and language support filters on the left.

次に「フォントを選択」ボタンをクリックし、見出しとテキストの両方にそのフォントを使用する場合は、オプションでチェックボックスをオンにします。
Font details page: the "Select font" button on the right and font weight checkboxes below.
Google Fontsのリンクフィールドを選択すると、接続に適したリンクが自動的に挿入されます。変更を保存します。これでフォントが接続され、ページ編集時にそのパラメータを制御できるようになります。
The "HEADING FONT" and "BODY TEXT FONT" fields under the "Google Fonts" tab in Site Settings > Fonts.
Google Fontsからのリンク挿入によるフォント接続
fonts.google.comを開き、使用したいフォントを選択する。
フォントを取得」ボタンをクリック→「埋め込みコードを取得」→「リンク」を選択し、必要なスタイルを選択。
On Google Fonts: the "+ Select this style" button next to a font style and the selected styles list in the "Selected family" sidebar on the right.
フォントのリンクをコピーしてください。引用符の中のコードの部分です。

リンクは次のようになります:
https://fonts.googleapis.com/css2?family=Lora:wght@400;500;600;700&display=swap
https://fonts.googleapis.com/css2?family=Lora:wght@400..700
On Google Fonts: the "" radio button and font URL inside the embed code block in the "Selected family" sidebar on the right.
Tilda → Site Settings → Fonts and Colors → Custom settings → Google Fontsにアクセスし、リンクを "CSS Link "フィールドに貼り付ける。
重要:「見出しフォントファミリー名」と「本文フォントファミリー名」には、Google Fontsで呼ばれているフォント名を正確に使用してください。
Site Settings > Fonts: the "Google Fonts" tab with the "CSS LINK", "HEADING FONT", and "BODY TEXT FONT" fields.
ウェブサイトの全ページを公開する。
On the site dashboard: the "PUBLISH ALL PAGES" button at the top.
フォントは接続されている。
Published website page showing a cover block with custom connected fonts applied to the heading and body text.
2種類のGoogleフォントを追加する方法
2種類のフォントの "フォントを取得 "ボタンをクリック→"埋め込みコードを取得"→"リンク "を選択し、希望するフォントのスタイルを選択する。
On Google Fonts: the "+ Select this style" button next to a font weight, and the selected font families in the "Selected families" sidebar on the right.
両方のフォントを含むCSSリンクをコピーする。
Google Fonts: The "" option and the font URL inside the embed code in the "Selected families" sidebar.
そのリンクを Google Fonts タブの CSS link フィールドに貼り付けます。

最初のフォントの完全かつ正確な名前を Headline Font Family Name フィールドに貼り付け、もう一つのフォントの完全かつ正確な名前を Text Font Family Name フィールドに貼り付けます。
Site Settings > Fonts: the "Google Fonts" tab with the "CSS LINK", "HEADING FONT", and "BODY TEXT FONT" fields.
フォント接続の問題
フォントが表示されない最も一般的な原因は、1つのフォントがサイト設定で接続され、別のフォントがテキストエディタツールバーを使ってページに割り当てられていることです。この場合、上部のツールバーにある「書式をクリア」ボタンをクリックして、割り当てられているスタイルをリセットする必要があります。

その他のエラーについてはこちらの記事をご覧ください:
製造元
Tilda