WEBでのotfファイルの使用について

Question

デザイナーさんから頂いたAIのデザインデータからHTMLとCSSを作成しています

一通りコーディングが終わって提出したところフォントが違うと怒られてしまいました。
確かに送付されたデータの中にotfというフォントファイルはあったのですが、
下記のサイトをみていて
「otfは一般的にOSへインストールする用途のためこのファイルだけではまだWebフォントとして使うことはできません。」
とあったので、cssにfont-family: "Hiragino Sans”;を指定して作っていました。

webサイトのデザインではデザイナーさんがフォントを指定してくるケースはよくあるのでは？と思うのですが
このような場合はどのように対応するのが良いのでしょうか。。otfを使うべきなのでしょうか（指定する方法もあるのでしょうか。）
css web フォント otfなどで検索してみたのですが、otfを使う方法も見つけることができませんでした。

指定のあったフォント名は下記のものです
・HelveticaNeueLTPro-BdEx.otf
・HelveticaNeueLTPro-Md.otf
・HelveticaNeueLTPro-Roman.otf

最終的にwordpressなどのCMSで利用するらしいのですが、無理やり使ったりして他に影響しないのかとか思ったりします。

参考にしたサイト：
https://www.granfairs.com/blog/staff/webfont-by-selfhosting

よろしくお願いいたします。

補足情報（FW/ツールのバージョンなど）

Mac Book Pro Catalina
Visual Studio Code バージョン: 1.54.3

Comments

[kei344]

そもそも有料のフォントを権利者（フォント作成者）の許諾無く配布することはしてはいけません。

Answer 1

webサイトのデザインではデザイナーさんがフォントを指定してくるケースはよくあるのでは？

あまりありません。特に、日本語については文字数が多いため

• 再配布可能なフォント自体があまり多くない（ライセンス上、勝手にヒラギノを再配布したりはできません）
• フォントファイルの読み込みが負荷になる

などの事情もあるので、本文までWebフォント化するような実装は特殊な部類に属します。

Comments

[Ruri5280]

回答ありがとうございます。
デザイナーさんがフォントを指定するケースってあまりないんですね。。私の周りだけかも知れませんが「フォントに拘ってみたんですー」みたいな会話をよく耳にしていたので…goolefontを利用する方向で提案してみたいと思います。ありがとうございました

[maisumakun]

> 「フォントに拘ってみたんですー」みたいな会話をよく耳にしていたので

上に書いたようなデメリットを伝えて、「それならいい」となるか「それでもやりたい」となるかはわからないです。

[Ruri5280]

ありがとうございます。それでもやりたいって言われても巻き込まれたくないですよね…デメリットをしっかりと伝えられるように頑張ってみます。アドバイスありがとうございます。

Answer 2

一般的には、参考にされたサイトのようにotfからwoffに変換しサーバーへアップロードしたものを使う又は、Google Fontのようなサービスを利用するかの二択になります

Comments

[Ruri5280]

回答ありがとうございます。woffに変換するにも著作権などの問題もありそうですし難しいですよね。。
googlefont などを利用する方法を提案してみようと思います。