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

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

ただいまの
回答率

90.51%

  • HTML5

    5124questions

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

  • CSS3

    2626questions

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

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

解決済

回答 3

投稿

  • 評価
  • クリップ 0
  • VIEW 3,800

前提・実現したいこと

ウェブサイトを作ってまして、フォントを
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, 

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 3

checkベストアンサー

+3

「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/29 00:56

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

    キャンセル

+3

他の方が指摘しているように、単純に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/29 01:01 編集

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

    キャンセル

+1

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/12/29 00:54

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

    キャンセル

同じタグがついた質問を見る

  • HTML5

    5124questions

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

  • CSS3

    2626questions

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