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

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

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

Windows 10は、マイクロソフト社がリリースしたOSです。Modern UIを標準画面にした8.1から、10では再びデスクトップ主体に戻され、UIも変更されています。PCやスマホ、タブレットなど様々なデバイスに幅広く対応していることが特徴です。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

コードレビュー

コードレビューは、ソフトウェア開発の一工程で、 ソースコードの検査を行い、開発工程で見過ごされた誤りを検出する事で、 ソフトウェア品質を高めるためのものです。

Brackets

Bracketsは、オープンソースで開発されているHTML/CSS/JavaScriptのコードエディターです。

Q&A

解決済

4回答

1691閲覧

グーグルフォントが思ったように指定されない原因

mitrasi

総合スコア49

Windows 10

Windows 10は、マイクロソフト社がリリースしたOSです。Modern UIを標準画面にした8.1から、10では再びデスクトップ主体に戻され、UIも変更されています。PCやスマホ、タブレットなど様々なデバイスに幅広く対応していることが特徴です。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

コードレビュー

コードレビューは、ソフトウェア開発の一工程で、 ソースコードの検査を行い、開発工程で見過ごされた誤りを検出する事で、 ソフトウェア品質を高めるためのものです。

Brackets

Bracketsは、オープンソースで開発されているHTML/CSS/JavaScriptのコードエディターです。

0グッド

0クリップ

投稿2021/02/16 08:45

編集2021/02/17 23:55

前提・実現したいこと

グーグルフォントのフォントファミリーの設定の仕方についての質問です。
解説動画もみて、同様の指定方法をしているはずなのにフォントファミリーが適用されません。
(全体的に欧文も和文も効いていないように思います。)

該当のソースコード

HTML

1<!DOCTYPE html> 2<html lang="ja"> 3 4<head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width,initial-scale=1"> 7 <link rel="stylesheet" href="css/reset.css"> 8 <link rel="stylesheet" href="css/style.css"> 9 <link rel="stylesheet" href="css/responsive.css"> 10 11 12 13 <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&family=Noto+Serif:ital,wght@0,400;0,700;1,700&display=swap" rel="stylesheet"> 14 15 16 <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet"> 17 <title>模写コーディング 中級</title> 18</head> 19 20<body> 21 <header> 22 <div class="fv"> 23 <div class="header-wrapper"> 24 <h1 class="header-left"><a href="#">Cresta Design</a></h1> 25 <nav class="header-nav"> 26 <li><a class="header-item" href="#">Concept</a></li> 27 <li><a class="header-item" href="#">Service</a></li> 28 <li><a class="header-item" href="#">Works</a></li> 29 <li><a class="header-item" href="#">Contact</a></li> 30 </nav> 31 </div> 32 </div> 33 </header> 34 35 36</html> 37

該当のソースコード

CSS

1@charset "UTF-8"; 2html { 3 font-size: 62.5%; 4} 5html body { 6 line-height: 1.8; 7 /* font-family: 'Noto Serif', sans-serif, 'Noto Serif JP', sans-serif;*/ 8 font-family: "Noto Serif", "Noto Serif JP", serif; 9 /*font-family: 'Noto Serif', 'Noto Serif JP', serif;*/ 10 font-size: 1.6rem; 11 width: 100%; 12 /* font-weight: bold;*/ 13 /*半透明のメッセージ部*/ 14}

試したこと

解説動画を参照し、解説コードと見比べて違いを探す。もしくは切り貼りしてみる。

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

OS:Windows
エディタ:Brackets
ブラウザ:クローム

参考サイト様

https://crestadesign.org/cording-traning/

目標物

イメージ説明

グーグルフォント修正版追加後、フォントファミリー訂正後

HTML

1<!DOCTYPE html> 2<html lang="ja"> 3 4<head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width,initial-scale=1"> 7 8 <link rel="preconnect" href="https://fonts.gstatic.com"> 9 <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+JP&family=Noto+Serif:wght@700&display=swap" rel="stylesheet"> 10 <link rel="stylesheet" href="css/reset.css"> 11 <link rel="stylesheet" href="css/style.css"> 12 <link rel="stylesheet" href="css/responsive.css"> 13 <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet"> 14 <title>模写コーディング 中級</title> 15</head> 16 17<body> 18 <header> 19 <div class="fv"> 20 <div class="header-wrapper"> 21 <h1 class="header-left"><a href="#">Cresta Design</a></h1> 22 <nav class="header-nav"> 23 <li><a class="header-item" href="#">Concept</a></li> 24 <li><a class="header-item" href="#">Service</a></li> 25 <li><a class="header-item" href="#">Works</a></li> 26 <li><a class="header-item" href="#">Contact</a></li> 27 </nav> 28 </div> 29 30 <div class="main-copy-wrapper"> 31 <p class="main-title">Design for Smile.</p> 32 <p class="main-text">快適なオフィスをデザインする</p> 33 </div> 34 </div> 35 </header> 36 <main> 37 38 39 <section id="concept"> 40 41 42 <h2 class="section-title">CONCEPT 43 44 </h2> 45 46 47 <div class="wrapper"> 48 <h3 class="sub-title">“働きたくなる空間”をデザインすることで 人々を幸せにする。</h3> 49 <div class="concept-item"> 50 <p class="concept-text">私たちは、オフィスに特化した空間デザイン専門としております。その理由は、「働きたくなる空間で仕事ができれば多くの人を幸せにできるのではないか」と考えるためです。そんな想いの株式会社Cresta Designだからこそできる空間デザインを提供させていただきます。</p> 51 <img class="concept-img" src="img/concept-image@2x.jpg" alt="オフィス"> 52 </div> 53 <p class="message-right">Our Concept</p> 54 </div> 55 </section> 56 57 <section id="works"> 58 <h2 class="section-title">Works</h2> 59 <div class="wrapper"> 60 <ul class="works-list"> 61 <li class="works-card"> 62 <img class="works-img" src="img/card-img01@2x.jpg" alt="職場"> 63 <p class="works-text">新規サイトを公開しました。今回のサイトは白と黒を基調にしたミニマルなデザインになっています。</p> 64 </li> 65 <li class="works-card center"> 66 <img class="works-img" src="img/card-img02@2x.jpg" alt="日の当たるデスク"> 67 <p class="works-text">新規サイトを公開しました。今回のサイトは白と黒を基調にしたミニマルなデザインになっています。</p> 68 </li> 69 <li class="works-card"> 70 <img class="works-img" src="img/card-img03@2x.jpg" alt="解放空間"> 71 <p class="works-text">新規サイトを公開しました。今回のサイトは白と黒を基調にしたミニマルなデザインになっています。</p> 72 </li> 73 </ul> 74 <input class="btn" type="submit" value="View more"> 75 <p class="message-left">Our Works</p> 76 </div> 77 </section> 78 79 <section id="service"> 80 81 <h2 class="section-title">Service 82 83 </h2> 84 85 <div class="wrapper"> 86 <h3 class="sub-title"></h3> 87 <ul class="service-list"> 88 <li class="service-card"><img class="service-img" src="img/service-img01@2x.jpg" alt="計画"> 89 <p class="service-text">Hearing</p> 90 </li> 91 <li class="service-card"><img class="service-img" src="img/service-img02@2x.jpg" alt="会議"> 92 <p class="service-text">Planning</p> 93 </li> 94 <li class="service-card"><img class="service-img" src="img/sevice-img03@2x.jpg" alt="商談"> 95 <p class="service-text">Direction</p> 96 </li> 97 </ul> 98 <p class="message-right">Our Service</p> 99 </div> 100 </section> 101 102 <section id="contact"> 103 <h2 class="section-title">Contact 104 </h2> 105 106 <div class="wrapper"> 107 <p>お気軽にご相談ください。</p> 108 <input class="btn" type="submit" value="Contact"> 109 </div> 110 <p class="message-left">Contact us</p> 111 </section> 112 </main> 113 <footer><small>©︎cresta.design all rights reserved</small></footer> 114</body> 115 116</html> 117

CSS

1@charset "UTF-8"; 2* { 3 box-sizing: border-box; 4} 5 6html { 7 font-size: 62.5%; 8} 9html body { 10 line-height: 1.8; 11 12 font-family: "Noto Serif", "Noto Serif JP", serif; 13 14 font-size: 1.6rem; 15 width: 100%; 16 17} 18html body img { 19 max-width: 100%; 20 vertical-align: bottom; 21} 22html body a { 23 text-decoration: none; 24 color: #FFFFFF; 25} 26html body .btn { 27 background-color: yellow; 28 border-radius: 51px; 29 width: 235px; 30 height: 59px; 31 font-weight: bold; 32 margin: 80px; 33 border: none; 34} 35html body li { 36 list-style: none; 37} 38html body h2 { 39 font-size: 6rem; 40 margin-bottom: 73px; 41 font-weight: bold; 42 font-style: italic; 43} 44html body .section-title::after { 45 content: ""; 46 display: inline-block; 47 background-color: #282F35; 48 width: 200px; 49 height: 5px; 50 margin-left: 30px; 51 vertical-align: middle; 52} 53html body .message-right { 54 font-size: 7rem; 55 color: #282F35; 56 text-align: right; 57 opacity: 0.1; 58 font-weight: bold; 59 letter-spacing: 4.5; 60 margin-top: 70px; 61} 62html body .message-left { 63 font-size: 7rem; 64 color: #FFFFFF; 65 text-align: left; 66 opacity: 0.1; 67 font-weight: bold; 68 margin-top: 70px; 69} 70html body h3 { 71 font-weight: bold; 72 font-size: 3rem; 73} 74html body section { 75 padding: 99px 10% 73px; 76} 77html body section .wrapper { 78 text-align: center; 79 margin: 0 auto; 80} 81html body header .fv { 82 background-image: url(../img/fv-bgi_01@2x.jpg); 83 background-position: center; 84 background-size: cover; 85 height: 100vh; 86 position: relative; 87} 88html body header .fv .header-wrapper, 89html body header .fv .main-copy-wrapper { 90 padding: 0 120px; 91} 92html body header .fv .header-wrapper { 93 display: flex; 94 justify-content: space-between; 95 padding: 19px 120px; 96} 97html body header .fv .header-wrapper .header-left { 98 font-size: 2.6rem; 99 color: #FFFFFF; 100} 101html body header .fv .header-wrapper .header-nav { 102 display: flex; 103} 104html body header .fv .header-wrapper .header-nav .header-item { 105 padding-right: 35px; 106} 107html body header .fv .main-copy-wrapper { 108 color: #FFFFFF; 109 position: absolute; 110 top: 60%; 111 text-align: center; 112} 113html body header .fv .main-copy-wrapper .main-title, 114html body header .fv .main-copy-wrapper .main-text { 115 font-weight: bold; 116} 117html body header .fv .main-copy-wrapper .main-title { 118 font-size: 7rem; 119} 120html body header .fv .main-copy-wrapper .main-text { 121 padding-bottom: 172px; 122 font-size: 3rem; 123 width: 478px; 124 height: 53px; 125} 126html body #concept .sub-title { 127 max-width: 600px; 128 text-align: center; 129} 130html body #concept .concept-item { 131 display: flex; 132 justify-content: center; 133 align-items: center; 134} 135html body #concept .concept-item .concept-text, 136html body #concept .concept-item .concept-img { 137 max-width: 440px; 138} 139html body #concept .concept-item .concept-text { 140 margin-right: 120px; 141} 142html body #works { 143 background-image: url(../img/works-bgi@2x.jpg); 144 background-position: center; 145 background-size: cover; 146} 147html body #works .section-title { 148 color: #FFFFFF; 149 text-align: right; 150} 151html body #works .section-title:after { 152 background-color: #FFFFFF; 153} 154html body #works .works-list { 155 justify-content: center; 156 align-items: center; 157 display: flex; 158 flex-wrap: wrap; 159} 160html body #works .works-list .works-card { 161 max-width: 320px; 162 box-shadow: 0px 0px 6px #000000; 163 background-color: #FFFFFF; 164 font-family: "Noto Serif JP", serif; 165 font-weight: normal; 166} 167html body #works .works-list .works-card .works-text { 168 padding: 25px 20px; 169} 170html body #works .works-list .center { 171 margin: 0 20px; 172} 173html body #service .service-list { 174 display: flex; 175} 176html body #service .service-list .service-card { 177 display: flex; 178 flex-direction: column; 179 position: relative; 180} 181html body #service .service-list .service-card .service-text { 182 color: #FFFFFF; 183 position: absolute; 184 top: 35%; 185 left: 30%; 186 font-size: 4rem; 187 font-weight: bold; 188} 189html body #contact { 190 color: #FFFFFF; 191 background-image: url(../img/contact-bgi@2x.jpg); 192 background-position: center; 193 background-size: cover; 194} 195html body #contact .section-title:after { 196 background-color: #FFFFFF; 197} 198html body #contact .section-title { 199 text-align: right; 200} 201html body footer { 202 text-align: center; 203 line-height: 78px; 204}

イメージ説明

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

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

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

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

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

m.ts10806

2021/02/16 10:20 編集

>思ったように 認識改めた方が成長につながります。 プログラムは書いた通りに動く。思った通りには動かない。 「思った通り」なんて書いても他人には伝わらない。
m.ts10806

2021/02/16 10:23

あと、いろいろcssつけてますが、最小限のコードで試しては? こんなに色々入ってたら原因切り分け難しいですよ。
mitrasi

2021/02/16 12:04

さようでございますね。 大変失礼いたしました???? あと、コメントアウトをたくさん残しているのは「これはうまくいかなかった」など間違えた痕跡のためにあえて残してあるものです。ご了承ください。
m.ts10806

2021/02/16 12:12

コメントアウト部分って結局読み込まないから、ちょっと厳しめに言うと「邪魔」なんですよね、他者には。 なので、そこは今回の「最小限のコードで試して」には関わってこない部分で言ってません。「いろいろcssつけてますが」はreset.cssやresponsive.cssのことを言っています。 当然、提示されていると思われるstyle.cssの長々とした記述。 フォントだけならfont-familyがあるセレクタだけで十分ですし、 こちらの手元でそのセレクタとhttps://fonts.googleapis.com/css2の読み込みだけであとは同じbodyでNoto Serifは効いてるように見えました。 (どういうフォントかまで調べてないけど、有効にはなっていた) まずはミニマムでお試しを。 HTMLもこんなにたくさんなくていいですよ。英数記号全角あわせて5文字くらいあれば十分
mitrasi

2021/02/16 13:38

そうだったんですね、重ね重ね失礼しました。 見た感じだとセリフ体にはなっているようですが、目標物のフォントとは異なっているように見えますので困っております。 掲示コードは必要部のみに訂正いたします。
int32_t

2021/02/17 08:08

使いたいフォントは Noto Serif, Noto Serif JP, Noto Sans JP のどれですか?
mitrasi

2021/02/17 12:34

「Noto Serif」と「Noto Serif JP」です。
int32_t

2021/02/17 15:01

欲しい動作は、欧文に Noto Serif、和文に Noto Serif JP、でよろしいでしょうか。 (こういう情報が質問文に必須です)
mitrasi

2021/02/17 23:56

質問の仕方すら至らずに申し訳ありません???? 的確に質問できるよう気を付けます
guest

回答4

0

html

1<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&family=Noto+Serif:ital,wght@0,400;0,700;1,700&display=swap" rel="stylesheet">

このURLで設定されるのは、Noto Sans JP と Noto Serif です。Noto Serif JP は設定されません。

これを、Noto Serif JP が設定されるように修正すれば、font-family の指定はfont-family: "Noto Serif", "Noto Serif JP", serif; のままで大丈夫です。
1つのルールセット中で font-family を2回書くと、後に書いたものだけが有効になるので、2つに分けてはいけません。


実際に使われているフォントを確認するには、開発者ツールを開き Elements タブで調べたい要素を選択して右のペインの Computed タブを選択してその画面の最下部を見ます。Rendered Fonts というセクションがあるはずです。

イメージ説明

投稿2021/02/17 15:11

編集2021/02/17 15:13
int32_t

総合スコア20659

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

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

mitrasi

2021/02/17 23:48

そうだったのですね!!添付画像までありがとうございます! 使用されているフォントの確認の仕方非常にわかりやすくて助かります! ご教授頂いた通りにhtmlでのフォントの指定とcssのフォントファミリーの書き方を訂正して、確認してみたところヘッダー部分は欧文に Noto Serif、和文に Noto Serif JPとなっています。しかし、それでも見た目が目標物のようにはなりません????(font-weight:boldはかけています) また、それ以降のmain内部の各sectionでは欧文も和文も「Noto Serif Noto Serif JP」両方が適用されている状態になっているようで困っております。 ※長くなりますのでコードは質問部に追記致します。
int32_t

2021/02/17 23:59

まあ目標物の画像を見ると、Serif 系には見えませんね。本当に欲しいのは Sans 系なのでは。
mitrasi

2021/02/18 00:20

そうですよね… ただXDを見る限りではSerifを指定しているように理解したのですが、そもそも私のXDの見方が間違っているのでしょうか? (XDの画像追加します)
guest

0

ベストアンサー

文字のみだと現状の把握と希望がわかりづらいので回答に書きます。

参考サイトの説明動画やサンプルコードを実際に確認したものがA、
質問者さんが目標物として質問に提示されているものがBです。
イメージ説明

質問内容やコメントから
https://crestadesign.org/cording-traning/ をもとに学習している
・少なくとも「Design for Smile.」に"Noto Serif"、「快適なオフィスをデザインする」に"Noto Serif JP"を効かせたい
と読み取りました。

GoogleFontsでフォントを確認すると"Noto Serif"、"Noto Serif JP"の形はAと同じものだと思います。
イメージ説明

確認させてください
・ご自身の現状はAとBどちらですか?
・ご自身の目標(最終的な希望の形)はAとBどちらですか?

投稿2021/02/18 02:14

dit.

総合スコア3235

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

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

mitrasi

2021/02/18 02:48 編集

【目指すもの】B 欧文には「Noto Serif」 和文には「Noto Serif JP」を適用 【現状】A 欧文には「Noto Serif」 和文には「Noto Serif」「Noto Serif JP」が適用 dit.様が「効いているのでは?」とおっしゃられていたのは、「Aを指定していてAになっているのでできているのでは?」ということだったのですね。 ただ、私の読解が間違っていなければ解説コードやXDは 【欧文には「Noto Serif」 和文には「Noto Serif JP」を適用】 だと理解していますが、そのように指定した結果Bになっていない。 故に、その原因と解決方法が知りたいのです。 (回答者様にここまでお膳立てしていただいて申し訳ないです????)
dit.

2021/02/18 03:10

XDの画像(ここではB)はNoto Serif、Noto Serif JPではありません。 XDにはフォントが適用されていないのでBにする必要はない、という旨のコメントをしたつもりでした。 あまり調べてもいないので憶測になりますがXDはWebフォントを読み込めず、自身のパソコンにインストールされてるフォントしか適切に表示されないのではないかと思います。
mitrasi

2021/02/18 03:44 編集

XDの指示ではNoto Serif、Noto Serif JPとなっているが、XDはWebフォントを読み込めていないためBのようになっているだけであり、指示通りの指定「Noto Serif、Noto Serif JP」を行っているのであればB(Webフォントを読み込めていない状態)になっていなくて(むしろ)いい ということでしょうか? それにしても欧文はまだしも和文が両方適用されてしまうのは気になります… (ちまちましたやつですみません) ただもし現状が正解であるならば、「和文だけが両方適用される問題」に関しては別途質問と致したいと思います。
dit.

2021/02/18 05:00

はい、今回のフォントに関して言えばXDを目標にしてはいけません。 「欧文はまだしも和文が両方適用されてしまう」というのは質問の最後に提示されている画像において出ている Rendered Fonts Noto Serif JP—Network resource(27 glyphs) Noto Serif—Network resource(2 glyphs) の部分でしょうか? 選択されているのが「“働きたくなる空間”をデザインすることで…」の部分に見えるので、 “ ”はNoto Serif、それ以外の日本語部分がNoto Serif JPでカウントされているのではないかと思います。 font-family: "Noto Serif", "Noto Serif JP", serif;では複数のフォントを指定していますので まずは"Noto Serif"にその文字があるか確かめ、あれば"Noto Serif"で表示されます。 それが無ければ"Noto Serif JP"、それもなければserif系の文字で表示されます。 (簡単に言うとserifは明朝体系、sans-serifはゴシック体系です) また、このフォントは1文字ずつ判定されるので、1文の中で"Noto Serif"と"Noto Serif JP"が混在する可能性はあります。 font-familyについて比較的わかりやすくまとめられているページがありましたので紹介します。 https://saruwakakun.com/html-css/basic/font-family-how-to
mitrasi

2021/02/18 05:32

なるほどです!! 一見英字は混合していないように見えましたが " " が入っていたために両方反映されていたのですね。 試しに英字も記号も入っていないテキスト部(class="work-text")を選択してみたところ、「Noto Serif JP」のみで適用されておりましたので、正しく適用できていると判断しました。 サルワカさんの記事私もいつも大変お世話になっております。 今一度見直してみますね!! グーグルフォント正しく使えなかったらほんとにまずいと思っていたので非常に助かりました!ありがとうございました。
dit.

2021/02/18 06:09

ご納得いただけたようで何よりです。
guest

0

質問欄が上限に達してしまったようなので、やむなくこちらから画像の掲示失礼致します。

イメージ説明

イメージ説明

投稿2021/02/18 00:23

mitrasi

総合スコア49

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

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

dit.

2021/02/18 00:54

提示のXDの画面では逆にNoto Serif JPは効いていないように見えます。 https://crestadesign.org/cording-traning/ にあるサンプルコード(目標物)や動画で確認できる法のフォントがNoto Serif JPです。 ※GoogleFonts(https://fonts.google.com/)でNoto Serif JPを検索してフォントデザインを確認してみてください。
mitrasi

2021/02/18 01:15

情報提供ありがとうございます。 解説のサンプルコードとグーグルフォントの「Noto Serif JP」は拝見いたしました。
dit.

2021/02/18 01:33

質問の「グーグルフォント修正版追加後、フォントファミリー訂正後」の所にある画像が現状なのだとしたらNoto Serif JPが効いていることになるので、そもそも「フォントファミリーが適用されません」という問題自体が発生していないのではないかと思います。
mitrasi

2021/02/18 01:41

フォントファミリー自体は効くようになったかもしれませんが、結果として指定したいフォントが指定したい箇所に正しく適用できていないのですが…????
dit.

2021/02/18 01:45

文字だけだとちょっとわかりづらいので画像付きで回答させていただきます。
mitrasi

2021/02/18 01:49

お手数おかけしますが、よろしくお願い致します。 大変助かります。
guest

0

こんにちは。
この度表題の件につきまして解決しましたので、ご報告致します。

①そもそもグーグルフォントが効いていなかったのか、指定したいフォントになっていなかっただけなのか
→検証ツールでは「Noto Serif JP」は適用されていたので推測ですがグーグルフォント自体は効いていたと思われます。
ただし、うまくいかなかった可能性として考えられるのは
「head内の一番最後に読み込んでいたこと(読み込みの順番)」
「グーグルフォントのそのままコピペする部分が一部欠けていたこと」
と考えております。
※とはいっても、コメントアウトを試してみたところ特に変化はありませんでした。

②指定したいフォントを適用する
→こちらは、cssのフォントファミリーの記述の際に以下のように致しました。

【成功例】

css

1font-family: 'Noto Serif', sans-serif;/*2文に分けてみる*/ 2 font-family: 'Noto Serif JP', sans-serif;/*serif → sans-serif に変更*/

sans-serif に変更したのは、グーグルフォントのコピペ欄の下のcssの記述方法の箇所にそのように書いてあったので変えてみたら効きました。

ご回答くださった皆様、誠にありがとうございました。

投稿2021/02/17 07:54

編集2021/02/17 07:56
mitrasi

総合スコア49

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

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

int32_t

2021/02/17 08:09 編集

serif → sans-serif で表示が変わるということは、ウェブフォントは使われていないのでは。
mitrasi

2021/02/17 12:37

そうなのでしょうか????? グーグルフォントが適用されているかは結局謎ですが、「Noto Serif JP」は適用されているようでした。(ただし、欧文和文ともに「Noto Serif JP」が適用されているようでもあり、それは未解決です) もしお心当たりございましたら、ぜひご教授願いたいです。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問