<!DOCTYPE html>

<html>
    <head>
        <title>CSSWARP</title>
        <style>

            /* Adapt path to font file and format depending on your build settings. */
            
            @font-face {
                font-family: ultra;
                src: url(path/to/font/file/ultra) format('woff2');
                font-weight: normal;
                font-style: normal;
                font-display: swap;
            }
            
            .warp__placeholder{
                position: absolute;
                color: transparent;
                font-size: .1px;
            }
            
            .warp {
                display: block;
                position: relative;
                width: 620px;
                height: 450px;
                font: normal 50px/1 ultra;
            }
            
            [class*='warp__'] {
                display: block;
                position: absolute;
            }
        </style>
    </head>
    
    <body>
        
                
        <div class="warp" aria-labelledby="warp-label">
            <span id="warp-label" class="warp__placeholder">
                Type. Warp. Repeat.
            </span>
    
            <span aria-role="presentation">
            </span>
        </div>
    </body>
</html>
Download HTML