[css]font-familyをメディアクエリで設定する方法

Question

ご覧いただきありがとうございます。
ウェブサイトのフォント種類を、メディアクエリを利用してPCとスマホで変わるようにしたいです。

PCの場合、google fontをCDNより読みこんでbodyに指定、スマホの場合は一般的なフォントになるよう設定しています。

が、下記コードではgoogle fontが読み込まれていないようでPCでも通常のフォントになってしまいます。
どういった書き方をすればよいかお教え頂けますでしょうか。

※スマホで接続した際にgoogle fontを読み込んでしまうととても重いので、スマホの場合は読み込み自体をしないようにしたいです。

@media only screen and (max-width:580px){
  body {
    font-family: "Hiragino Kaku Gothic ProN", "メイリオ", sans-serif;
    font-size: 14px;
    color: #262626;
  }
}
@media only screen and (min-width:581px){
  @import url(http://fonts.googleapis.com/earlyaccess/notosansjapanese.css);
body {
    font-family: 'Noto Sans Japanese', sans-serif;
    font-size: 14px;
    color: #262626;
}
}

font-family メディアクエリ レスポンシブ など調べても解決策がみつからなかったのでご質問でございます。
よろしくお願いいたします。

Answer 1

@import の記述位置をCSSファイルの先頭にしてみてください。
もしかしたらモダンブラウザでは仕様が変わっているのかもしれませんが、
確か@importの前に書けるのは@charset文だけで、@import文はCSSファイルの先頭に書かなければ上手く動作しなかったように思います。

CSSから別のCSSを読み込む方法
外部CSS使用時の意外な落とし穴