「夫を成功」へ導く妻の秘訣 座談会

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

    No.2の回答に寄せられた補足コメントです。 補足日時:2020/06/30 03:44
  • HAPPY

    読み込みの流れ
    {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
  • HAPPY

    フォントを読み込みの流れとして
     {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

A 回答 (3件)

1です。

だいたい合ってます。

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

もしも

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

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

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

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


または

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

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

/

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

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


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

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

https://web-designer.cman.jp/other/path/
    • good
    • 1
この回答へのお礼

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

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

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


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

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

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


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

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

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

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

    • good
    • 1
この回答へのお礼

ご回答くださいまして、ありがとうございました。
超ビンゴでした!
長くこの問題に取り組みましたが、いわば呆れめていました。
そうだったのですね1
このサイトの
作業フォルダである、ルートデレクトリ(階層のトプ)名は{kirie}です。
 その中に
1)「css]」レクトリがあり、その中に[style.css]ファイルがあります。
2)[style.css]にsrc: url('SawarabiMincho-Regular.ttf') format("TrueType");
  とした場合!
3)「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>
-------------------------------------------------

お礼日時:2020/06/30 03:40

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人はこんなQ&Aも見ています


このQ&Aを見た人がよく見るQ&A

このカテゴリの人気Q&Aランキング