Merge pull request #48 from montezume/montezume/remove-font-import

feat(breaking): remove google font import
nostalgic-css · Dec 5, 2018 · 5e556c8 · 5e556c8
2 parents 17021d7 + 6e515a5
commit 5e556c8
Show file tree

Hide file tree

Showing 8 changed files with 30 additions and 6 deletions.
diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html
@@ -0,0 +1 @@
+<link href="https://fonts.googleapis.com/css?family=Press+Start+2P" rel="stylesheet">
diff --git a/README-jp.md b/README-jp.md
@@ -37,7 +37,19 @@ TODO: npm での使用方法を書く
 
 NES.cssはコンポーネントのスタイルのみを提供しています。レイアウトはみなさんが好きなように定義してください。
 
-デフォルトでは`Press Start 2P`フォントを使っています。英語以外（日本語など）で利用される場合は、別途フォントを読み込んで使ってください。
+デフォルトのフォントは[Press Start 2P](https://fonts.google.com/specimen/Press+Start+2P?selection.family=Press+Start+2P)を使っています。英語以外（日本語など）で利用される場合は、別途フォントを読み込んで使ってください。 フォントを読み込む方法は、Google Fontsの[Get Started](https://developers.google.com/fonts/docs/getting_started)を参照するか、または以下のように読み込んでください。
+
+```html
+<head>
+    <link href="https://fonts.googleapis.com/css?family=Press+Start+2P" rel="stylesheet">
+    <link href="https://unpkg.com/nes.css/css/nes.css" rel="stylesheet" />
+    <style>
+      html, body, pre, code, kbd, samp {
+          font-family: "font-family you want to use";
+      }
+    </style>    
+</head>
+```
 
 ### Recommended Fonts
 

diff --git a/README.md b/README.md
@@ -36,7 +36,19 @@ TODO: npm での使用方法を書く
 
 NES.css only provides components. You will need to define your own layout.
 
-The default font is Press Start 2P which only supports English characters. When you're using this framework with any language except English, please use another font.
+The default font is [Press Start 2P](https://fonts.google.com/specimen/Press+Start+2P?selection.family=Press+Start+2P) which only supports English characters. When you're using this framework with any language except English, please use another font. Please follow the [instructions](https://developers.google.com/fonts/docs/getting_started) from Google Fonts about how to include them, or simply include it as below:
+
+```html
+<head>
+    <link href="https://fonts.googleapis.com/css?family=Press+Start+2P" rel="stylesheet">
+    <link href="https://unpkg.com/nes.css/css/nes.css" rel="stylesheet" />
+    <style>
+      html, body, pre, code, kbd, samp {
+          font-family: "font-family you want to use";
+      }
+    </style>    
+</head>
+```
 
 ### Recommended Fonts
 

diff --git a/css/nes.css b/css/nes.css
diff --git a/css/nes.css.map b/css/nes.css.map
diff --git a/css/nes.min.css b/css/nes.min.css
diff --git a/index.html b/index.html
@@ -11,6 +11,7 @@
 
     <title>NES.css - NES-style CSS Framework</title>
 
+    <link href="https://fonts.googleapis.com/css?family=Press+Start+2P" rel="stylesheet">
     <link href="./css/nes.css" rel="stylesheet" />
     <link href="./style.css" rel="stylesheet" />
 

diff --git a/scss/base/variables.scss b/scss/base/variables.scss
@@ -1,5 +1,4 @@
 // Font
-@import url("https://fonts.googleapis.com/css?family=Press+Start+2P");
 $font-family: "Press Start 2P" !default;
 $font-size: 16px !default;
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		<link href="https://fonts.googleapis.com/css?family=Press+Start+2P" rel="stylesheet">