ヘルプセンター

CSS ファイルを使用してフォントを接続する方法

独自の CSS を介してファイルを接続するには、CSS コードを記述した経験と、ファイルを保存するための独自のサーバーが必要です。

最初に必要なのはWOFFフォントファイルです。
フォントサービス(myfonts.com など)からフォントを購入することで入手できます。購入時に「WEB」ライセンスを選択して、オンラインで使用できるようにします。

フォントファイルをWeb上に配置する
ファイルを配置するために、任意のサーバーまたはCDNサービスを選択できます。主なことは、サーバーが任意のドメインに配布するためにアクセス制御-許可-オリジンCORSをサポートする必要があるということです。(アクセス制御 - 許可 - オリジン: *)

独自のサーバーでファイルをホストする場合
ウェブサイトのルートに.htaccessファイルを作成し、次のコードを追加します。

ヘッダー セット アクセス制御 - 許可オリジン "*"

独自の CSS ファイルを作成し、サーバーまたは CDN サービスに配置します。

CSS ファイルの作成方法

以下は、CSS の記述方法の例です。通常のテキストエディターで作成し、.css 拡張子を付けて保存し、サーバーまたは CDN にアップロードできます。

@font面 {
フォントファミリー: 'ガーベラ';
src: url('http://yoursite.com/gerbera/Gerbera-Medium.woff') format('woff');
フォントの太さ:400;
フォントスタイル:標準;
}
@font面 {
フォントファミリー: 'ガーベラ';
src: url('http://yoursite.com/gerbera/Gerbera-Bold.woff') format('woff');
フォントの太さ:700;
フォントスタイル:太字;
}

CSSの使い方

数字300,400...プロパティには、フォントの太さを示します。完全なリストは次のとおりです。
100 - 薄い
200 - エクストラライト
300 - ライト
400 - 標準
500 - ミディアム
600 - セミボールド
700 - 太字
800 - 余分な太字
900 - ブラック

Web上のブラウザは、Photoshopなどで表示されるフォントとは少し異なります。彼らは通常少し大胆に出てきます。ちょっとしたコツを知っておくと便利な場合があります:たとえば、軽量ファイルを指定して、通常のフォントレンダリングを取得できます。

@font面 {
フォントファミリー: 'Museo Sans';
src: url('http://yoursite.com/museo/MuseoSans-Light.woff') format('woff');
フォントの太さ:300;
フォントスタイル:標準;
}

そしてその逆も同様です。半太字 (600) ファイルがない場合は、代わりに太字を指定します。これにより、半太字の見出しが通常の本文テキストスタイルではなく太字で表示されます。

@font面 {
フォントファミリー: 'Museo Sans';
src: url('http://yoursite.com/museo/MuseoSans-Bold.woff') format('woff');
フォントの太さ:500;
フォントスタイル:太字;
}

フォントファイルが1つしかない場合は、すべてのスタイルに対して指定し、カンマで区切ってリストできます:300,400,500,600,700

Tildaに戻ります。サイト設定→フォントと色→独自のフォント。CSS ファイルへのリンクを貼り付けます。CSS ファイルで指定されているフォントの名前を追加します。

すべてのページを保存して再公開します。

重要: Web サイトを公開する場合にのみ、フォントが表示されます。編集モードまたはプレビューモードでは、サードパーティの CSS ファイルを接続することはできません。つまり、フォントは表示されません (これは安全上の理由から行われます)。

フォントの問題のトラブルシューティング