Separación extra de palabras de la etiqueta h

Tengo la etiqueta h2 y hay contenido :before .

HTML

  This is h2 tag and it has word spacing problem

CSS

 .arrow-heading:before { content: "\e072"; color: #9B0D25; float: left; } .glyphicon { position: relative; top: 1px; display: inline-block; font-family: 'Glyphicons Halflings'; font-style: normal; font-weight: 400; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .text-white { color: #FFF; } .margin-zero { margin: 0em; } h2 { font-size: 1.5vw; }

Pero obtengo espacio adicional como se muestra a continuación sin text-align: justify;

introduzca la descripción de la imagen aquí

No quiero ningún espacio extra.

EDITAR

Con text-align: justify;

introduzca la descripción de la imagen aquí

Respondí en los comentarios, pero la fuente Glyphicon Haflings se está aplicando a toda la etiqueta

, y esto causará el problema de espaciado. La fuente solo debe aplicarse al elemento que contiene específicamente el Glyphicon.

Para boost la especificidad, puede usar una etiqueta como el primer elemento secundario de

, y otra sería (como lo hizo OP) mover la font-family de .arrow-heading:before selector en su CSS.