Why <textarea> and <textfield> not taking font-family and font-size from body?

순조롭게 font-face로 편하게 폰트 작업을 하던 와중 내 눈에 밟히는 이상한 현상이 발견되었으니...

 

뭐지 이 따로 노는 폰트의 콜라보는...?

 

급히 렌더링 된 폰트를 확인해보았다.

 

input 태그: 맑은 고딕

textarea 태그: gulimche 

button 태그: 맑은 고딕

 

 

 

 

WHAT....?

 

 

 

멘붕이 온 나머지 구글에 검색을 해보았더니 다음 요소는 body에 걸린 font-family에 상속받지 않는다고 한다.

 

stackoverflow.com/questions/2874813/why-textarea-and-textfield-not-taking-font-family-and-font-size-from-body

Why

 

By default, browsers render most form elements (textareas, text boxes, buttons, etc) using OS controls or browser controls. So most of the font properties are taken from the theme the OS is currently using.
You'll have to target the form elements themselves if you want to change their font/text styles - should be easy enough by selecting them though, as you've just done.
As far as I know, only form elements are affected. Off the top of my head: input, button, textarea, select.

 

 <input>및 <textarea>요소 의 글꼴 스타일 은 기본 스타일에서 정의된다고 한다. 그러므로 따로 한 번 더 font-family를 걸어주어야 한다는 뜻.

 

 

태그를 좀 더 자세히 살펴보자면 textarea는 body에 걸린 font-family를 무시하는 것을 확인할 수 있다.

 

 

 

아무튼 이제 원인을 알았으니 태그 자체에 font-family를 다 걸어버렸다.

button,
textarea,
input {
  font-family: "Noto Sans KR", sans-serif;
}

 

 

속이 다 씨원 ^-^~