J.BF Story

[CSS] 전체 요소에 font-family 적용하기 본문

FrontEnd/CSS

[CSS] 전체 요소에 font-family 적용하기

J.BF 2022. 7. 8. 23:53

전체 요소에 'font-family'를 통해 글꼴을 정해줄 때 처음에는 다음과 같이 <body>요소를 통해 적용하였다.

그러나 <button>, <input>, <textarea> 요소에는 글꼴이 적용되지 않은 것을 발견하였다.

<style>
    @import url('https://fonts.googleapis.com/css2?family=Raleway&display=swap');

    body {
        font-family: 'Raleway', sans-serif;
    }
</style>

<h2>Hello world</h2>
<button>Hello world</button>
<input type="text" value="Hello world"></input>
<textarea>Hello world</textarea>

따라서 다음과 같이 <body> 요소 뿐만 아니라, <button>, <input>, <textarea>에도 'font-family'를 적용시켜줘야한다.

<style>
    @import url('https://fonts.googleapis.com/css2?family=Raleway&display=swap');

    body, button, input, textarea {
        font-family: 'Raleway', sans-serif;
    }
</style>

<h2>Hello world</h2>
<button>Hello world</button>
<input type="text" value="Hello world"></input>
<textarea>Hello world</textarea>

 

'FrontEnd > CSS' 카테고리의 다른 글

[CSS] 가상요소 ::after, ::before에서 사용한 svg에 대하여 width, height를 통한 크기 조정이 안되는 원인  (0) 2022.07.11
[CSS] 가상요소 ::after ::before와 svg를 이용하여 요소 꾸며주기 (background)  (0) 2022.07.10
[CSS] 고정 헤더에서 anchor 기능 사용 시 오프셋 설정  (0) 2022.07.07
[CSS] 가상요소 ::after ::before와 svg를 이용하여 요소 꾸며주기 (content url)  (0) 2022.07.06
[CSS] absolute 요소 컨테이너 외부에 배치하기  (0) 2022.07.05
'FrontEnd/CSS' Related Articles more
Comments