Q&A
提示のコードは「webフォント」の設定です。
ローカルフォントの指定の場合と、サーバー上のwebフォントの指定での、プロパティを見直してみてください。
自分のローカルにあるフォントを使用したく以下のサイトを参考にHTMLを作成しましt。
Softel Inc.
【css】Webフォント、ローカルフォントの指定方法
html
1<!DOCTYPE html> 2<html lang="en" dir="ltr"> 3 4<head> 5 <meta charset="utf-8"> 6 <title>Characters</title> 7 <style> 8 @font-face { 9 font-family: 'MyFont'; 10 src: url(/Users/myname/Downloads/GABRWFFR.TTF); 11 } 12 13 body { 14 font-family: MyFont; 15 } 16 </style> 17</head> 18 19<body> 20 <div class="container"> 21 <h2 class="MyFont">text</h2> 22 </div> 23 24</body> 25 26</html>
このパスに関してはファイルをターミナルにドラッグしてコピーアンドペーストをしたので
間違い無いです。
どこが問題か教えていただきたいです。
ありがとうございます。
@font-face {
font-family: 'MyFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: local('myfont Regular'), /* フォントがローカルにインストールされている場合に有効 */
url('webfont.eot?#iefix') format('embedded-opentype'), /* eof - IE6-IE8 */
url('webfont.woff') format('woff'), /* woff - Modern Browsers */
url('webfont.ttf') format('truetype'), /* ttf - Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg'); /* svg - Legacy iOS */
}
body {
font-family: MyFont; /* @font-faceで定義したフォント名を指定 */
}
を使う場合どのようにしてローカルにあるファイルを指定してあげるのですか。
回答2件
0
ベストアンサー
「自分のローカルにあるフォント」とは、自分のPCにダウンロードしたファイルということですか。
だとしたら、OSにインストールしたら @font-face を使わなくても使用できますが。
Windowsならフォントファイルを右クリックして[インストール]で簡単にインストールできます。
インストールされていれば、下記のように普通に使えます。
css
1body { 2 font-family: 'GABRWFFR'; 3}
@font-faceを使えば別名で使えますが、必要性はほとんどないでしょう。
css
1@font-face { 2 font-family: 'MyFont'; 3 src: local('GABRWFFR'); 4} 5 6body { 7 font-family:'MyFont'; 8}
フォントをインストールせずに使いたい（そのようなことが必要な場面は想像つきませんが）場合は下記のように記述します。ただし、ローカルに置いたHTMLでしか使えません。
css
1@font-face { 2 font-family: 'MyFont'; 3 src: url('file:///C:/Users/myname/Downloads/GABRWFFR.TTF'); 4} 5 6body { 7 font-family:'MyFont'; 8}
質問のリンク先を最後まで読めば、すべて書いてあることですけどね。
追記
ローカル（自分のPC）にダウンロードしたフォントをローカル環境で表示するという意味で回答しましたが、
よく考えたら、ダウンロードしたフォントを、WEB公開しているページ上で、だれから見ても表示されるようにしたい、という意味かも知れないですね。
だとしたら、公開してるHTMLをアップロードしているサーバーに、フォントファイルもアップロードして、そのフォントファイルのURLを @font-face で指定するということになります。
サーバーのルートに fonts というフォルダーを作成してそこにアップロードした場合
css
1@font-face { 2 font-family: 'MyFont'; 3 src: url('/fonts/GABRWFFR.TTF'); 4} 5 6body { 7 font-family:'MyFont'; 8}
投稿2019/09/22 21:14
編集2019/09/23 01:03
総合スコア34073
ありがとうございます。
body {
font-family: 'GABRWFFR';
}
を使用しましたが反映されません。
パスは以下です。
/Users/username/Downloads/GABRWFFR.TTF
ちなみにフォントをダウンロードしたサイトは以下です。
https://www.dafont.com/gabriel-weiss-friends.font
回答になるようにフォントファイルを右クリックしてインストールしましたか？
あと、あなたのPC上だけで表示されたらいいのか、WEB公開しているページ上でも表示したいのか、どちらでしょうか。
ダウンロードしてみました。フォント名は Gabriel Weiss' Friends Font のようですので、
下記のように設定すると表示されるのを確認しました。
適用したいセレクタ {
font-family: "Gabriel Weiss' Friends Font";
}
上手くいきました。その方法は初めに試したのですが、
Font までいるとは知りませんでした。ありがとうございました。
確かに、フォント名に ' が含まれていたり、Font まで必要なのは、かなり特殊ですね。私も最初はとまどいました。
0
パスをシングルクォーテーションかダブルクォーテーションでくくってもうまくいきませんか？
MDN
投稿2019/09/22 14:33
編集2019/09/22 14:40
総合スコア10429
そもそもローカルのフォントファイルにサーバー上のHTMLファイルへのアクセスで取得できるか疑問だけど
個人的には利用場面を知りたったりする。
うまくいきませんでした。
私のは拡張子がwoffで無いのが問題なのでしょうか。
あなたの回答
tips
プレビュー
