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

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

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

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

921閲覧

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

Ruri5280

総合スコア309

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2021/03/30 11:38

デザイナーさんから頂いた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

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

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

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

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

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

kei344

2021/03/30 13:04

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

回答2

0

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

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

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

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

投稿2021/03/30 22:49

maisumakun

総合スコア145121

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

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

Ruri5280

2021/03/30 23:18

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

2021/03/30 23:20

> 「フォントに拘ってみたんですー」みたいな会話をよく耳にしていたので 上に書いたようなデメリットを伝えて、「それならいい」となるか「それでもやりたい」となるかはわからないです。
Ruri5280

2021/03/30 23:29

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

0

ベストアンサー

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

投稿2021/03/30 12:57

mouse_484

総合スコア759

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

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

Ruri5280

2021/03/30 23:15

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問