Image Replacement es una tecnica que, usando CSS, nos permite reemplazar el texto de un elemento por una imagen. Image Replacement te puede funcionar para cuando tu sitio tiene que utilizar varias tipografías y no quieres cargarlas, ya sea porque sólo se utilizan una vez, en un título ó en algo muy pequeño, si cargas la tipografía tu sitio se puede volver más lento o simplemente la tipografía no está para web.
En HTML escogemos la etiqueta que usaremos y le ponemos el texto a reemplazar
<h4 class="image-re">Hola</h4>Usando CSS podemos hacer el reemplazo de texto por imagen
.image-re {
background: transparent url("./hola.svg") no-repeat;
display: inline-block;;
margin: 0;
overflow: hidden;
text-indent: 100%;
width: 30%;
white-space: nowrap;
}