Googleフォントをダウンロードし、プロバイダーのサーバーに設置して利用する方法

現在の設定ですが、グーグルフォントがある、グーグルサーバーにアクセスして、その
フォントを借りて表示する設定で閲覧中です。

それで！現在の設定は以下です。
CSS側に設定
.global-nav li{
font-family: 'Noto Serif JP', serif;

HTML側の設定
<title>○○作品集</title>
<link href="https://fonts.googleapis.com/css2?family=Noto+Se … rel="stylesheet">

以上の設定では、パソコンで閲覧すると、それなりのフォントで表示されます。
しかし、スマホ画面では、ゴシック体で表示され、設定したはずのフォント
が反映されずに、見栄が良くなくて困ています。
　なぜ反映されないのかは、まだ分かりません！
それで、グーグルフォントをダウンロードして、ファイル自体を作成中の
フォルダー内い置いて、フォントを使用できることを知り、これを試みて
フォントが反映されれば、これで行こうかと思います。

　そこで、ソースコードを変更しないと使えないので、ネットで検索したところ
[Googleフォントをダウンロードし、自前のサーバーに設置して利用する方法]
しか見当たりませんでした！
https://nelog.jp/download-google-fonts
そのソースは以下です。

CSSファイルで呼び出し
最後にサイトなどで利用しているCSSファイルに以下のようなフォントの呼び出しを記述します。

CSS
@font-face {
font-family: フォント名;
src: url('フォントファイルの場所') format("フォントの種類");
}
WordPressテーマの場合は、style.cssなどでOKだと思います。
--------------------------------------------------------------------
今回Wordpressテーマに設置した場合は、style.cssファイルに以下のように書きました。

Visual Basic
@font-face {
font-family: Boogaloo;
src: url('webfonts/boogaloo/Boogaloo-Regular.ttf') format("truetype");
}
-------------------------------------------------------------------------
あとは、目当てのCSSセレクタを選択して、フォントを設定してやればOKです。

CSS
a.evernote-arrow-box-link{
font-family: 'Boogaloo', cursive;
font-weight:normal;
}
-----------------------------------------------------------------------------
動作確認
このように書くことで、Googleサーバーから、Googleフォントを読み込ま無くても、フォントが適用された状態で表示されるようになりました。

以上は自宅のサーバーに保存して使用する場合です。
私は、ファイルの保存先がプロバイダーサーバーです。
そこで！
自宅サーバーとプロバイダーサーバーの保存先の違いはありますが
ソースコードも変更する必要はありますか？
以上の設定をそのまま使用できるのでしょうか？

　そのまま使用可能でも
そのままそっくりは使えないので、私に環境
に変更するために、手間暇を要します。
まず、手も付ける前に、現行のま使用可能なのか知りたいです。
よろしくお願いいたします。

No.2 ベストアンサー 回答者： naokita 回答日時： 2020/06/04 07:58

#1です。

お礼拝見済みです。

＞[Kosugi]のフォルダ毎作業フォルダに保存したほうがいいのか？
A,
フォルダは無関係ですよ。
中身のファイルだけが最重要です。
画像と同じで、直接ルートに置こうが、奥深いディレクトリにしても、そのパスさえ正しくしないと検証や表示以前の問題になります！

ここで詳しい説明を書いて質問しても、貴方が設定したパスは不明なので、検証もできず、誰も正しい回答が導けないのです・・・

この回答へのお礼

早々ご回答くださいまして、
ありがとうございました。
了解です。
ファイル優先ですね！
パスを間違えないようします。
色々試してみます。

お礼日時：2020/06/04 08:11

No.1 回答者： naokita 回答日時： 2020/06/03 21:22

そのプロバイダーが、ファイルの拡張子を制限していなければ問題ないし、

そのパスさえあっていれば問題ないのでは？

有識者こそ特定のフォントや、ウェブフォントは利用したがらないから、人柱的なマニュアルも少ないようですが、
自分の過去ログを見ると、
@font-face { font-family: 'フォント名'; src: url(font/フォント名.otf) format('opentype'), url(font/フォント名.woff) format('woff');}
ファイルを二種類用意していましたね。
レンタルサーバーで問題なく表示されていますよ。

この回答へのお礼

ご回答くださいまして、ありがとうございました。
助かります。
グーグルフォントのサイトから→気に入ったフォントをダウンロー
ドしたところ[Kosugi.zip]の圧縮ファイルがで、解凍後[Kosugi]の
フォルダができました。その中身は
１）Kosugi-Regular.ttf
２）LICENSE.txt
　２個ファイル作成されました。
この場合、グーグルフォントの保存する場合ですが！
[Kosugi]のフォルダ毎作業フォルダに保存したほうがいいのか？
それとも、フォルダ無しで、ファイルごとばらばらに
上記１）２）を作業フォルダに保存したほうが良いのでしょうか？

お礼日時：2020/06/04 07:35