おしえて

レンタルサーバーのグーグルフォントを設置する場合！

解決済

質問者：Campus2
質問日時：2020/06/29 07:01
回答数：3件

https://nelog.jp/download-google-fonts
を参考に
グーグルフォントを、レンタルサーバに設置する場合ですが
CSSに
以下としましたが、全く連動されません！

？
スマホとパソコンで閲覧するとそれぞれ違うフォントで
表示され、そもそも、指定したフォントでは表示されません？
何でしょうか？

@font-face {
font-family: Noto Serif JP;
src: url('MPLUS1p-Light.ttf') format("TrueType");
}
a.evernote-arrow-box-link{
font-family: 'MPLUS1p-Light', cursive;
font-weight:normal;
}

以上よろしくお願いいたします。

共感した 0

ご回答くださいまして、ありがとうございました。
#1さん超ビンゴでした！
長くこの問題に取り組みましたが、いわば呆れめていました。
そうだったのですね１
このサイトの
作業フォルダである、ルートデレクトリ（階層のトプ）名は{kirie}です。
　その中に
１）「css]」レクトリがあり、その中に[style.css]ファイルがあります。
２）[style.css]にsrc: url('SawarabiMincho-Regular.ttf') format("TrueType");
　　とした場合！
３）「css」デレクトリ内にフォントファイルを格納しないといけなかったのですね！

No.2の回答に寄せられた補足コメントです。補足日時：2020/06/30 03:44
通報する
読み込みの流れ
{kirie}のデレクトリには[index.html]等の
個々のファイルのhead情報は以下です。
------------------------------------------------
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>○○</title>
<link href="css/style.css" rel="stylesheet">
</head>
-------------------------------------------------

補足日時：2020/06/30 03:44
通報する
それで！
[index.html]にアクセスすると
そのヘッダー情報は
<link href="css/style.css" rel="stylesheet">
なのでcss情報読みに行きます。この場合
css側は
src: url('SawarabiMincho-Regular.ttf') format("TrueType");
であるから、伝達の道筋からしてフォントファイルは、
cssファイルと同じデレクトリに入れないと情報伝達上繋がらない！

補足日時：2020/06/30 03:45
通報する
フォントを読み込みの流れとして
　｛kirie｝デレクトリ内の[index.html]の<link href="css/style.css" rel="stylesheet">
～cssを読みに行く➡　css　➡　src: url('SawarabiMincho-Regular.ttf') format("TrueType");
とした場合、cssと同じデレク内じゃないとフォントが反映されない。

以上私の推測ですが！？
　本当のところはどうなんでしょうかね？

補足日時：2020/06/30 03:45
通報する

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

No.3ベストアンサー

回答者： wanderer1
回答日時：2020/06/30 03:58

1です。

だいたい合ってます。

ですので記述方法は「cssから見たフォントファイルの位置」ですね。

もしも

ルート
　┣ [css]
　┣ [img]
　┣ [fonts]
　┣

といった感じで構成されているとしたら

url(../fonts/フォントファイル名)

と書くと別のディレクトリでもokということになります。
上記の場合、このcssファイルから見て一つ上の階層に戻って、そこからfontsディレクトリへ...。

または

url(/fontsフォントファイル名)

というふうに書くこともできます。

/

は、ルートから見た階層を表します。

なので、ルートから見てfontsディレクトリの中の...。
という流れになってます。

「絶対パス・相対パス」という指定方法ですね。

軽くググったらここらへんに詳細が載ってましたので、とりあえず貼ってみます。

https://web-designer.cman.jp/other/path/

- 1
- 件

通報する

この回答へのお礼

早々ご回答くださいまして、ありがとうございました。
了解です。

通報する

お礼日時：2020/06/30 04:03

No.2

回答者： naokita
回答日時：2020/06/29 08:59

私はそのフォントの事を良く知りませんし、そのフォント名を設定した事も無いですが、

それだと適用されないでしょう・・・
だって、貴方の記述だと、フォントが２種類あるって事ですよね・・・
まずは、１種類で試しましょう。

１，
font-family: 'MPLUS1p-Light', cursive;
と、
font-family: 'Noto Serif JP', cursive;
どちらでしょう？　フォントを１つに統一する事です。
何故、別々のフォントが、別々に設定されているのでしょうね・・・

・MPLUS1p-Light
・Noto Serif JP
どちらなのでしょうね・・・

２，
src: url('MPLUS1p-Light.ttf') format("TrueType");
の部分で、.ttfやTrueTypeの形式が正しいのかは、そのフォントの名称や形式に関しては私は知りませんが、
url('MPLUS1p-Light.ttf')
と記述した場合には、
MPLUS1p-Light.ttfのファイルを、このHTMLファイルと同じディレクトリに配置されている事が重要です。
もし違うのなら、
MPLUS1p-Light.ttfが配置されている、/ディレクトリ/の指定が必要です。

- 1
- 件

通報する

この回答へのお礼

ご回答くださいまして、ありがとうございました。
今後ともよろしくお願いいたします。

通報する

お礼日時：2020/06/30 03:46

No.1

回答者： wanderer1
回答日時：2020/06/29 08:33

cssファイルとフォントファイルは同じディレクトリに入ってます？

- 1
- 件

通報する

この回答へのお礼

ご回答くださいまして、ありがとうございました。
超ビンゴでした！
長くこの問題に取り組みましたが、いわば呆れめていました。
そうだったのですね１
このサイトの
作業フォルダである、ルートデレクトリ（階層のトプ）名は{kirie}です。
　その中に
１）「css]」レクトリがあり、その中に[style.css]ファイルがあります。
２）[style.css]にsrc: url('SawarabiMincho-Regular.ttf') format("TrueType");
　　とした場合！
３）「css」デレクトリ内にフォントファイルを格納しないといけなかったのですね！
　
読み込みの流れ
{kirie}のデレクトリには[index.html]等の
個々のファイルのhead情報は以下です。
------------------------------------------------
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>○○</title>
<link href="css/style.css" rel="stylesheet">
</head>
-------------------------------------------------