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

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

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

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

HTML5

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

Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

font

近年は、コンピュータ上、紙面上で利用できる書体データのことをfontといいます。数える時の単位は「書体」で、データとしてのフォントは、デジタルフォントと呼ばれる場合があります。 HTML/CSSでは要素を指定し、フォント情報を調整することができます。

Q&A

解決済

2回答

7176閲覧

ローカルでwebフォントが表示されない…

EXIT

総合スコア43

CSS3

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

HTML5

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

Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

font

近年は、コンピュータ上、紙面上で利用できる書体データのことをfontといいます。数える時の単位は「書体」で、データとしてのフォントは、デジタルフォントと呼ばれる場合があります。 HTML/CSSでは要素を指定し、フォント情報を調整することができます。

0グッド

1クリップ

投稿2019/02/05 02:54

編集2019/02/05 04:12

問題

サブセットフォントメーカーWOFFコンバーターでフリーフォントをwebフォント化しました。
が、ローカルで適用されません。
(デベロッパツールでは、指定されているものの、Renderedがヒラギノになってしまう)

3週間程前に、同じように↑の組み合わせでwebフォント化したものは今もちゃんと反映されていて、header指定をh1に変えたりしてもその通りに表示されます。

というか、teratailのこの方と全く同じことになっています。

試したこと

何か不具合かなと、ソフトをAppCleaner(完全に削除するツール)で一旦完全削除→インストールし直してみたり、macを再起動したり、違うフォント何種類かでもやってみましたがだめでした。

現状

一応コードを貼ります…

HTML

1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width,initial-scale=1"> 7 <meta name="description" content="***"> 8 <title>sacun</title> 9 <link rel="icon" href="favicon.ico"> 10 <link rel="stylesheet" href="css/styles.css"> 11 </head> 12 <body> 13 <header> 14 <nav> 15 <ul> 16 <li class="current"> 17 <a href="index.html"> 18 A 19 </a> 20 </li> 21 <li> 22 <a href=""> 23 B 24 </a> 25 </li> 26 <li> 27 <a href=""> 28 C 29 </a> 30 </li> 31 <li> 32 <a href=""> 33 D 34 </a> 35 </li> 36 <li> 37 <a href=""> 38 E 39 </a> 40 </li> 41 </ul> 42 </nav> 43 </header> 44 45 <section> 46 47 <h1>あいう@bcd0123</h1> 48 <p></p> 49 </body> 50 51 <footer> 52 <p>***</p> 53 </footer> 54 </body> 55</html>

CSS

1@font-face { 2 font-family: 'ChicagoBit'; 3 src: url(../fonts/Chicago/'ChicagoBit.woff2') format('woff2'), 4 url(../fonts/Chicago/'ChicagoBit.woff') format('woff'), 5 url(../fonts/Chicago/'ChicagoBit.eot') format('eot'), 6 url(../fonts/Chicago/'ChicagoBit.ttf') format('truetype'); 7} 8 9header,footer { 10 font-family: 'ChicagoBit'; 11} 12 13//↑これはちゃんと反映される(3週間程前にwebフォント化したやつ) 14 15@font-face { 16 font-family: 'Konatsu'; 17 src: url(../fonts/小夏等幅/'WebKonatsuTohaba.woff2') format('woff2'), 18 url(../fonts/小夏等幅/'WebKonatsuTohaba.woff') format('woff'), 19 url(../fonts/小夏等幅/'WebKonatsuTohaba.eot') format('eot'), 20 url(../fonts/小夏等幅/'WebKonatsuTohaba.ttf') format('truetype'); 21} 22 23h1 { 24 font-family: 'Konatsu'; 25} 26 27//↑これだめ(前者の、ちゃんと反映されるフォーマットをコピペしたのに…)

階層↓
階層はこんな感じ

考察

どのフォントでやってもwebフォントが反映されなくなってしまったので、『この3週間くらいの間に ① ソフト自体がバグったりしたのか…?』と思いましたが、そんなことってあるんでしょうか?

それか、 ② コードとかが間違ってますか…? 本当念の為ですが、ローカル環境でコード触るのって「Chromeにindex.htmlをドラッグ&ドロップするだけ」で合ってますよね?
他の原因…? 他に原因になり得るのも分かれば教えていただきたいです。

「サブセットフォントメーカーやWOFFコンバータが効かない」などの記事も見当たらないし、
原因が全く掴めずとても困っています。助けてください…
どうぞ宜しくお願い致します。

環境

Google Chrome
Atom

追記

試しにOsakaフォントで同じ構成でやってみたら、なんと、きちんと反映されました。

CSS

1@font-face { 2 font-family: 'Osaka'; 3 src: url(../fonts/Osaka/'WebOsaka.woff2') format('woff2'), 4 url(../fonts/Osaka/'WebOsaka.woff') format('woff'), 5 url(../fonts/Osaka/'WebOsaka.eot') format('eot'), 6 url(../fonts/Osaka/'WebOsaka.ttf') format('truetype'); 7} 8 9h1 { 10 font-family: 'Osaka'; 11}

Consolasも大丈夫でした。ますます意味がわかりません。「webフォントにできるのとできないのがある」とかあるんでしょうか…?
ちなみに、3ヶ月前にwebフォント化したChicagoBitは、FontForgeで自作したものです。

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

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

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

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

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

yoshinavi

2019/02/05 04:05

「小夏等幅」のフォルダ名は日本語なのでしょうか?英小文字に直してみてはどうですか?
EXIT

2019/02/05 04:16

フォルダ名日本語です。 フォルダ名をKonatsuと変えてやってみましたが、適用されませんでしたTT これもまたデベロッパツールのfont-familyにはちゃんとKonatsuとなっているんですが、Renderdはヒラギノです…
yoshinavi

2019/02/05 04:30

実際に保存しているfontフォルダ、アップしているfontフォルダ全て、名称変更されてますか?
yoshinavi

2019/02/05 04:45

「小夏等幅」フォントの収録文字の種類や数は確認されていますか?単純に「対応外」の可能性もあるかと・・・
EXIT

2019/02/05 05:18

はい。Konatsuにしたら、Atomの方でも自動的にKonatsuになってました。 対応外…?webフォント化してもならないやつとか本当にあるんですか? 収録文字の種類や数、確認してみましたが、違いが見当たらなかったです…
yoshinavi

2019/02/05 06:51

対応外と言うのは、文字そのものが収録されておらず、「あい」の漢字で、「愛」は収録されていても「哀」は収録されていない、等です。
yoshinavi

2019/02/05 07:43

ブラウザにもよりますが、HTMLでGoogleのNotoフォント等を読み込むと問題無く表示されますが、他のwebフォントでCSSの「@font-face」設定の場合、サーバーにアップするとキチンとwebフォントが適応されているが、ローカル環境だと反映されないことがあります。 私の環境だとFirefoxがそうで、ブラウザの環境設定も試しましたが改善されず、Chrome、Edge、ie11だと問題無くローカル環境でも反映されたりするので、PCとブラウザの相性と決めつけて、PCを変えるまで今のところ「放置状態」ではあります。 (^^;)
EXIT

2019/02/05 16:55 編集

そういうことですね! 文字列は「あいう@bcd0123」なので、収録されてないってことはまずなさそうです… そんなこともあるんですね! 実はsafariでも同じように効かないし、ブラウザに左右されないCodePenでやってもだめだし、どうしようもなくなってますTT こういう難しい問題って、どこに相談すれば解決できるんでしょうか… 周りにエンジニアいないし… yoshinaviさんはそういう時どうなさってますか?
x_x

2019/02/06 00:54

Macは最初から'Osaka'という名前でシステムフォントが入っていると思うので、別の名前でテストしてもらえますか?
EXIT

2019/02/06 02:32

'takoyaki'で同様にやってみました。 なんと、反映されませんでした!
EXIT

2019/02/06 02:53

解決しました!皆さん本当にありがとうございます。
guest

回答2

0

ベストアンサー

小夏フォントをダウンロードし、質問に提示のツールを使いサブセット化+WOFF変換してみました。
念のためフォルダ名を「小夏等幅」→「konatsu」に変更

test.html [css]-styles.css [fonts]-[konatsu]-フォントファイル群

というフォルダ構成です。

HTMLはほぼ質問に提示のものです。

html

1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width,initial-scale=1"> 7 <meta name="description" content="***"> 8 <title>sacun</title> 9 <link rel="icon" href="favicon.ico"> 10 <link rel="stylesheet" href="css/styles.css"> 11 </head> 12 <body> 13 <header> 14 <nav> 15 <ul> 16 <li class="current"> 17 <a href="index.html"> 18 A 19 </a> 20 </li> 21 <li> 22 <a href=""> 23 B 24 </a> 25 </li> 26 <li> 27 <a href=""> 28 C 29 </a> 30 </li> 31 <li> 32 <a href=""> 33 D 34 </a> 35 </li> 36 <li> 37 <a href=""> 38 E 39 </a> 40 </li> 41 </ul> 42 </nav> 43 </header> 44 45 <section> 46 47 <h1>テストでサブセット化した文字列</h1> 48 <p></p> 49 </section><!-- bodyになってたけどsectionですよね --> 50 51 <footer> 52 <p>***</p> 53 </footer> 54 </body> 55</html>

CSSはurl(~)内の'を消してあります。

css

1@font-face { 2 font-family: 'Konatsu'; 3 src: url(../fonts/konatsu/WebKonatsuTohaba.woff2) format('woff2'), 4 url(../fonts/konatsu/WebKonatsuTohaba.woff) format('woff'), 5 url(../fonts/konatsu/WebKonatsuTohaba.eot) format('eot'), 6 url(../fonts/konatsu/WebKonatsuTohaba.ttf) format('truetype'); 7} 8 9h1 { 10 font-family: 'Konatsu'; 11}

つけるとしてもたしかこっちだった気が。
(略)url('../fonts/konatsu/WebKonatsuTohaba.woff2') format('woff2'),(略)

InternetExplorer、Google Chrome、Firefoxそれぞれ最新verでローカルで確認しました。

お試しください。

投稿2019/02/06 00:52

編集2019/02/06 00:54
dit.

総合スコア3235

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

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

EXIT

2019/02/06 02:52 編集

わあああ!ちゃんとなりました!めちゃめちゃ嬉しいです!! 試しに色んなフォントでやってみても全部反映されました。 これがミスだったとは…笑 本当にありがとうございます! section閉じミスもありがとうございます!
dit.

2019/02/06 04:35

解決できたようでよかったです。
guest

0

小夏等幅という名前をアルファベット表記に直してもダメでしょうか。

投稿2019/02/05 09:29

cerfweb

総合スコア1899

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

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

EXIT

2019/02/05 16:46

だめでしたTT
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問