구글 웹폰트 적용 안됨 - gugeul webponteu jeog-yong andoem

Question

[Tip] 웹폰트 적용 방식

웹폰트를 적용하는 방법에는 여러 가지가 있지만 제가 실무에서 웹폰트를 주로 쓰는 방식은

보통 css 파일에서 @import url로 다른 사이트에 있는 css를 불러와 사용하는 방식입니다.

이밖에도 상황에 따라 웹폰트를 다르게 적용하고는 하는데,

그중 개인적으로 제가 자주 쓰는 방식들로 정리해보았습니다.

1. @import url

@import url("//fonts.googleapis.com/earlyaccess/notosanskr.css"); //노토산스체
@import url("//cdn.rawgit.com/moonspam/NanumSquare/master/nanumsquare.css"); //나눔스퀘어체

자주 쓰는 @import url 방식으로 css 파일에 해당 웹폰트를 올려주고 font-family에 폰트를 넣어주면 적용이 끝납니다.

노토산스체는 구글 폰트에서, 나눔스퀘어체는 눈누에서 가져왔습니다.

* 구글폰트 : https://fonts.google.com/specimen/Noto+Sans+KR?subset=korean

* 눈누 : https://noonnu.cc/font_page/37

2. link href

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100&display=swap" rel="stylesheet">

html 안에 link를 넣는 방식으로 관련 소스는 @import url과 마찬가지로 구글 폰트에서 가져옵니다.

3. webfont loader

<script src="//ajax.googleapis.com/ajax/libs/webfont/1.4.7/webfont.js"></script>
<script>
WebFont.load({
google: {
families: ['Lato', 'Noto Sans', 'Noto Sans KR']
}
});
</script>

구글 웹폰트를 좀 더 빠르게 로드해야 한다면 위 소스를 추천합니다.

로드할 글꼴을 지정하기만 하면 되서 훨씬 간편하죠.

* webfont loader : https://github.com/typekit/webfontloader

4. 폰트파일이 있을 때

@font-face {
    font-family: 's-core-dream-thin';
    src: url('scdream1-webfont.woff2') format('woff2'),
        url('scdream1-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

가지고 있는 폰트 파일이 있다면 css파일에 직접 해당 소스를 넣는 방법도 있습니다.

format 파일은 local (사용자 환경) > eot > woff2/woff > ttf > svg 순서대로 기술하는 것이 좋습니다.

* 참고사이트 :

https://www.daleseo.com/css-web-fonts/

https://nolboo.kim/blog/2013/10/22/google-web-font-faster-tip/

https://kimdabin.tistory.com/entry/Font-format%EA%B3%BC-font-face-%EC%84%A0%EC%96%B8-%EB%B0%8F-%EC%A0%81%EC%9A%A9%EB%B2%95

안녕하세요, 여행벌입니다.

오늘은 CSS로 구글 웹 폰트 적용하는 방법에 대해서 포스팅해보겠습니다.

구글 웹폰트 적용하기

1) 먼저 구글 폰트 웹사이트에 접속합니다.

2) Language를 원하는 언어에 맞춰 선택합니다.

3) 여러 가지 폰트 중에 원하는 폰트를 선택합니다. 'Do Hyeon' 글꼴을 선택해보겠습니다.

4) Select this style 을 누르면 장바구니에 'Do Hyeon' 글꼴이 담기게 됩니다. 현재 'Do Hyeon' 글씨체는 Regular 400 굵기의 Style만 지원하고 있으므로 장바구니에 담아보겠습니다.

5) 장바구니는 오른쪽 상단의 버튼을 누르면 다음과 같이 현재 장바구니에 담겨 있는 글꼴이 나옵니다.

6) 장바구니에 담은 글꼴을 적용하기 위해서는 글꼴을 우리의 HTML 파일에 import 해와야 합니다. Embed Tap을 누른 후, @import를 누르면 다음과 같은 코드 덩어리 2개가 보입니다.

위의 @import 코드를 이용하면 웹 폰트를 우리의 파일에 불러올 수 있고, 아래의 코드는 우리가 아는 글꼴 적용 속성 값입니다.

<!DOCTYPE html>
<html lang="kr">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Do+Hyeon&display=swap');
        p{
            font-size : 3em;
            font-family : 'Do Hyeon', sans-serif;
        }
    </style>
</head>
<body>
    <p>'Do Hyeon' 체를 적용!</p>
</body>
</html>

style 태그 안에 @import 코드를 그대로 가져오면 font-family 속성을 통해 글꼴을 적용할 수 있습니다.

Roboto 웹폰트 적용 웹사이트 폰트 적용 프리텐다드 웹폰트 적용 font-weight 적용 안됨 Font-face 안됨