※ 문제 사항
React로 만드는 프로젝트 진행 중 잘 되다가 갑자기 font 적용이 안된다.
PC에서는 잘 보이는데 (PC Mobile 보기로 봐도 문제 없었지만) Mobile로 보면 font가 다르게 보인다.
Title font가 이상하다. 점검으로 확인해보면 적용이 된걸로 나오는데 적용이 안됐다.
※ 시도해 본 방법
- font 문제인가싶어 여러가지 font를 바꿔가며 적용해봄
- Google Fonts에서 글자를 선택하고 보여주는 예시와 같은 font-size, weight 적용, 작아지지 않게 주변 padding 등 정리
- 모든 font 설정 없애고 직접 적용하고 싶은 폰트 객체만 적용해보기
⇒ 다 안됨!! 다른 font로 바꾸어도 사진과 같은 이상한 폰트로만 보인다.
- 찾아보니 React에서 Font를 다르게 적용하는 방법들이 있었지만 복잡하고 기존 방법이 잘 되었다가 특정 기기에서만 안되기 때문에 패스
※ 찾은 해결책!
Before :
const GlobalStyle = createGlobalStyle`
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300;400&display=swap');
body {
font-family: 'Source Sans Pro', sans-serif;
}
`;
function App() {
const toggle = useRecoilValue(isLightAtom);
return (
<>
<ThemeProvider theme={toggle ? lightTheme : darkTheme}>
<GlobalStyle />
<Router />
<ReactQueryDevtools initialIsOpen={true} />
</ThemeProvider>
</>
);
}
export default App;(예시)기존에는 GlobalStyle이 있어 거기서 font @import url을 해주고 적용하고 싶은 부분에 font를 적용해주는 방법을 쓰고 있었다.
After :
index.html에서 <head> 부분에
<head>
<link href="https://fonts.googleapis.com/css2?family=Nabla&display=swap" rel="stylesheet">
</head>font url을 link로 넣어주고 기존에 적용하고자 하는 부분에(App.tsx) 똑같이 font-family 적용해주면 된다.
쉽게 말해서 font link를 index.html에 넣어주면 어디든 적용이 잘 된다!
앞으로 React Project에서 font를 적용하고자 할 때는 index.html에 넣고 사용하자!!
편안~ 잘 적용된 모습🤩 (글귀랑 스타일은 나중에 더 바꾸어서 바뀐 것)
참고 링크
Implementing Google Fonts into your React project using Styled Components
Styled Components can be a very useful tool when adding CSS to your React projects. It allows you to tackle each component’s styling…
medium.com
'Error' 카테고리의 다른 글
| [React] Fail to compile. Module parse failed: Unexpected token Error 해결 (0) | 2022.11.17 |
|---|---|
| pandas 한글 폰트 적용 에러 해결하기/ 시각화 폰트 설정법 (0) | 2022.11.03 |
| React App 빈 화면만 보이는 문제 해결(Invalid hook call error) (0) | 2022.08.14 |
| command not found: expo 에러시 (0) | 2022.07.30 |
