CODEWITHSUNDEEP
fonts
gavinSong
gavinSong

Reputation: 315

@font-face can't work on chrome of mac os

@font-face {
  font-family: 'Noto Sans CJK SC Light';
  src: url('/src/assets/font/fonts/NotoSansCJKsc-Light-Alphabetic.eot');
  src: url('/src/assets/font/fonts/NotoSansCJKsc-Light-Alphabetic.eot?#iefix') format('embedded-opentype'),
  url('/src/assets/font/fonts/NotoSansCJKsc-Light-Alphabetic.woff2') format('woff2'),
  url('/src/assets/font/fonts/NotoSansCJKsc-Light-Alphabetic.woff') format('woff'),
  url('/src/assets/font/fonts/NotoSansCJKsc-Light-Alphabetic.ttf') format('truetype'),
  url('/src/assets/font/fonts/NotoSansCJKsc-Light.svg') format('svg');
  font-weight: normal;
  font-style: normal;
}
body {
  font-family: 'Noto Sans CJK SC Light', Roboto, -apple-system, ..., "Microsoft YaHei", SimSun, sans-serif;
}

on chrome of ubuntu, the font of my web app is 'Noto Sans CJK SC Light'. But on macos, in safari and chrome, the font is 'system-ui'. How can I make the @font-face woking on chrome of mac?

Upvotes: 1

Views: 451

Answers (1)

Syfer
Syfer

Reputation: 4479

Have you tried this? Sine you know what the system font is on Mac you should be able to put it in your font family to use it.

font-family: 'Noto Sans CJK SC Light', 'system-ui', [other fallback fonts];

Let me know if this works.

Cheers

Upvotes: 0

Related Questions