How to stop loading webfonts only on mobile? - html

Question

I put below code into style.css and called style.css from the header.php.
#font-face {
font-family: 'Noto Sans JP';
font-weight: 700;
font-style:normal;
font-display: swap;
src: local('Noto Sans JP'),
url('https://ja.seoartgallery.com/NotoSansJP/NotoSansJP-Bold.woff2') format('woff2'),
url('https://ja.seoartgallery.com/NotoSansJP/NotoSansJP-Bold.woff') format('woff'),
url('https://ja.seoartgallery.com/NotoSansJP/NotoSansJP-Bold.otf') format('opentype');
}
#font-face {
font-family: 'Noto Sans JP';
font-weight: 400;
font-style:normal;
font-display: swap;
src: local('Noto Sans JP'),
url('https://ja.seoartgallery.com/NotoSansJP/NotoSansJP-Regular.woff2') format('woff2'),
url('https://ja.seoartgallery.com/NotoSansJP/NotoSansJP-Regular.woff') format('woff'),
url('https://ja.seoartgallery.com/NotoSansJP/NotoSansJP-Regular.otf') format('opentype');
}
And I set the font as below, but when I test it with Chrome developer tools, both desktop and mobile web fonts are loaded.
* {
font-family: Noto Sans JP, sans-serif;
}
#media (max-width: 549px){
*{
font-family: 'ヒラギノ角ゴ ProN' , sans-serif !important;
}
}
How to load web fonts only on desktop?
I would like to ask for advice. thank you.