sun editor 를 사용하고 font설정을 안하면 기본 폰트를 사용할수 있다.
Arial, Comic Sans MS, Georgia, Verdana 이 기본 폰트인데
굉장한 폰트이기는 하지만 한글에서 적용할때는 그닥 큰 효과를 보지 못한다 .
폰트를 적용하기 위해서 구글링 해봤는데
SunEditor 에서 setOptions 를 활용해서 font 옵션에 원하는 폰트 string을 배열로 넣으라 는 말만 주궁장창 나온다.
바로 배열로 font: ['굴림', '바탕', '맑은고딕'] 넣어본 결과
잘 적용되나 싶은데 font-family 옵션에 한글로 들어가고 적용이 잘안된다.
문제 발견
머징.. 잘 변경되는건가 싶어서 구글 폰트에서 전혀 다른 폰트를 적용해봐도 폰트 변화가 되지 않는다.
하라는 대로 했는데 왜 안될까 하면서 두가지를 추측한다.
css 로 변경을 해아 하는건가 ? 한글로 써서 그런가 ?
-
한글로 써서 그런가 ?
‘malgen-godic’ 으로 변경해봐도 여전히 변경이 안된다.. 실패 -
css 를 써야 하나?
css 를 써야 하나 고민 하던게 나는 CSS 파일을 따로 쓰지 않고
sun editor 에서는 import 'suneditor/dist/css/suneditor.min.css'; // Import Sun Editor's CSS File
로 CSS파일을 import 해왔는데 여기서 suneditor.min.css에서 변경해야 하나 라는 의문이 들긴했지만
아닌것 같아서 그대로 두었다.
그러다가 마지막으로 추측해본것은 next.js 전체에 폰트 파일을 import 해야 하나? 라는 의문을 가지게 되었고
nextjs에 구글 폰트 적용하는 방법에 대해서 찾게 되었다.
next/font/google 이라는 것으로 쉽게 폰트를 적용할수 있으나 이것을 사용해봤는데 적용이 안되서 직접 link태그를 넣는것으로 해결을 하였다.
해결. link 태그 넣기
구글에서 link 태그로 가져오는 것은 이미 잘 알려져 있으니 여기서 언급하지 않겠다.
next js에서 link 폰트 적용하기
12 버전을 썼을 경우 && _document.tsx 파일이 있을 경우 유효하다.
/pages/_document.tsx
import Document, { Html, Head, Main, NextScript } from 'next/document'
class MyDocument extends Document {
static async getInitialProps(ctx) {
const initialProps = await Document.getInitialProps(ctx)
return { ...initialProps }
}
render() {
return (
<Html>
<Head>
<link href="https://fonts.googleapis.com/css2?family=Black+Han+Sans&display=swap" rel="stylesheet" />
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
)
}
}
export default MyDocument;
<Head> 태그 아래에 link태그를 넣어준다. 원하는 폰트를 넣어주면 된다. 적용하고 돌아오니
글꼴에 내가 적용한 글꼴 들의 폰트가 바뀌어져 있는게 보인다. 긍정적일거라는 생각이 든다.
그리고 적용해본결과 잘 적용이 된다.
물론 당연한 생각으로 폰트를 next js에 적용을 해야지 ! 라고 생각할수도 있을 것이다.
하지만 나는 라이브러리라서 라이브러리 따로 폰트를 적용하는 방법이 있지 않을까? 라는 생각을 하게 되어서
시행착오를 겪에 되었다.
아무튼 나처럼 헤메고 있는 사람에게 도움이 되었으면 좋겠따.
