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

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

新規登録して質問してみよう
ただいま回答率
86.12%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

解決済

googleのwebフォントについて

yunosuke
yunosuke

総合スコア18

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

1回答

0グッド

0クリップ

160閲覧

投稿2022/11/28 10:06

前提

Noto Sans Japaneseの400、500といった両方使うことは可能でしょうか?

  • Regular 400
  • Medium 500

実現したいこと

CSS上だと400と700しか適用されないみたいなので、両方読み込んで使うしか方法はなさそうですか?
ご回答頂けると嬉しいです。

css

1 2@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP&display=swap'); 3 4font-family: 'Noto Serif JP', serif; 5font-weight:500;

以下のような質問にはグッドを送りましょう

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

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

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

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

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

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

回答1

0

ベストアンサー

両方読み込んで使うしか方法はなさそうですか?

そうですね、
ウェイト別で読み込むのが一番確実かと。

html

1<!DOCTYPE html> 2<html> 3<head> 4<link rel="preconnect" href="https://fonts.googleapis.com"> 5<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin=""> 6<link type="text/css" rel="stylesheet" as="style" href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400&display=swap"> 7<link type="text/css" rel="stylesheet" as="style" href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@500&display=swap"> 8<link type="text/css" rel="stylesheet" as="style" href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@700&display=swap"> 9<style> 10.noto { 11 font-family: "Noto Sans JP"; 12} 13.notoWeight400 { 14 font-weight: 400; 15} 16.notoWeight500 { 17 font-weight: 500; 18} 19.notoWeight700 { 20 font-weight: 400; 21} 22</style> 23</head> 24<body> 25 <p class="noto notoWeight400">ウェイト400</p> 26 <p class="noto notoWeight500">ウェイト500</p> 27 <p class="noto notoWeight700">ウェイト700</p> 28</body> 29</html>

ただし、これだと、ウェイト別のフォントファイルを読み込むことになるので、
重くなります。
表示速度を速くしたいならば、適用する文字を限定したりなど、
工夫が必要になります。

投稿2022/11/29 02:07

miyabi_takatsuk

総合スコア9390

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

回答へのコメント

yunosuke

2022/12/02 04:57

ありがとうございます!うまくサイトに適用することができました。

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

ただいまの回答率
86.12%

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

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

質問する

関連した質問

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

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。