他サイトのフォントを再現したい

初歩的な質問で申し訳ありません。

他サイトのフォントを別サイトで再現したく思っております。
Chromeの『検証』使用し、CSSデータを確認したところ、下記のような情報を取得することができました。

h2 {
font-family: 'BebasNeue';
font-size: 416.6%;
text-align: center;
color: #1A191A;
margin: 0px;
padding: 0px;
}

別サイトで、上記情報を使用してみましたが、同じ表示になりませんでした。

h2のみではなく、bodyで設定されているフォントの設定も関係したりするのでしょうか。もしくは、別の要素も確認しないと同様の表記にならないことがありますでしょうか。

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

回答2件

ベストアンサー

‎✧＼\ ٩( 'ω' )و /／✧はっぴーほりでー

レイアウトはcssに書きましょう。
動く動かないではなく、レイアウトはcssに書くべきだからです。

本題の件ですが、
@font-faceでフォントを指定することで、フォントを利用できる準備をしただけかと思われます。
例えば、h1,h2で使いたい場合は、@font-faceで指定した後、下記のように指定します。

css
1h1,h2{
2  font-family: BebasNeue; 
3}

話がそれますが、セレクタにcssを書くのは破綻する原因になるので、
classを付与するほうが後々のために宜しいです。

運用できるCSS設計を考える
http://qiita.com/uruha/items/a70f960e6df17ebcaa1f

子テーマではなく、本体のstyle.cssにて編集を行ったほうがよろしいでしょうか。
先ほど質問させていただいたフォントは、ページ全体ではなく、h1やh2等の要所要所の強調部分にて使用できればと思っております。

投稿2015/12/24 05:53

編集2015/12/24 05:55

harapeko_wktk

総合スコア81

Orejima

2015/12/24 06:59

ご返答ありがとうございました。まず最初に教えていただいたとおり、フォントのデータをダウンロードし、該当のパスに配置した上で、下記の記述を子テーマのstyle.cssに記述しました。 @font-face { font-family: BebasNeue; src: url("font/BebasNeue.otf") format("opentype"); } 次に、同じく子テーマのclass（実際はid）に、下記の記述を行いました。 #xxxx_title　{ font-family: 'BebasNeue'; } 上記を行った上で確認してみたところ、変更が反映されておりませんでしたので、子テーマではなくテーマ本体のstyle.cssに記述場所を変更しました。場所は、全体のフォントをしてしているbodyの直上です。ですが、現状ではフォントの変更が行われていない状況となっております。言葉足らずな質問で申し訳ございません。

harapeko_wktk

2015/12/24 07:17 編集

もう少しだと思うので頑張ってみましょう‎✧＼\ ٩( 'ω' )و /／✧ こういう時は、原因を一個ずつ追っていくのが得策かと思います。 1.fontが読み込めているかどうかを確認する。　chromeなど開発者コンソールをお使いでしたら、　読込に失敗していれば、エラーが表示されています。　web上のcssの中身からや、Sourceタブから直接開いてみてもいいかと思います。　cssに書いたということは、cssからのパスになりますが、　↑上記ソースは相対パスなので、style.cssの場所のfontディレクトリのBebasNeue.otfを見にいっています。　恐らくここが間違えているのではないかと推測します。 2.次に疑うのは、振ったcssのclass、idが間違えていたりすることです。これも開発者コンソールで、その要素のスタイルを見てみると確認することができます。 3.次に疑うのは、css側のタイポです。　これは開発者コンソールなどで見ると取り消し線がひかれるのでわかりやすいです　https://gyazo.com/7983822dd24fab9394a78d3a46d0118f 参考URL Web開発でよく使う、特に使えるChromeデベロッパー・ツールの機能 http://www.buildinsider.net/web/chromedevtools/01 備考) idは1ページに1回しか使ってはいけないのと、基本的にはjsを動かす時だけがいいかもしれませんね。

Orejima

2015/12/24 07:41

早々のご返答ありがとうございます<(_ _)> Chromeの検証を行ってみたところ、どうやら読み込んでいるっぽいのが逆に腑に落ちなくて...。パスは相対で間違うのを回避するために、絶対パスにしてみております。 https://gyazo.com/3f00a8779eae388f1e8bbb5955c18e3b 自分的には、他のフォントの設定が優先されている、等を疑っております。 harapeko_wktk様のご指摘通り、１つずつ追いかけながら検証を行ってみます。もし他にも注意点等ございましたら、教えていただけると幸いです。お手数をお掛けしてしまい、申し訳ございません。

Orejima

2015/12/24 07:51

ということは、最初の@font-faceの内容に問題がある、ということなのでしょうか。本体style.cssに記述した内容は下記のとおりです。 @font-face { font-family: BebasNeue; src: url("http://www.xxxxxx.com/fonts/BebasNeue.otf") format("opentype"); } ※xxxxxxは伏せ字で、実際は使用しているドメインが記述されています。フォントファイルは、ルート直下の『fonts』フォルダに格納してあります。 https://gyazo.com/385d4c7d1f6361fc92dbc1b51db4bcf8

harapeko_wktk

2015/12/24 07:58

http://www.xxxxxx.com/fonts/BebasNeue.otfを直接開いてみることはできるでしょうか？ (まれにパーミッションではじかれている場合もあります)

Orejima

2015/12/24 08:07

相対パスでの間違いを恐れて、絶対パスに変更しておりました。該当アドレスを直接開くと、フォントファイルのダウンロードが始まったので、おそらく大丈夫なのでは、と思います。逆にここでNG出てくれる方が、すっきりするのですが...。

harapeko_wktk

2015/12/24 08:15

ふと思ったのですが、実は成功していて、日本語に対応していないフォントだから変化がないように見えてたりなんて可能性はどうでしょうか？(笑もし、開発者コンソールで文章を英語にすることができ、さらにcssのプロパティのfont-familyをオン・オフにしてみて変化があればそういうことなのかもしれません。ともあれ、ほんのちょっとの何かだと思いますここが苦しいところなんですけど(笑

Orejima

2015/12/24 08:30

度々のご返答ありがとうございます<(_ _)> 大変感謝しております。他のサイトでは実際に使われているだけに、なにかしら設定方法が...と思っております。ただ、Chromeの検証でfont-familyをオン・オフどちらにしてみても、表示が変わらないのです。ということは、指定したフォントの影響下に無いということですよね。日本語に対応していない場合は、半角英数でも表示されなかったりするのでしょうか。そうですよね。もう少しな感じがするだけに悔しくて（笑）もう少し頑張ってみようかと思います。

harapeko_wktk

2015/12/24 08:50

参考までにこちらでテストしてみたので、比較に使ってみてください http://jsdo.it/harapeko_wktk/C6jx

Orejima

2015/12/24 12:05

ありがとうございます。確認作業に使わせていただきます。

Orejima

2015/12/25 02:04

無事に解決することができました。原因は『子テーマではなく本テーマ側のstyle.cssをFTPでアップロードを行ったはずが、PC側の不具合？で、実際はアップされていなかった』というものでした。別の作業をしていて、内容が変更されていないことに気がついて別のPCから行うと、すんなりとフォントが変更されました。後ほんのちょっと、がまさかエラーとは思わず...。色々とお手数をおかけいたしました。しかし、以後のトラブル時の対処法等がイメージ出来たように思います。本当にありがとうございました。

harapeko_wktk

2015/12/25 03:12

無事、解決できてよかったです✌('ω'✌ )三✌('ω')✌三( ✌'ω')✌ なにはともあれ、トラブルの解決は再現方法を見つけること。再現方法が分かれば、一つ一つ可能性を潰していく作業になっていきますので、ここの感性を養っていくのが重要です。引き続きがんばってください！！

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

調べてみたところ、そのサイトに使われているフォントは標準のものではないようですね。
このサイトから落とせるので、それをダウンロードして、
ZIPファイルの中のBebasNeue.otfをルート上において、

css
1@font-face {
2font-family: BebasNeue;
3src: url("font/BebasNeue.otf") format("opentype");
4}

多分これで使えるようになると思います。

投稿2015/12/24 00:01

luma

総合スコア183

Orejima

2015/12/24 00:59

早々のご返答ありがとうございました。早速、ダウンロードをさせていただきました。現在、WordPressの子テーマ側にてCSSの作業を行っているのですが、教えていただいたCSSの書き方が悪いのか、うまく再現に至っておりません。子テーマではなく、本体のstyle.cssにて編集を行ったほうがよろしいでしょうか。先ほど質問させていただいたフォントは、ページ全体ではなく、h1やh2等の要所要所の強調部分にて使用できればと思っております。CSSの記述場所等にも気を払ったほうがよろしいでしょうか。

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

あなたの回答