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

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

ただいまの
回答率

87.58%

CSSに設定したAdobe fontが反映されない。

受付中

回答 0

投稿

  • 評価
  • クリップ 0
  • VIEW 1,056

score 15

前提・実現したいこと

placeholderで設定したテキストにadobe fontを反映させたい。

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

一部の文字にadobe font(a-otf-midashi-go-mb31-pr6n)が反映されない。
イメージ説明

該当のソースコード

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/style.css">
    <title>jissen</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>
      // Adobe Font
      (function(d) {
        var config = {
          kitId: 'znv5pdh',
          scriptTimeout: 3000,
          async: true
        },
        h=d.documentElement,t=setTimeout(function(){h.className=h.className.replace(/\bwf-loading\b/g,"")+" wf-inactive";},config.scriptTimeout),tk=d.createElement("script"),f=false,s=d.getElementsByTagName("script")[0],a;h.className+=" wf-loading";tk.src='https://use.typekit.net/'+config.kitId+'.js';tk.async=true;tk.onload=tk.onreadystatechange=function(){a=this.readyState;if(f||a&&a!="complete"&&a!="loaded")return;f=true;clearTimeout(t);try{Typekit.load(config)}catch(e){}};s.parentNode.insertBefore(tk,s)
      })(document);
      // Adobe Font
      </script>
</head>
<body>

<!-- contact -->
<section class="contact" id="contact">
<div class="contact-inner">
<div class="contact-wrap">

<div class="contact-box-left">
<div class="contact-form">
<div class="contact-form-box">
<label class="contact-label">お名前<span class="contact-mark">*</span></label>
<ul class="contact-list">
<li class="contact-item"><input class="contact-item-txts" type="text" name="name" placeholder="名" value=""></li>
<li class="contact-item"><input class="contact-item-txts" type="text" name="name" placeholder="性" value=""></li>
</ul>
</div>
<div class="contact-form-box">
<label class="contact-label">お名前(フリガナ)<span class="contact-mark">*</span></label>
<ul class="contact-list">
<li class="contact-item"><input class="contact-item-txts" type="text" name="furigana" placeholder="セイ" value=""></li>
<li class="contact-item"><input class="contact-item-txts" type="text" name="furigana" placeholder="メイ" value=""></li>
</ul>
</div>
<div class="contact-form-box">
<label class="contact-label">メールアドレス<span class="contact-mark">*</span></label>
<input class="contact-item-txt" type="text" name="email" placeholder="abcprograming@info.jp" value="">
</div>
<div class="contact-form-box">
<label class="contact-label">お申込み内容<span class="contact-mark">*</span></label>
<textarea class="contact-item-txtarea" name="content" placeholder="こちらにご相談内容・お申し込み内容をご記入ください。"></textarea>
</div>
</div>
</div>
</div>
</div>
</section><!-- /contact -->

<script src="js/javascript.js"></script>
</body>
</html>
@charset "UTF-8";
vvvvvhtml, body, h1, h2, h3, h4, ul, ol, dl, li, dt, dd, p, div, span, img, a, table, tr, th, td {
  margin: 0;
  padding: 0;
  border: 0;
  font-weight: normal;
  font-size: 100%;
  vertical-align: baseline;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

article, header, footer, aside, figure, figcaption, nav, section {
  display: block;
}

body {
  line-height: 1;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

ol, ul {
  list-style: none;
  list-style-type: none;
}

.webFonts {
  font-family: kan415typos-std, "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
}

.contact-inner {
  width: 1200px;
  max-width: 100%;
  margin: 0 auto;
  margin-bottom: 112px;
}

.contact-wrap {
  display: flex;
  justify-content: space-between;
}

.contact-box-left {
  max-width: 616px;
}

.contact-tit {
  font-size: 23px;
  font-family: a-otf-midashi-go-mb31-pr6n, sans-serif;
  margin-top: 54px;
  margin-bottom: 24px;
}

.contact-tit span {
  background: linear-gradient(transparent 60%, rgba(252, 143, 0, 0.35) 0%);
}

.contact-txt {
  font-size: 20px;
  font-family: a-otf-midashi-go-mb31-pr6n, sans-serif;
  max-width: 480px;
  line-height: 36px;
  margin-bottom: 20px;
}

.contact-txt-sub {
  font-size: 14px;
  font-family: a-otf-midashi-go-mb31-pr6n, sans-serif;
  max-width: 486px;
  line-height: 30px;
}

.contact-form {
  max-width: 616px;
  border-radius: 3px;
  background-color: #f6f6f6;
  vertical-align: middle;
  padding: 47px 48px 20px 20px;
  box-sizing: border-box;
}

.contact-form-box {
  display: flex;
  justify-content: space-between;
  border-radius: 3px;
  padding: 0 0 10px 20px;
}

.contact-item-txt, .contact-item-txtarea {
  display: block;
  max-width: 365px;
  float: right;
  width: 390px;
  height: 44px;
  padding: 6px 12px;
  font-size: 12px;
  font-family: a-otf-midashi-go-mb31-pr6n, sans-serif;
  line-height: 1.42857143;
  color: #555;
  cursor: pointer;
  background-color: #fff;
  border: 1px solid #ccc;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
  -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
  transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
  margin: 0;
  box-sizing: border-box;
}

.contact-item-txts {
  display: block;
  width: 180px;
  height: 44px;
  padding: 6px 12px;
  font-size: 12px;
  font-family: a-otf-midashi-go-mb31-pr6n, sans-serif;
  line-height: 1.42857143;
  color: #555;
  cursor: pointer;
  background-color: #fff;
  border: 1px solid #ccc;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
  -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
  transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
  box-sizing: border-box;
}

.contact-item-txtarea {
  height: 112px;
}

.contact-label {
  margin-bottom: 0;
  text-align: left;
  width: 113px;
  float: left;
  position: relative;
  line-height: 44px;
  font-size: 11px;
  font-family: a-otf-midashi-go-mb31-pr6n, sans-serif;
  min-height: 1px;
  padding-right: 40px;
  padding-left: 15px;
}

.contact-list {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
}

.contact-item:nth-child(1) {
  margin-right: 5px;
}

.contact-mark {
  color: red;
}

試したこと

・https://helpx.adobe.com/jp/creative-cloud/kb/cq03130152.html
上記サイトを参考にCreative Cloudのweb fontのオンとオフを切り替える。
➡︎効果なし。

・https://on-ze.com/archives/7196
上記サイトを参考にfont-familiyでフォントを指定。
➡︎効果なし。

初心者の拙い質問ではありますが、どなたかご教授いただけたら幸いです。

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

Creative Cloudのデスクトップアプリはログイン中です。

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

まだ回答がついていません

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

  • ただいまの回答率 87.58%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る