Google Fonts in React Native
check the documentation here -> https://github.com/expo/google-fonts
Start: type this into your terminal to install the expo font package
expo install expo-font
then type this command
expo install @expo-google-fonts/your-font
replace your-font with the font you want to install, like in the example below:
expo install @expo-google-fonts/lato
then add in your (for example) app.js the following code. Also check the Comments in the Code :)
// import oswald font
import {
useFonts as useOswald,
Oswald_400Regular,
} from "@expo-google-fonts/oswald";
// import lato font
import { useFonts as useLato, Lato_400Regular } from "@expo-google-fonts/lato";
export default function App() {
// useFont Hook
const [oswaldLoaded] = useOswald({
// load any font variation in here
Oswald_400Regular,
});
const [latoLoaded] = useLato({
Lato_400Regular,
});
// check if they are there
if (!oswaldLoaded || !latoLoaded) {
return null;
}
if you have any questions, feel free to ask 🙌🏻
Top comments (1)
how can we use the same font on the entire app without importing it each time on every component ?