Google Fonts - expo

expo 프로젝트에서 폰트를 사용하는 방법을 몇가지 소개합니다.

1. fontFamily 를 사용하지 않으면, 안드로이드, iOS 각각의 디폴트 폰트가 사용됩니다.

2. system font 로 사용하기 - expo SDK50 이상 사용 가능 (  expo documents 참조 )

3. Runtime에서 사용하기 -  아래 예제는 google font 를 이용한 예제 입니다.

npx expo install @expo-google-fonts/balsamiq-sans expo-font

import { useCallback } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { useFonts, BalsamiqSans_400Regular } from '@expo-google-fonts/balsamiq-sans';
import {
  SourceSansPro_400Regular_Italic,
  SourceSansPro_700Bold,
} from '@expo-google-fonts/source-sans-pro';
import * as SplashScreen from 'expo-splash-screen';

SplashScreen.preventAutoHideAsync();

export default function App() {
  let [fontsLoaded] = useFonts({
    BalsamiqSans_400Regular,
    SourceSansPro_400Regular_Italic,
    SourceSansPro_700Bold,
  });

  const onLayoutRootView = useCallback(async () => {
    if (fontsLoaded) {
      await SplashScreen.hideAsync();
    }
  }, [fontsLoaded]);

  if (!fontsLoaded) {
    return null;
  }

  return (
    <View style={styles.container} onLayout={onLayoutRootView}>
      <Text style={[styles.text, { fontFamily: 'SourceSansPro_400Regular_Italic' }]}>
        Source Sans Pro Italic
      </Text>
      <Text style={[styles.text, { fontFamily: 'SourceSansPro_700Bold' }]}>
        Source Sans Pro Bold
      </Text>
      <Text style={[styles.text, { fontFamily: 'BalsamiqSans_400Regular' }]}>
        Balsamiq Sans Regular
      </Text>
      <Text style={[styles.text]}>Platform Default</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  text: {
    fontSize: 24,
    color: 'black',
    paddingVertical: 10,
  },
});

npx expo install @expo-google-fonts/noto-sans-kr

 

추천 한국어 폰트

- Pretandard  provided by 길형진님 https://cactus.tistory.com/306

- Noto Sans Korean by Google https://fonts.google.com/noto/specimen/Noto+Sans+KR?noto.query=Noto+Sans+Kr