html - 余分な文字が見出しの後ろに表示され、非常に奇妙です

Question

@font-face を使用して CSS ルールに追加したカスタム フォントがあります。これはヘブライ語のフォントで、ウェブサイト全体の段落と見出しで使用していますが、問題はありません。

また、上部のナビゲーション バーのフォントを見出しとして使用しています。見出しに一定以上の文字を追加すると、なぜか見出しの後ろに余分な文字が表示されます。この文字は選択できず、テキストの一部を選択するとすぐに消えます (???)。

これがどのように見えるかです：

テキストの一部を選択すると、次のようになります。

ここにhtmlがあります：

<div id="header_body" dir="rtl">
    <div id="slogan">
        <h1>מאגר מאמרים ואפליקציות מקוריות</h1>
        <h2>בנושאים: בניית אתרים, תכנות, עיצוב וקידום</h2>
    </div>
</div>

そしてCSS：

#header_body {
background:transparent url('img/header.jpg') no-repeat center top;
height:76px;
}
#slogan {
    margin:11px 216px 0 0;
    letter-spacing:2px;
    opacity:0.9;
    float:right;
}
#slogan h1 {font:italic bolder 28px "Yoav";text-shadow:1px 1px 0 #b85d1b,2px 2px 0 white,3px 3px 4px #b85d1b;color:#f37a21}
#slogan h2 {font:italic bolder 20px "Yoav";text-shadow:1px 1px 0 #111,2px 2px 0 white,2px 2px 4px #333;color:#888}