css - メディアクエリに応じて異なるフォントの太さを効果的に使用する方法

Question

画面サイズが変わってもgoogle font-weightは変わりません。これは @import を使用して小さな画面でフォントの太さを変更する正しい方法ですか、それとも別の方法がありますか?

h1{
 font-family: 'Montserrat',sans-serif;
 font-size: 50px;
    }
@media only screen and (max-width: 480px)
{
@import url('https://fonts.googleapis.com/css?family=Montserrat:600');
  h1{
  font-size:20px;
  font-weight:900;
   } }

<!-- Google Font in Html-->
<link href="https://fonts.googleapis.com/css?family=Montserrat:100" rel="stylesheet">
    <h1> This is a text </h1>