[SOLVED] Css effect to make font look dirty/textured

Css effect to make font look dirty/textured

I want to use a font from here. Like you can see, there is a preview image ontop and a small field down below where you can write an example text.

The font is like every other font, meaning only black. Is it possible with css to mimic the texture that is used in the preview image? I mean the dark spots. The white spots that are not on the font can be ignored.

Preview Front with texture

Solution

Here is a simple example of text clipping the background of its element using CSS background-clip (note, this is not completely standard and some browsers require a prefix and it is not compatible with IE):

.fontBg {
  background-image: url(https://picsum.photos/id/1016/300/100);
  background-size: cover;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: 60px;
  font-weight: 900;
  font-family: sans-serif;
}

<div class="fontBg">HERE IS SOME TEXT</div>