Q&A
実際にフォントを切り替えたい要素はどこでしょうか。
Bootstrapでbodyのfont-familyを指定しましたが、変わりません。
idex.html
1<!DOCTYPE html> 2<html lang="ja" dir="ltr"> 3<head> 4 <meta charset="utf-8"> 5 6........ 7 8<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> 9 10 <link rel="stylesheet" href="css/main.css"> 11 <link rel="icon" type="image/vnd.microsoft.icon" href="images/favicon.ico"> 12 13 <link href="https://use.fontawesome.com/releases/v5.11.2/css/all.css" rel="stylesheet"> 14 15 <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> 16 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> 17 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> 18 <title>タイトル予定</title> 19</head> 20<body> 21 22<ul class="list-group"> 23 <li class="list-group-item">Item #1</li> <!--ここでmuliフォントを使いたいです。--> 24 <li class="list-group-item">Item #2</li><!--ここでmuliフォントを使いたいです。--> 25 <li class="list-group-item">Item #3</li><!--ここでmuliフォントを使いたいです。--> 26</ul> 27 28</body>
main.css
1body{ 2 .......... 3 font-family: 'Muli', sans-serif; 4} 5
追記しました。
ブラウザの開発ツールを確認して、「CSS自体が効いていない」のか「CSSは適用されているけどフォントが変わらない」のか、確認してみてください。
回答2件
0
ベストアンサー
Google Fontsに用意されているようなのでこちらを<head>内に入れてみてください。
<link href="https://fonts.googleapis.com/css2?family=Muli&display=swap" rel="stylesheet">
劇的に変わったのがわかるようなフォントではないので特徴的な文字で変化を確認してください。
（小文字のaとかわかりやすいかもです。）
追記として、li部分にだけ効かせたいのであればbodyではなく以下の指定の方が良いかと思います。
css
1.list-group li{ 2 font-family: 'Muli', sans-serif; 3}
投稿2020/06/02 04:46
編集2020/06/02 04:50
総合スコア3235
あなたの回答
tips
プレビュー
