Webフォントを利用した入力欄のフォント表示 (ウェイト) をそろえたい

前提・実現したいこと

ECCUBE3・デフォルトテンプレートにて、お問い合わせフォームを作成
CSSのリセットで、body,input,textarea などすべての要素に「font-family:'icomoon', 'vdl-v7marugothic', sans-serif;」を適用

(「VDL Ｖ７丸ゴシック」、Adobe Fonts のWebフォントです)

発生している問題・エラーメッセージ

以上の状態で、入力欄内の文字のフォントのウェイトが揃いません。

濁点付きの仮名や複雑な漢字だとそうなるのかと思いきや、そういうわけでもないようです。

検索しても同様の例が出てこないので質問させていただきました。
解消するにはどうすればよいのでしょうか。

どうぞよろしくお願いいたします。

試したこと

input, textarea、さらに placeholder に対してフォントを再設定しましたが、改善されませんでした。

CSS
1input, textarea,
2input:placeholder, textarea:placeholder{
3    font-family: 'vdl-v7marugothic', sans-serif;
4    font-style: normal;
5    font-weight: 700;}

補足情報

入力欄以外の、通常の文章などは全く問題なくきれいに表示されています。

ちなみに、ブラウザの拡張機能でスクリーンショットを撮ろうとすると改善されます。
この状態で一発で表示したいのですが…

補足情報(2)

@yoshinavi さまより返信をいただきました。大変ありがとうございます。
キャッシュクリア (Google Chrome の「キャッシュの消去とハード再読み込み」) の後再確認しましたが、やはり改善なしです。

試しているうちに気付いたのですが、ECCUBEに買物客としてログイン (⇒ お問い合わせフォームを開くと、自分の情報が自動出力されている) すると一発できれいに表示されました。

補足情報(3)

@yoshinavi さまより再度返信をいただきました。大変ありがとうございます。

「Adobe Fonts」以外のwebフォント使用状況
'icomoon'(アイコンフォント) を使っていますが、フォームでは使用しないので、上記CSSで上書きする際は省きました。

google fonts に変えてみる
Googleフォントでは例の現象が起こりませんでした。

ただ、クライアント様がもとのフォントでOKを出しているので、フォントは簡単に替えられません…

補足情報(最終)

解決いたしました。
自己解決の欄に詳細記載します。

yoshinavi

2019/05/27 07:32

＞ブラウザの拡張機能でスクリーンショットを撮ろうとすると改善されます。 →　現在はどうなのでしょうか？キャッシュクリア等で改善されているのでしょうか？

yoshinavi

2019/05/27 08:44

「Adobe Fonts」以外のwebフォントは使用されていますか？その場合の状況はどうでしょうか？

yoshinavi

2019/05/27 08:46

仮に、google fonts（CDN）等での使用はどうでしょうか？フォントによるものか、設定によるものかを確認されては如何でしょうか？

行動規範の内容に同意します

回答1件

自己解決

よくよく調べてみましたら、以下のことに気づきました：

そもそも開発者ツールにて、上記で記載のCSSが反映 (要素に対する設定として認識) されていない
ECCUBE の input や textarea には「.form-control」というクラスが付けられている

よって、試しにクラス名も交えて書いたところ

CSS
1input,
2.form-control, 
3input::placeholder,
4.form-control::placeholder {
5    font-family: 'vdl-v7marugothic', sans-serif;
6	font-style: normal;
7	font-weight: 600;}

解決いたしました。

事前の検索で「input や textarea にはフォントの設定が継承されない」といった主旨の情報を入手していたため警戒していたはずが…。

最初に記載したCSSがなぜ反映されていなかったのか…という疑問は残りますが、ひとまず最大の問題が解決しましたので、「解決済み」とさせていただきます。

何度もデバッグ・解決へのヒントをご提供くださった @yoshinavi さんに心よりお礼申し上げます。

お騒がせいたしました、ありがとうございました。

投稿2019/05/27 10:02

atpat

総合スコア11

yoshinavi

2019/05/27 11:47

コード全体を見ないと何とも言えない部分はありますが、CSSの「詳細度」が絡んでいたのかも知れません。「スッキリ」とは行かないかもですが、解決されて何よりです。 (^^)

x_x

2019/05/28 02:34

Bootstrap 4 が使われているのでは？ Bootstrap 4 には .form-control { font-weight: 400; } があります。

atpat

2019/05/28 03:35

@yoshinavi さんこの度は大変お世話になりました。「詳細度」、内容の方はなんとなく把握しておりましたが、名称は今回初めて知りました。ありがとうございます。ただ、デベロッパーツールでは、「優先順位にかかわらず、その要素にかかわるすべてのCSS設定が記載されたうえで、上書きで無効化されたものは打消し線で表示される」という仕様だったと思いますので、そこに記載すらされていなかったのは何故か…上書きが多すぎるとダメなのか… 引きずっても仕方ないので、後々の宿題にします。本当にありがとうございました。 @x_x さんコメントありがとうございます。たしかにECCUBE3は、デフォルトテンプレートでBootstrapが使われていますね。そのこと自体は把握していたのですが、「.form-control」のクラス名はBootstrap由来なのですね。 ※ちなみにデベロッパーツールで確認したところ、「.form-control」該当の記載はECCUBE3デフォルトテンプレートのほう (style.css) に記載があるようです。Bootstrapバージョンも3でした。 Bootstrapはまだまだ未知の存在なので、調べる良い機会になりました。ありがとうございます。

行動規範の内容に同意します