Different webfont for Japanese special characters

Question

I'm working on a Japanese website and I'm using the Meiryo webfont. I really like this font but the special characters have too much margin. The exact issue is that there's too much space in front of special characters like 【, which makes the design look off if such a character is the first on a line.

font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,"メイリオ",Meiryo,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;

<h3>【好き】</h3>
<p>猫、アクリル板、真空管、リンゴジュース、ゾロ目、柄物、ドラッグストア、レゴ、アイドル、アニメ、光る物、製菓、イラスト、ドラム(叩けない)、ダリ</p>
<h3>【好きくない】</h3>
<p>煙草、カフェイン、満員電車及び人混み、パンチのあるアルコール類、刺激物全般(辛い、苦い)、算数、スポーツ全般、読書、プンプンしてる人</p>
<h3>【弱点】</h3>
<p>近眼乱視、虚弱、猫舌、譜面が読めない、書けない。方向音痴、機械音痴、運動音痴。睡眠をとらないと死ぬ。強く怒られると死ぬ。</p>

An image of the issue in my browser: https://i.sstatic.net/OYqMt.jpg

My idea to solve this is to write a script that puts every special character in a container which has a negative margin. That is obviously very hacky, and not practical at all, so are there any better solutions, like a different font for special characters only?

Answer 1

I wouldn't say this is a great option, but you could let CSS render the lenticular brackets instead. By doing so, you're removing the brackets from text entirely, so they're no longer selectable, indexable, etc., but it would solve the padding problem for these characters with a simple CSS class and it should work with any element.

This would only apply to these two characters. Other special characters would need similar CSS rules.

.brackets:before {
    content:'\3010';
    margin-left:-1.5%;
}
.brackets:after {
    content:'\3011';
    margin-right:-1.5%;
}

And then in your HTML, just add a brackets class and remove the brackets in text:

<h3 class="brackets">好き</h3>

.brackets:before {
    content:'\3010';
    margin-left:-1.5%;
}
.brackets:after {
    content:'\3011';
    margin-right:-1.5%;
}

<h3 class="brackets">好き</h3>
<p>猫、アクリル板、真空管、リンゴジュース、ゾロ目、柄物、ドラッグストア、レゴ、アイドル、アニメ、光る物、製菓、イラスト、ドラム(叩けない)、ダリ</p>
<h3 class="brackets">好きくない</h3>
<p>煙草、カフェイン、満員電車及び人混み、パンチのあるアルコール類、刺激物全般(辛い、苦い)、算数、スポーツ全般、読書、<span class="brackets">プンプンしてる人</span></p>
<h3 class="brackets">弱点</h3>
<p>近眼乱視、虚弱、猫舌、譜面が読めない、書けない。方向音痴、機械音痴、運動音痴。睡眠をとらないと死ぬ。強く怒られると死ぬ。</p>