太さで分かれているフォントをCSSで統一する

同じ書体なのだが太さによって複数のフォントに分かれていることがある。このようなフォントはCSSのfont-weightで太さを制御できない。そういう作りのフォントはそもそもweb向けではないのだが、Electronアプリ（obsidian）は見た目の制御にCSSを使っており、カスタマイズでそのようなフォントを使いたいこともあるだろう。

macOSには含まれる筑紫A丸ゴシックというフォントが含まれている。これをあるElectronアプリのカスタマイズで使っていたのだが、macOS 15.6からフォント名が変更され、boldとregularが別のフォントになったため適用されなくなってしまった。

mac0S 15.5まで、これ１つでboldとnormalに対応していた - Tsukushi A Round Gothic

macOS 15.6から２つのフォントに分かれた - Tsukushi A Round Gothic Bold - Tsukushi A Round Gothic Regular

@font-faceを使うと、このように太さで２つに分かれているフォントを1つのフォントセットとして扱う事ができる

  @font-face {
    font-family: 'TsukushiARoundGothic';
    src: local('Tsukushi A Round Gothic Bold'), local('Tsukushi A Round Gothic');
    font-weight: bold;
  }
  @font-face {
    font-family: 'TsukushiARoundGothic';
    src: local('Tsukushi A Round Gothic Regular'), local('Tsukushi A Round Gothic');
    font-weight: normal;
  }
  .container { font-family: 'TsukushiARoundGothic' }