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

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

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

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

2062閲覧

フォントのCSS設定

MaUU

総合スコア11

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2018/04/08 09:41

編集2018/04/08 10:01

前提・実現したいこと

Googleフォントを使用したいのです。

https://demo.petit.pink/
こちらの無料テーマ「ver.1 note」を使用しております。

発生している問題・エラーメッセージ

http://oxynotes.com/?p=10293
こちらで使い方を参考にスタイルシートにCSSを追加しようとしたのですが

イメージ説明

@import url(http://fonts.googleapis.com/earlyaccess/notosansjp.css);

上記の部分に×印が出ていて「サイトを壊してしまうかもしれません」という表示がでるため追加することができません。
使用しているテーマでは使用することはできないのでしょうか。

よろしくお願い致します。

該当のソースコード

@import url(http://fonts.googleapis.com/earlyaccess/notosansjp.css); body { font-family: 'Noto Sans JP', sans-serif; font-size: 100%; }

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

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

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

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

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

defghi1977

2018/04/08 10:07

これって,「それでもいいの?」にチェックを入れたらうまく行きません?
MaUU

2018/04/08 10:15

ありがとうございました!冒頭に書く必要があったみたいで、無事に解決致しました^^
guest

回答2

0

ベストアンサー

エラーメッセージのスクショを頂けますか?

投稿2018/04/08 09:45

revoiot

総合スコア188

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

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

MaUU

2018/04/08 10:02

ありがとうございます。スクショ追記させていただきました^^
revoiot

2018/04/08 10:08 編集

@importは基本的に、cssファイルの冒頭部分に書く必要があります。 cssファイルの冒頭部分に@importの部分を書き直してみてください。 それでもエラーでてたら、またコメントください。
MaUU

2018/04/08 10:14

冒頭に入れ替えてみたら、エラーが出ませんでした! 冒頭部分に書く必要があったのですね! 無事に追加することができました。ありがとうございます^^
defghi1977

2018/04/08 10:16

> @importは基本的に、cssファイルの冒頭部分に書く必要があります。 なるほど, 勉強になりました.
guest

0

http://fonts.googleapis.com/earlyaccess/notosansjp.css
に直接アクセス(URLバーにコピーしてCSSの中身を表示)して, その中身をstyle要素にコピペする方法もあります.

例えばこの内容を直接コピペします.

CSS

1/* 2* Noto Sans JP (japanese) http://www.google.com/fonts/earlyaccess 3 */ 4@font-face { 5 font-family: 'Noto Sans JP'; 6 font-style: normal; 7 font-weight: 100; 8 src: url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Thin.woff2) format('woff2'), 9 url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Thin.woff) format('woff'), 10 url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Thin.otf) format('opentype'); 11} 12@font-face { 13 font-family: 'Noto Sans JP'; 14 font-style: normal; 15 font-weight: 300; 16 src: url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Light.woff2) format('woff2'), 17 url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Light.woff) format('woff'), 18 url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Light.otf) format('opentype'); 19} 20 21@font-face { 22 font-family: 'Noto Sans JP'; 23 font-style: normal; 24 font-weight: 400; 25 src: url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Regular.woff2) format('woff2'), 26 url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Regular.woff) format('woff'), 27 url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Regular.otf) format('opentype'); 28 } 29@font-face { 30 font-family: 'Noto Sans JP'; 31 font-style: normal; 32 font-weight: 500; 33 src: url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Medium.woff2) format('woff2'), 34 url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Medium.woff) format('woff'), 35 url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Medium.otf) format('opentype'); 36 } 37@font-face { 38 font-family: 'Noto Sans JP'; 39 font-style: normal; 40 font-weight: 700; 41 src: url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Bold.woff2) format('woff2'), 42 url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Bold.woff) format('woff'), 43 url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Bold.otf) format('opentype'); 44 } 45@font-face { 46 font-family: 'Noto Sans JP'; 47 font-style: normal; 48 font-weight: 900; 49 src: url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Black.woff2) format('woff2'), 50 url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Black.woff) format('woff'), 51 url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Black.otf) format('opentype'); 52 }

NOTE:
この他にもlink要素からCSSを読み込むことも可能です.

投稿2018/04/08 09:51

編集2018/04/08 10:05
defghi1977

総合スコア4756

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

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

MaUU

2018/04/08 10:06

ありがとうございます。そんな方法もあるのですね! 解決しそうになければこちらの方法を試してみようと思います^^
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問