ページ全体のフォントを指定したい

webフォント？について質問です。

ページ全体のフォントを変えたいと思っています。
私のローカルに入っているフォントを、
サイトをみた誰でもそのフォントで表示されるようにしたいのです。

調べて色々やってみたのですが、うまくいきません。
どうやら、サイトタイトルだけは反映されたようなのですが、
ページ全体にとなると、どう書けばよいのかさっぱりわからない状況です。

http://workfield3.wpblog.jp/

上記が作成中のサイトです。

css
1@font-face {
2    font-family: 'JKG-M.ttf';
3    src: local('JKG-M.ttf');
4}
5
6@font-face {
7    font-family: 'JKG-M';
8    src: url('JKG-M.eot');
9    src: url('JKG-M.eot?iefix') format('eot'),
10        url('JKG-M.woff') format('woff'),
11        url('JKG-M.ttf') format('truetype'),
12        url('JKG-M.svg#webfontjSpbZQRv') format('svg');
13}

上記が、わけがわかっていないままとりあえず書いてみたものです。
フォント自体はサーバーにアップロードしております。
ページ表示速度が遅くなっても構いません。

行動規範の内容に同意します

回答2件

ベストアンサー

#site-navigationなどあとからfont-famiryが上書きされていますね。
deafault.css内のbody以外のこれらのfont-famiryをすべて削除するか、全部削除するのがためらわれるようであればCSSのファイル上でfont-famiryを検索してみて追加し忘れている箇所に追加or変更してあげればいけると思います。

css
1#site-navigation {
2  clear: both;
3  display: block;
4  display: inline-block;
5  padding-bottom: 0px;
6  border: none;
7  margin-top: -15px;
8  text-align: center;
9  float: none;
10  font-family: "Helvetica", Arial, Times, serif;
11  font-weight: lighter;
12}

↓

css
1#site-navigation {
2  clear: both;
3  display: block;
4  display: inline-block;
5  padding-bottom: 0px;
6  border: none;
7  margin-top: -15px;
8  text-align: center;
9  float: none;
10  font-family: "JKG-M", Arial, Times, serif;
11  font-weight: lighter;
12}

投稿2016/09/14 02:27

gin

総合スコア2722

kurono_you

2016/09/14 02:58

すごく盲点でした。ありがとうございます！無事にフォントを変えることができました！！

行動規範の内容に同意します

デベロッパーツールを見てください。エラーが出ているはずです。

【Web開発でよく使う、特に使えるChromeデベロッパー・ツールの機能 - Build Insider】
http://www.buildinsider.net/web/chromedevtools/01

"NetworkError: 404 Not Found - http://workfield3.wpblog.jp/wp-content/themes/fonts/font-awesome/css/font-awesome.min.css"
font-aw...min.css
"NetworkError: 404 Not Found - http://workfield3.wpblog.jp/wp-content/themes/fifteen/css/skins/JKG-M.woff"
JKG-M.woff
"NetworkError: 404 Not Found - http://workfield3.wpblog.jp/wp-content/themes/fifteen/css/skins/JKG-M.ttf"
JKG-M.ttf
"NetworkError: 404 Not Found - http://workfield3.wpblog.jp/wp-content/themes/fifteen/JKG-M.woff"
JKG-M.woff
"NetworkError: 404 Not Found - http://workfield3.wpblog.jp/wp-content/themes/fifteen/JKG-M.ttf"
JKG-M.ttf

フォントの読み込みコードはフルパスで書くほうが問題が起きにくいです。

投稿2016/09/14 02:42