Adds font guide #435
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.
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.
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.
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.
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.
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.
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 hereApp 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.