質問: ### 前提・実現したいこと * ECCUBE3・デフォルトテンプレートにて、お問い合わせフォームを作成 * CSSのリセットで、body,input,textarea などすべての要素に「font-family:'icomoon', 'vdl-v7marugothic', sans-serif;」を適用 (「VDL V7丸ゴシック」、Adobe Fonts のWebフォントです) ### 発生している問題・エラーメッセージ 以上の状態で、入力欄内の文字のフォントのウェイトが揃いません。 ![お問い合わせフォーム現状](https://teratail-v2.storage.googleapis.com/uploads/contributed_images/c28f40bdfbae223e1ebae96bfe010409.png) 濁点付きの仮名や複雑な漢字だとそうなるのかと思いきや、そういうわけでもないようです。 検索しても同様の例が出てこないので質問させていただきました。 解消するにはどうすればよいのでしょうか。 どうぞよろしくお願いいたします。 ### 試したこと input, textarea、さらに placeholder に対してフォントを再設定しましたが、改善されませんでした。 ``` input, textarea, input:placeholder, textarea:placeholder{ font-family: 'vdl-v7marugothic', sans-serif; font-style: normal; font-weight: 700;} ``` ### 補足情報 入力欄以外の、通常の文章などは全く問題なくきれいに表示されています。 ![通常コンテンツ](https://teratail-v2.storage.googleapis.com/uploads/contributed_images/ff0f9428a899d52b941124375ba53822.png) ちなみに、ブラウザの拡張機能でスクリーンショットを撮ろうとすると改善されます。 この状態で一発で表示したいのですが... ![イメージ説明](https://teratail-v2.storage.googleapis.com/uploads/contributed_images/55fc5066beee456acbd042c1871a3ca4.png) ### 補足情報(2) @yoshinavi さまより返信をいただきました。大変ありがとうございます。 キャッシュクリア (Google Chrome の「キャッシュの消去とハード再読み込み」) の後再確認しましたが、やはり改善なしです。 ![イメージ説明](https://teratail-v2.storage.googleapis.com/uploads/contributed_images/72de106dc095a4628075e320eccb93fe.png) 試しているうちに気付いたのですが、ECCUBEに買物客としてログイン (⇒ お問い合わせフォームを開くと、自分の情報が自動出力されている) すると一発できれいに表示されました。 ![イメージ説明](https://teratail-v2.storage.googleapis.com/uploads/contributed_images/6df258ced902860389d093f6cf461742.png) ### 補足情報(3) @yoshinavi さまより再度返信をいただきました。大変ありがとうございます。 **「Adobe Fonts」以外のwebフォント 使用状況** 'icomoon'(アイコンフォント) を使っていますが、フォームでは使用しないので、上記CSSで上書きする際は省きました。 **google fonts に変えてみる** Googleフォントでは例の現象が起こりませんでした。 ![イメージ説明](https://teratail-v2.storage.googleapis.com/uploads/contributed_images/fa8d3f6c9afe9153f6b30acd0c67113e.png) ただ、クライアント様がもとのフォントでOKを出しているので、フォントは簡単に替えられません... ### 補足情報(最終) 解決いたしました。 自己解決の欄に詳細記載します。
回答: よくよく調べてみましたら、以下のことに気づきました: * そもそも開発者ツールにて、上記で記載のCSSが反映 (要素に対する設定として認識) されていない * ECCUBE の input や textarea には「.form-control」というクラスが付けられている よって、試しにクラス名も交えて書いたところ ``` input, .form-control, input::placeholder, .form-control::placeholder { font-family: 'vdl-v7marugothic', sans-serif; font-style: normal; font-weight: 600;} ``` 解決いたしました。 事前の検索で「input や textarea にはフォントの設定が継承されない」といった主旨の情報を入手していたため警戒していたはずが...。 最初に記載したCSSがなぜ反映されていなかったのか...という疑問は残りますが、ひとまず最大の問題が解決しましたので、「解決済み」とさせていただきます。 何度もデバッグ・解決へのヒントをご提供くださった @yoshinavi さんに心よりお礼申し上げます。 お騒がせいたしました、ありがとうございました。