質問: ### 前提・実現したいこと ウェブサイトを作ってまして、フォントを 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,
回答: 「Helvetica Neue」の指定方法が間違っているのでは。 【CSSで「Helvetica Neue」を指定して遊んでみた | DESIGN SUKINADAKE】 ちなみにWindows環境やAndroid環境では標準では「Helvetica Neue」が入っていません。有料のWebフォントサービスなどを利用すれば使用できるようになります。( Adobe Creative Cloud なら Typekit が使えるが、Helvetica 系は無かったかも) ###### フォント情報の調べ方: 【フォント情報の調べ方について - ゆめいろデザイン :: フリーランス UX/UIデザイナー】 【font-familyで指定するフォント名の調べ方 - HTML・CSS 解決済 | 教えて!goo】 ###### フォントの指定の仕方: 【CSS:日本語と英語でのフォントファミリー名のブラウザ対応について・調査編 - TAKEN】 【日本語フォントの英語名しらべ - TAKEN】