teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

2

追記

2018/08/10 14:30

投稿

退会済みユーザー
answer CHANGED
@@ -1,4 +1,28 @@
1
1
  ローカルでページを開いていませんか?
2
2
  もしそうなら、URLを `https://fonts.googleapis.com/css?family=Cormorant+Infant` に書き換えてみてください。
3
3
  `//fonts.googleapis.com` のようにプロトコルを省略すると、そのページと同じプロトコルが使用されます。
4
- ローカルであれば `file://fonts.googleapis.com` と解釈されるので、あなたのパソコンにファイルがなければフォントは読み込まれません。
4
+ ローカルであれば `file://fonts.googleapis.com` と解釈されるので、あなたのパソコンにファイルがなければフォントは読み込まれません。
5
+
6
+ ### 追記
7
+
8
+ 以下のコードをHTMLファイルとして書き出して開いてみてください。
9
+
10
+ ```html
11
+ <!DOCTYPE html>
12
+ <meta charset="utf-8">
13
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Cormorant|Cormorant+Infant">
14
+ <style>
15
+ .cormorant {
16
+ font-family: "Cormorant";
17
+ }
18
+ .cormorant-infant {
19
+ font-family: "Cormorant Infant";
20
+ }
21
+ </style>
22
+ <p>
23
+ ABCČĆDĐEFGHIJKLMNOPQRSŠTUVWXYZŽabcčćdđefghijklmnopqrsštuvwxyzžАБВГҐДЂЕЁЄЖЗЅИІЇЙЈКЛЉМНЊОПРСТЋУЎФХЦЧЏШЩЪЫЬЭЮЯабвгґдђеёєжзѕиіїйјклљмнњопрстћуўфхцчџшщъыьэюяĂÂÊÔƠƯăâêôơư1234567890‘?’“!”(%)[#]{@}/&\<-+÷×=>®©$€£¥¢:;,.*
24
+ <p class="cormorant">
25
+ ABCČĆDĐEFGHIJKLMNOPQRSŠTUVWXYZŽabcčćdđefghijklmnopqrsštuvwxyzžАБВГҐДЂЕЁЄЖЗЅИІЇЙЈКЛЉМНЊОПРСТЋУЎФХЦЧЏШЩЪЫЬЭЮЯабвгґдђеёєжзѕиіїйјклљмнњопрстћуўфхцчџшщъыьэюяĂÂÊÔƠƯăâêôơư1234567890‘?’“!”(%)[#]{@}/&\<-+÷×=>®©$€£¥¢:;,.*
26
+ <p class="cormorant-infant">
27
+ ABCČĆDĐEFGHIJKLMNOPQRSŠTUVWXYZŽabcčćdđefghijklmnopqrsštuvwxyzžАБВГҐДЂЕЁЄЖЗЅИІЇЙЈКЛЉМНЊОПРСТЋУЎФХЦЧЏШЩЪЫЬЭЮЯабвгґдђеёєжзѕиіїйјклљмнњопрстћуўфхцчџшщъыьэюяĂÂÊÔƠƯăâêôơư1234567890‘?’“!”(%)[#]{@}/&\<-+÷×=>®©$€£¥¢:;,.*
28
+ ```

1

回答を変更

2018/08/10 14:30

投稿

退会済みユーザー
answer CHANGED
@@ -1,4 +1,4 @@
1
1
  ローカルでページを開いていませんか?
2
- もしそうなら、URLを`https://fonts.googleapis.com/css?family=Cormorant+Infant` に書き換えてみてください。
2
+ もしそうなら、URLを `https://fonts.googleapis.com/css?family=Cormorant+Infant` に書き換えてみてください。
3
3
  `//fonts.googleapis.com` のようにプロトコルを省略すると、そのページと同じプロトコルが使用されます。
4
4
  ローカルであれば `file://fonts.googleapis.com` と解釈されるので、あなたのパソコンにファイルがなければフォントは読み込まれません。