CSS 폰트 적용하기
2023. 12. 13. 00:44ㆍ교내활동/캡스톤 디자인2
반응형
Browse Fonts - Google Fonts
Making the web more beautiful, fast, and open through great typography
fonts.google.com
구글 폰트모음을 살펴보며 사용할만한 것을 찾아보았다.
그런데 문제는 어떻게 적용하는가...
찾아보니 생각보다 단순했다.
<!DOCTYPE html>
<html lang="ko">
<head>
~~~~
<style>
@import url('https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swap');
body {
font-family: 'Gowun Dodum', sans-serif;
}
~~~~
심지어 구글에서 코드도 제공해준다.
근데 이 과정이 꽤 헷갈려서 기록해둠
1. 원하는 폰트를 찾은 뒤 styles를 확인한다.
2. 우측의 select ~~~를 눌러준다.
우측에 바로 어떤 창이 뜨는 경우가 있는데, 안뜨는 경우도 존재한다.
안뜨는 경우에는 우측 상단의 쇼핑백 모양의 아이콘을 눌러준다.
3. API로 사용할 수 있도록 코드를 제공해준다.
link 태그를 이용하려는 경우에는 <link>를 이용한다.
나의 경우에는 @import를 활용했다.
제공해주는 내용을 copy 후 html 문서에 적용한다.
4. 그리고 CSS에 적용하기!!!
마찬가지로 코드를 제공해준다.
복사해서 그대로 style 태그 안에 넣어주면 된다.
그러면 이렇게 적용 완료
반응형
'교내활동 > 캡스톤 디자인2' 카테고리의 다른 글
| 캡스톤디자인II 프로젝트 복기 (0) | 2024.02.09 |
|---|---|
| ImportError: cannot import name 'EVENT_TYPE_OPENED' from 'watchdog.events' (0) | 2023.12.11 |