ヘルプセンター

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

独自のCSSでファイルを接続するには、CSSコードを書く経験と、ファイルを保存する独自のサーバーが必要です。

フォントは、myfonts.comなどのフォントサービスから購入することができます。購入の際には、オンラインで使用できるように「WEB」ライセンスを選択してください。

フォントファイルをウェブ上に配置する
ファイルの配置には、どのサーバーやCDNサービスを選んでもかまいません。主な点は、どのドメインにも配布できるように、サーバーがAccess-Control-Allow-Origin CORSをサポートしていることです。(Access-Control-Allow-Origin: *)

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

<FilesMatch "\.(ttf|otf|eot|woff)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>

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

CSSファイルの作成方法

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

@font-face {
font-family: 'Gerbera';
src: url('http://yoursite.com/gerbera/Gerbera-Medium.woff') format('woff');
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: 'Gerbera';
src: url('http://yoursite.com/gerbera/Gerbera-Bold.woff') format('woff');
font-weight: 700;
font-style: bold;
}

CSSの使い方

The numbers 300,400... in the font-weight property indicate the weight of the font. Here is the complete list:
100 - thin
200 - extra light
300 - light
400 - normal
500 - medium
600 - semibold
700 - bold
800 - extra bold
900 - black

Browsers on the web display fonts slightly differently than they might look in, say, Photoshop. They usually come out a little bolder. Sometimes it's helpful to know the little tricks: you can specify, for example, a Light weight file to get a Normal font rendering.

@font-face {
font-family: 'Museo Sans';
src: url('http://yoursite.com/museo/MuseoSans-Light.woff') format('woff');
font-weight: 300;
font-style: normal;
}

And vice versa. If you don't have a Semi-bold (600) file, specify Bold instead. That way, semi-bold headings will be displayed in bold instead of the regular body text style.

@font-face {
font-family: 'Museo Sans';
src: url('http://yoursite.com/museo/MuseoSans-Bold.woff') format('woff');
font-weight: 500;
font-style: bold;
}

If you only have one font file, you can specify it for all styles, listing them separated by commas: 300,400,500,600,700

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

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

重要：あなたのフォントが表示されるのは、ウェブサイトを公開するときだけです。編集モードやプレビューモードでは、サードパーティのCSSファイルを接続することはできず、あなたのフォントは表示されません（これは安全上の理由からです）。

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