Elementorでテキストストローク（文字枠線）が重なってる！を解決する意外な方法

文字に枠線つけたらなんか重なってる！

ある日、テキストストロークがついているデザインをElementorで実装してみました。
スタイルタブにあるテキストストロークを使ったところ、なんだか1画1画が重なっているではありませんか！

みなさん、これがなぜ起きるかご存知ですか？
あなたは悪くありません。
悪いのはフォントです。
本当にフォントです。（ダジャレは人間の特権）

ここで使用していたのは「Noto Sans JP」でした。

「Zen Kaku Gothic New」に変更したところ、重ならなくなりました！

Noto Sans JP でテキストストロークが重なってしまうなら、類似のフォントに変更する！

Variable フォントはテキストストロークが重なってしまう

これ、Variableなフォントに起きる事象です。

以下、欧文のVariableフォント（Roboto / Montserrat / Inter ）で試しましたが、アルファベットのところは重なってますね。
（日本語のところが重ならないのはデフォルトフォントが当てはまってるから）

Variableフォントの確認方法

Variableか否かは、Google fontsで確認できます。

https://fonts.google.com

ご自身が使いたいフォントを検索すると、フォント名横に「● sytles」か「Variable」と記載されています。
左側の「Technology」から「Variable」をクリックで検索もできます。

まとめ

とりあえずこの事象が起きたら、フォント変えましょう！以上！

本日もお疲れ様でした。