스카이코의 세상

[React-Native] 폰트가 안드로이드에서 적용되지 않을 때 본문

IT/React Native

[React-Native] 폰트가 안드로이드에서 적용되지 않을 때

스카이코 2023. 3. 5. 14:31
반응형

이전 포스팅을 통해 React Native에서 폰트를 적용하는 방법을 알아보았습니다.

 

import { StyleSheet, Text } from 'react-native';

export default function CustomFont() {
  return (
    <Text style={styles.text}>
       안녕하세요 스카이코 입니다.
    </Text>
  );
}

const styles = StyleSheet.create({
  text: {
    fontFamily: 'Pretendard',
    fontWeight: 700
  },
});

하지만 위와 같이 fontWeight를 사용했을 때 iOS에서는 정상적으로 폰트가 적용되지만 Android에서는 폰트가 적용되지 않습니다.

 

이럴 때는 fontWeight를 사용하지 않고 @/asset/fonts에 넣은 폰트 파일 이름으로 fontFamily를 지정해주면 iOS와 Android 둘 다 모두 weight에 맞는 폰트를 적용시킬 수 있습니다.

import { StyleSheet, Text } from 'react-native';

export default function CustomFont() {
  return (
    <Text style={styles.text}>
       안녕하세요 스카이코 입니다.
    </Text>
  );
}

const styles = StyleSheet.create({
  text: {
    fontFamily: 'Pretendard-Bold', // fontWeight 제거 후 fontFamily를 파일 이름으로 지정
  },
});
반응형

'IT > React Native' 카테고리의 다른 글

[React Native] 폰트(Custom Font) 적용하기  (2) 2023.02.17
Comments