14. 구글폰트 적용하기 - 랜딩페이지 문구 변경

https://dwbyun.tistory.com/7

[React Native] 0.70버전 custom font 적용하기 (react-native-cli)

https://fonts.google.com/specimen/Nanum+Pen+Script?subset=korean&noto.script=Kore

Nanum Pen Script - Google Fonts

npx react-native-asset 명령어를 실행하면 루트디렉토리의 assets/fonts 폴더에 저장된 폰트 파일을 android/app/src/main/assets/fonts 폴더로 자동으로 복사해준다. 

import React from 'react'
import { View, Text, ImageBackground, StyleSheet } from 'react-native'

function LandingPage({ width, height, title, description, source}){
    return (
        <View style={{ width, height }}>
            <ImageBackground source={source} style={{ width, height }}>
                <View style={[styles.textContent, { width, height }]}>
                    <Text style={styles.title}>{title}</Text>
                    <Text style={styles.description}>{description}</Text>
                </View>
            </ImageBackground >
        </View>
    )
}
export default LandingPage

const styles = StyleSheet.create({
    textContent: {
        justifyContent: 'flex-start',
        alignItems: 'center',
        padding: 85,
    },
    title: {
        fontSize: 35,
        fontWeight: 'bold',
        color: '#fff'
    },
    description: {
        fontFamily: 'NanumPenScript-Regular',
        fontSize: 33,
        fontWeight: 'normal',
        marginTop: 10,
        color: '#fff',
        textAlign: 'center',
    },
})

components > LandingPage.js 파일을 위와 같이 수정한다. 

 description: {
        fontFamily: 'NanumPenScript-Regular',
        fontSize: 33,
        fontWeight: 'normal',
        marginTop: 10,
        color: '#fff',
        textAlign: 'center',
    },

fontFamily 속성에 다운로드받은 폰트 이름으로 지정해준다. fontWeight: 'normal'로 지정해준다 . fontWeight: 'bold' 이면 설정한 폰트가 제대로 적용되지 않을수 있다. 

폰트가 제대로 적용되지 않으면 애뮬레이터를 끄고, android 폴더로 이동해서 ./gradlew clean 해서 캐쉬를 전부 삭제하고 다시 루트 디렉토리로 이동해서 npm run android 로 애뮬레이터를 재실행한다. 

랜딩페이지 1

랜딩페이지 2

랜딩페이지 3