Skip to content

fix/font #37

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
merged 4 commits into from
Mar 14, 2024
Merged

fix/font #37

merged 4 commits into from
Mar 14, 2024

Conversation

@kana1166
Copy link
Collaborator

@kana1166 kana1166 commented Mar 13, 2024 •
edited by pss-aileen
Loading

notosan のフォントCSSに入れたのでfont-noto-sansでする

#31

@kana1166
Copy link
Collaborator Author

kana1166 commented Mar 13, 2024

notosan jpに変更

@pss-aileen
Copy link
Collaborator

pss-aileen commented Mar 14, 2024

@kana1166

お忙しい中、早速ありがとうございます！！
不要なCSS、テキストの削除もありがとうございます！

ローカルで確認してみたのですが、少し気になる点がありました、

現在 Inter が適応されている

今確認してみたのですが、layout.tsx に Inter が設定されているので、おそらくフォントが適応されていないかと思います。

フォントの適応方法として Optimizing: Fonts | Next.js こちらがあるので、これを元に書いていくと良いかもしれません！

その他参考です

記事のバージョンは13で、私たちのプロジェクトは14すが、同じ方法かと思います。

と、思うのですがみなさんどう思いますか？
@kazzyfrog @kagomen @kana1166

スクリーンショット 2024-03-14 8 19 00

スクリーンショット 2024-03-14 8 18 30

フォントって Inter と Noto Sans Japanese 両方使う方針で良かったんですっけ....？

物忘れがひどいタイプなので申し訳ないのですが
Inter と Noto Sans Japanese 両方を設定する方針だったような気がするのですが、どうでしたっけ...？
なぜそういう話になったんでしたっけ...？笑
誰か教えてください🙇

@kana1166
Copy link
Collaborator Author

kana1166 commented Mar 14, 2024

すみません！ようこそにはまだ当ててません💦
もしフォント当てるなら下記のようにすると

ようこそ
デペロッパーツールに下記出てくるかと☺️ .font-noto-sans-jp { font-family: "Noto Sans JP", sans-serif; }

@kana1166
Copy link
Collaborator Author

kana1166 commented Mar 14, 2024

interに関してはインポート不必要でそのままフォント使えたかと思いますがいかがですか？

@kana1166
Copy link
Collaborator Author

kana1166 commented Mar 14, 2024

interインんポートしときますね！
font-interで使用できます！
notosans jpは
font-noto-sans-jp

@pss-aileen
Copy link
Collaborator

pss-aileen commented Mar 14, 2024 •
edited
Loading

遅くなりました！
作業してくださりありがとうございます！🙇‍♀️

おそらく @kana1166 さんと私とで設定の認識の違いがあったのかと思います。

  • kanaさん
    • global.css で GoogleFontsのURLでフォントをインポート
    • tailwind.config.ts にフォントを指定
    • className で必要な箇所（この場合は body）に適応させる
  • 私
    • Next.jsのドキュメントに記載してあるフォントの最適化をベースにフォントを使う
      • フォントをNext.jsのパッケージ（node_modulesの中）から読み込んで使う
      • （GoogleFontsのURLからフォントを呼ばないのでパフォーマンスが良くなるようです）
    • 具体的なやり方
      • layout.tsxにてフォントを読み込み、以下のようにする
      <html lang="ja">
  <body className={`${inter.variable} ${notojp.variable}`}>{children}</body>
</html>

こんな感じでしょうか。

違いがわかった上で、私の方法をするならどうすれば良いのか...という点は以下にまとめてみました。

とりあえずご提案なので、ご検討いただけると嬉しいです！

style: Inter, Noto Sans Japaneseを設定、lang属性をjaに変更
↑こちらにて詳細ご確認ください

  • layout.tsx でフォントを読み込む
  • Components: Font | Next.js
  • ↑を参考にCSS変数を指定 
    const inter = Inter({
  subsets: ["latin"],
  variable: "--font-inter",
});
  • layout.tsxに以下を記述 
    <body className={`${inter.variable} ${notojp.variable}`}>{children}</body>
  • global.css に以下を記述 
    body {
  font-family: var(--font-inter), var(--font-notojp);
}
上記に至った理由

とりあえずNext.jsのフォント最適化の方法でフォントを2つ設定したのですが思うような挙動になりませんでした。

layout.tsx

<body className={`${inter.className} ${notojp.className}`}>{children}</body>

↑の状態だとnotojpのフォントしか適応されず。

body {
  font-family: "Inter", "Noto Sans Japanese";
}

理想はHTMLでいう、↑の状態です。
（全体で英字にはInterが適応され、日本語にはNoto Sans Japaneseが設定される。）

これを解決するためにあれこれやっていて、現在たどりついたのがコミットした内容です。

@pss-aileen
Copy link
Collaborator

pss-aileen commented Mar 14, 2024

スクリーンショット 2024-03-14 16 38 22
スクリーンショット 2024-03-14 16 39 45

kazzyfrog
kazzyfrog approved these changes Mar 14, 2024
View reviewed changes
Copy link
Member

@kazzyfrog kazzyfrog left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTMです👍
お二人ともありがとうございます！

src/app/page.tsx
>
By{" "}
<Image
src={`${BASE_PATH}/vercel.svg`}
Copy link
Member

@kazzyfrog kazzyfrog Mar 14, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

< Image >で画像を扱うときは、Github Pagesにデプロイする関係で、basePathをimportして、srcのパスの先頭につけないといけないことだけ、注意しておいてください！

@kana1166
Copy link
Collaborator Author

kana1166 commented Mar 14, 2024

aileenさんありがとうございました！

@pss-aileen pss-aileen merged commit b2a0531 into main Mar 14, 2024
@pss-aileen pss-aileen deleted the feature/font branch March 14, 2024 14:21
@pss-aileen pss-aileen mentioned this pull request Mar 15, 2024
Closed
@pss-aileen pss-aileen linked an issue Mar 15, 2024 that may be closed by this pull request
実装のベースが出来上がっていないのでグローバルな設定、実装を行う #31
Closed
4 tasks
@kazzyfrog kazzyfrog added the Type: 🎨 style スタイル（見た目）に関するもの label Apr 4, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@kazzyfrog kazzyfrog kazzyfrog approved these changes

Assignees

No one assigned

Labels

Type: 🎨 style スタイル（見た目）に関するもの

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

実装のベースが出来上がっていないのでグローバルな設定、実装を行う

4 participants

@kana1166 @pss-aileen @kazzyfrog