I recently came across a unique font that requires both fill and shadow to be used together, with the fill on top and the shadow underneath. I managed to layer them successfully using relative and absolute positioning, as shown in this example.
Here is how I achieved it using HTML and CSS:
HTML:
<h1 class="fill">TEXT</h1>
<h1 class="shadow">TEXT</h1>
CSS:
.fill {
font-family: "Tilastia-Fill";
position: relative;
}
.shadow {
font-family: "Tilastia-Shadow";
position: absolute;
bottom: 50%;
}
However, I encountered difficulties when trying to maintain the desired look when switching between portrait and landscape orientations, especially with multiple lines of double stacked text. You can see the issue in this example: link
It seems like there's something about positioning that I am missing, causing elements to shift when the screen orientation changes.