googleのwebフォントについて

前提

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;

行動規範の内容に同意します

回答1件

ベストアンサー

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

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

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>