-
-
Notifications
You must be signed in to change notification settings - Fork 175
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.
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
Adds font guide #435
base: master
Are you sure you want to change the base?
Adds font guide #435
Conversation
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
||
This guide was written using the expo-router starter in mind. | ||
|
||
1. Load fonts in expo, in apps/expo/_layout.tsx. Make sure to `npx expo add @expo-google-fonts/roboto-slab` whatever fonts you want to use. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think we could make this more expo-router-agnostic.
Create this file, and then wrap your App.tsx
with it.
If you're using Expo Router, then it would go in the app/_layout.tsx
file (and show a very minimal example).
For example, the way Fonts
is used in the Dripsy guide in a separate file and then imported simply.
It doesn't have to be a separate file, but it's nice to keep it clear and concise like that.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Also, the instructions should work for custom font files themselves
import { Stack } from 'expo-router'; | ||
import * as SplashScreen from 'expo-splash-screen'; | ||
import { useEffect } from 'react'; | ||
import { Gurajada_400Regular } from "@expo-google-fonts/gurajada"; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Let's get rid of any code that isn't directly related to this guide like SplashScreen etc.
|
||
See the [next-font with tailwind guide](https://nextjs.org/docs/pages/building-your-application/optimizing/fonts#with-tailwind-css) for more info. | ||
|
||
``` |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
You should put tsx
after the backticks so that it formats properly
}``` | ||
|
||
|
||
3. Update /packages/app/design/tailwind/theme.js with the reference for the expo font and the CSS variable used in the next app.. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
We should have a heading describing how to use this with and without Tailwind across platforms
|
||
const robotoSlab = Roboto_Slab({weight: "400", subsets: ["latin"], variable: '--font-roboto-slab'}) | ||
|
||
export default function RootLayout({ |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Let's add an example using the pages
folder in pages/_app.tsx
too, and add Subheadings for each, like:
Pages Router
In your pages/_app.tsx
(assuming this is correct...)
// code block here
App Router
In app/page.tsx
:
// code here....
Thanks! Left some comments to make this more clear for users. We should also have a plain RN example that simply shows with a React Native view how you'd use the font families. My guess is you'd use a raw string on native, and a CSS variable on Web. Lastly, I'd like to add a guide about native font loading at the end (instead of Expo Font) but I can do this part later. |
No description provided.