質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Q&A

解決済

3回答

10144閲覧

cssでフォント、"HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", が設定、反映されない。

YuhoJoeyNamiki

総合スコア11

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

0グッド

0クリップ

投稿2016/12/19 19:39

###前提・実現したいこと
ウェブサイトを作ってまして、フォントを
HelveticaNeue と HelveticaNeue-Light を使用したいのですがいくらcssで設定しても反映されません。基本的なことがわかってないのですが、
bodyでfont-family で設定した、フォント以外は 後ほど、いくらclass側で、fontの指定をしてもフォントは変わらないのでしょうか。
font-family の役割と、各fontの設定の関係性も知りたいです。

このHelveticaNeue と HelveticaNeue-Light は、ウェブでは使えないフォントなのでしょうか。

基本的に、photoshopにはある、フォントがそっくりそのまま、ウェブでは、設定できないものもあるって考えでよろしいのでしょうか。

ご教授のほど、よろしくお願いします。
(例)PHP(CakePHP)で●●なシステムを作っています。
■■な機能を実装中に以下のエラーメッセージが発生しました。

###発生している問題・エラーメッセージ

ウェブ上で、フォントが反映されず、Helvetica のままになっています。

###該当のソースコード

---common.css font-family: Impact,Charcoal,"HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif; -----style.css .sectionAbout p{ font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 44px; text-align: left; line-height: 64px; color: #ebf9f8; }

###試したこと
About(.sectionAbout p) ページの文章の書体を、Helvetica Neue で表示されるようにしたい。

###補足情報(言語/FW/ツール等のバージョンなど)
CSS3, mac 10.11.6, sublimeText 3, firefox,

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答3

0

他の方が指摘しているように、単純にfont-familyに指定しているフォント名の書き方が違うだけだと思われます。

bodyでfont-family で設定した、フォント以外は 後ほど、いくらclass側で、fontの指定をしてもフォントは変わらないのでしょうか。

いいえ、通常のCSS同様、後からいくらでも上書きできます。

font-family の役割と、各fontの設定の関係性も知りたいです。

font-familyは表示する書体を選択するものです。複数指定した場合は前から順番に検索され、マッチした書体が見つかった時点でその書体で表示します。

このHelveticaNeue と HelveticaNeue-Light は、ウェブでは使えないフォントなのでしょうか。

ユーザの環境にそのフォントがインストールされていれば使えますが、されていなければ表示されません。
インストールされていない環境も多いので、どうしてもこれで表示したればTypeKitなどのWebフォントで指定した方が無難です。

基本的に、photoshopにはある、フォントがそっくりそのまま、ウェブでは、設定できないものもあるって考えでよろしいのでしょうか。

ローカルフォントを使って表示する場合は各ユーザの環境にインストールされているものしか表示できません。
Macとwindows、iOSとAndroidなど、全ての環境で共通してインストールされているようなフォントはほとんど無いので
特殊なフォントで表示したい場合はWebフォントを利用すべきです。

投稿2016/12/21 10:12

aKusano

総合スコア3763

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

YuhoJoeyNamiki

2016/12/28 16:02 編集

aKusanoさん 返事遅れてすみません。一つ一つ明確な答えいただいて大変嬉しいです。おかげで、font-familyの役割と、 各デバイスとユーザーによってフォントが異なるということが理解できました。わかりました。 TypeKit を利用してい似た様なフォントで代用します。 ありがとうございます。
guest

0

ベストアンサー

「Helvetica Neue」の指定方法が間違っているのでは。

【CSSで「Helvetica Neue」を指定して遊んでみた | DESIGN SUKINADAKE】
http://www.syumpei.com/blog/2013/07/css-helvetica-neue.html

ちなみにWindows環境やAndroid環境では標準では「Helvetica Neue」が入っていません。有料のWebフォントサービスなどを利用すれば使用できるようになります。( Adobe Creative Cloud なら Typekit が使えるが、Helvetica 系は無かったかも)


######フォント情報の調べ方:

【フォント情報の調べ方について - ゆめいろデザイン :: フリーランス UX/UIデザイナー】
https://yumeirodesign.jp/blog/201310/font-info.html

【font-familyで指定するフォント名の調べ方 - HTML・CSS 解決済 | 教えて!goo】
http://oshiete.goo.ne.jp/qa/7896220.html

######フォントの指定の仕方:

【CSS:日本語と英語でのフォントファミリー名のブラウザ対応について・調査編 - TAKEN】
http://taken.jp/font-family-japanese-english.html

【日本語フォントの英語名しらべ - TAKEN】
http://taken.jp/font-family-name-english-japanese.html

投稿2016/12/20 15:29

kei344

総合スコア69366

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

YuhoJoeyNamiki

2016/12/28 15:56

kei344さん お返事遅くなり失礼しました。 とても詳細に情報いただきありがとうございます。 購入しないといけないんですね。わかりました。Fontの調べ方に苦戦してましたので助かります。
guest

0

指定を
font-family:HelveticaNeue;
にしてみては?

投稿2016/12/20 01:16

takepieee

総合スコア686

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

YuhoJoeyNamiki

2016/12/28 15:54

返答遅れてすみません。僕もそれを試し たのですがうまくいかなったです。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問