<section id="sec01"> <p>フォントとサイズが反映されない</p> <label for="name">Name</label> <input id="name" type="text" placeholder="firstname lastname"> <textarea>textarea</textarea> <select> <option>select01</option> <option>select02</option> <option>select03</option> </select> <button>Button</button> </section> <section id="sec02"> <p>フォントとサイズが反映される</p> <label for="name">Name</label> <input id="name" type="text" placeholder="firstname lastname"> <textarea>textarea</textarea> <select> <option>select01</option> <option>select02</option> <option>select03</option> </select> <button>Button</button> </section>
@import url("https://fonts.googleapis.com/css?family=Rokkitt"); html { font-size: 30px; } section { border: 1px solid black; margin: 10px; padding: 10px; } #sec01 { font-family: "Rokkitt"; > * { display: block; margin: 10px 0; } } #sec02 { font-family: "Rokkitt"; > input, textarea, select, button { font-family: inherit; font-size: 100%; } > * { display: block; margin: 10px 0; } }