img {
    pointer-events: none;
}

@font-face {
    font-family: IM_Fell_DW_Pica;
    src: url("https://files.catbox.moe/t5505e.ttf");
}

* {
    font-family: "IM_Fell_DW_Pica", sans-serif;
}

#names h3.username {
    animation: typing 4s infinite running;
}

@keyframes typing {
    from {
        width: 0;
    }

    to {
        width: 100%;
    }
}

After properly formatting, you'll find you never closed the * selector. Your CSS actually looked like this to the browser:

* {
    ...
    & #names h3.username {
         ...
    }
    
    @keyframes {}
}

The animation was not playing because @keyframes cannot be nested in a selector.

I'd say read a little bit more about CSS before attempting to do more complicated CSS things, such as animations. https://developer.mozilla.org/en-US/docs/Web/CSS

Side note: also fixed the font-family you're applying to *, as you never set a default font family in case your font failed to load. This means you would end up with the user's default serif font had the font failed to load.

Side note number 2: you should use quotations in url(), as the first parameter is a string.

Side note number 3: you should specify font names in quotes, as they can otherwise be replaced by a font with the same name that is already installed on the user's system. This isn't really an issue with a very non-standard font name, but it's a good practice.

Hope that helps!