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

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

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

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

Q&A

1回答

4482閲覧

【フォントのサブセット化】サブセット化したフォントが表示されず、困っています。

mmnkokok

総合スコア8

font

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

2グッド

0クリップ

投稿2016/01/08 08:07

編集2016/01/08 08:09

以下詳細になります。

###【問題】
「かんじゅくゴシック」フォントをサブセット化した「かんじゅくゴシックサブセット」というfontファイルをサーバーにアップロードしたが、WEBページにそのフォントが表示されない。

###【背景】
好みのフォントをWEBページに表示させたかった
→好みのfontファイル(かんじゅくゴシック)をサーバーにアップロードした
→ファイルサイズが大きすぎた
→fontファイルをサブセット化してサイズを小さくしようと試みた
→失敗した

###【現状分析】
①「サブセットフォントメーカー(武蔵システム)」を使用して、「かんじゅくゴシック」フォントをサブセット化した(.eot/.woff/.ttfの3種類)
② サブセット化したfontファイルをサーバーにアップロードした
③ CSSは@font-face形式で記述した ※以下ソースコード参照

@font-face { font-family: myfont; src: url('../Font/かんじゅくゴシックサブセット.eot'); src: local('myfont Regular'), url('../Font/かんじゅくゴシックサブセット.eot?#iefix') format('embedded-opentype'), url('../Font/かんじゅくゴシックサブセット.woff') format('woff'), url('../Font/かんじゅくゴシックサブセット.ttf') format('truetype'), url('../Font/かんじゅくゴシックサブセット.svg#svgFontName') format('svg'); } .myfont { font-family: myfont; }

④ WEBページに「かんじゅくゴシックサブセット」フォントが表示されず、デフォルトのフォントが表示されてしまう

###【問題分析】
原因は
α. CSS記述方式の問題
β. fontファイルの問題
のどちらかだと考えています。

そこで、以下の方法で解決を試みました。

###【実施した解決策】
【α.が原因だと仮定】
① CSSの記述方式を変えずに、fontファイルだけ変更してみる
→他のfontファイルだとうまく表示されました

∴α.は原因ではない

【β.が原因だと仮定】
① サブセットフォントメーカー以外のアプリケーションを使用する
→恥ずかしながら、検索しても見つけられませんでした。
② fontファイルが壊れているか確認する
こちらの記事を参考にfontファイルに問題がないか確認しましたが、特に問題はありませんでした。

###【結論】
以下3点お伺いできればと思っております。
① サブセットフォントメーカー以外で、フォントをサブセット化できるアプリケーションはありますでしょうか
先述の記事以外の方法で、fontファイルが壊れているか確認する方法はありますでしょうか
③ 私が試した方法以外で、心当たりのある解決方法はありますでしょうか

もし、いずれか一つでもご存知、もしくは心当たりのある方がいましたら、ご教授願えればと思います。
よろしくお願い致します。

izkn, ikuwow👍を押しています

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

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

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

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

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

guest

回答1

0

最近、類似のご質問があり回答したのですが(その後の進展は不明)そちらはご参照頂いていましたか?

サブセットフォントについて

解決に役立つかもしれませんので、もしまだならご一読ください。

投稿2016/01/08 09:46

pi-chan

総合スコア5936

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

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

mmnkokok

2016/01/10 11:05

ご回答ありがとうございます。 リンク先拝見しました。 リンク先では下記2つの解決方法を提示されていたかと思います。 ①ブラウザによって対応しているフォントの種類が違う(対応しているフォントを使用する) ②ツールの使い方に「忘れてはならない」ポイントがある(EOTファイルを作成する) 結論から申しますと、どちらの解決方法もうまくいきませんでした。 ①に関しては、 http://www.hirok-k.com/blog/751.html こちらの記事に掲載されているフォント(webフォントとして使用可能な日本語フォント)をサブセット化してサーバーにアップロードしてみましたが、かんじゅくゴシックの場合と同様に表示されませんでした(デフォルトのフォントが表示されてしまいました)。 ②に関しては、 「EOTファイルを作成」ボタンを押して、fontファイルを作成しましたが、こちらでもうまくいきませんでした(デフォルトのフォントが表示されてしまいました) 2つの方法を試していて思いましたが、サブセットフォントメーカー(武蔵システム)を使用してサブセット化を行っている段階で問題が発生しているように感じます。 サブセットフォントメーカー(武蔵システム)以外で、サブセットフォントを作成するアプリケーションはないのでしょうか....... 途方に暮れております。
pi-chan

2016/01/10 23:05

そもそも「サブセットフォントメーカーを使用して〜サブセット化した(.eot/.woff/.ttfの3種類) 」ということでしたが、具体的にどのように生成されたのでしょうか? というのは、サブセットフォントメーカーで生成されるのは「.oft」だけのはずなので。 サブセット化された後のフォントを「WOFFコンバータ」か何かで変換されたのですか? それと、使用されているのはWindows版ですか?(Mac版とは使用が微妙に異なるので)
mmnkokok

2016/01/15 16:51

>そもそも「サブセットフォントメーカーを使用して〜サブセット化した(.eot/.woff/.ttfの3種類) 」ということでしたが、具体的にどのように生成されたのでしょうか? というのは、サブセットフォントメーカーで生成されるのは「.oft」だけのはずなので。 サブセット化された後のフォントを「WOFFコンバータ」か何かで変換されたのですか? →ファイルの拡張子を「.oft」から「.woff」に書き換えました。 と申しますのも、「WOFFコンバータ」を使用すると、ファイルが壊れてしまい「書類“かんじゅくゴシックサブセット.woff”を開くために設定されているアプリケーションがありません。」とアラート表示が出てしまうからです。 >それと、使用されているのはWindows版ですか?(Mac版とは使用が微妙に異なるので) →使用しているのはMac版になります。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問