html - Shuffeled characters (possible fouc ?) Has anyone seen this before?

Question

Recently I ran into a weird bug where characters get shuffled/mixed when the page is loaded, not everytime but once every few loads you will see it. Kindof like a fouc except it only goes away on reload. I was wondering if someone has ever seen something like this before and can explain to me why this happens and how to solve it or prevent it from happening. For so far I couldn't reproduce this error in any browser but the original samsung browser.

The first word in the image should be ' contact', second one 'inschrijven'.

HTML:

<div class="cta-widget">
    <a class="cta-link" href="#">
        <i class="fa fa-phone"></i>
        <p>Contact</p>
    </a>
</div>

<div class="cta-widget">
    <a class="cta-link" href="#">
        <i class="fa fa-pencil-square-o"></i>
        <p>Inschrijven</p>
    </a>
</div>

<div class="cta-widget">
    <a class="cta-link" href="#">
        <i class="fa fa-user"></i>
        <p>Team</p>
    </a>
</div>

The only css used for just the text is

.c2aArea .cta-link p {
    line-height: 1.2em; 
    margin-bottom: 0;
}