[Styled-Components] import font2

모든 출처는 이곳입니다.
https://font-face-import.netlify.app/

fonts.js에서 @font-face를 활용하여 다운로드한 폰트를 styled-components에서 쓸 수 있었다.
별 문제가 없다고 생각했는데 웹에 애니메이션을 사용해보니 폰트가 다 깨지는 것이 아닌가.
(정확하게는 폰트가 적용되었다가 안되었다가 반복하며 깜빡거림. flicker)
그래서 문제 해결을 위해 위의 출처를 찾았다.

---

1. 왜 이런 일이 생겨나는가?

If you define the @font-face in styled-components - for example with createGlobalStyle -
the fonts are reloaded on each render of react. See this Github issue.

react가 render 될 때마다 폰트가 reload 되는 것.

내가 제작한 애니메이션은 조명효과 애니메이션으로

마우스커서가 움직일 때마다 새롭게 render가 되는데

이 때문에 폰트의 load가 반복되었던 것이다.

---

2. 어떻게 해결할 것인가.

Even if you use styled-components don't define @font-face with it.
Just import a font.css in your Gatsby-layout instead.
Importing a css-file with the @font-face definitions is easy
and removes the flickering that you get from defining the @font-face inside of a styled-component.

@font-face가 정의되어 있는 css-file을 가져오자.
이는 깜빡임을 제거한다.

---

3. fonts.css 파일 제작

fonts 폴더에 fonts.css 파일을 제작하자

src/fonts/font.css

@font-face {
  font-family: 'HarryFont'; 	//사용할 폰트의 이름
  font-display: fallback;		
  src: url("./Harry-Potter.ttf.woff") format("woff");	// 사용할 폰트의 위치 및 형식
  font-weight: 300;				// 사용할 폰트의 기본 스타일
  font-style: normal

---

4. 컴포넌트(앱)에 적용

src/components/App

import React from 'react'
import styled from 'styled-components'
import { createGlobalStyle } from 'styled-components'		// 1
import "../fonts/fonts.css"					// 2
//
const GlobalStyle = createGlobalStyle `				// 3
	font-family: 'HarryFont'	// 3번에서 지정한 폰트 이름
`

const App = () => {
  return (
    <Wrapper>
      <GlobalStyle />						// 4
      <HeadLine>헤드라인입니다.</HeadLine>
      //...
    </Wrapper>

const HeadLine = styled.h1 `
	font-family: 'HarryFont'				// 5
`

1. createGlobalStyle을 가져옴

2. 제작한 font.css를 가져옴

3. createGlobalStyle을 사용하여 GlobalStyle 제작, font-family에 사용할 폰트 이름 작성

4. GlobalStyle 배치

5. font-family에 적용

---

출처에 가면 더 자세하게 설명되어 있다.

끝.