Fix cumulative layout shift - css

Question

Got a problem with CLS score which is being affected by this component on mobile devices.
This is how component loos like on initial load when browser's default font loads in:
This is what happens after my custom font is loading:
Here is my css:
.text__list {
display: inline-block;
list-style: none;
margin: 0;
padding: 0;
}
.text__item {
display: none;
&:nth-child(2) {
.text__icon {
display: none;
}
}
&:nth-last-child(-n+3) {
display: inline-block;
}
#media (min-width: $screen-sm) {
display: inline-block;
}
}
Here is my VUE html:
<ol class="text__list" data-cy="text-list">
<li class="text__read-more" :class="{'text__read-more--hidden': isShowingMore}">
<button class="text__read-more-button" #click="showMore" data-cy="text-read-more" title="Read more">
<Icon class="text__read-more-icon" name="dots-horizontal" />
</button>
</li>
<li v-for="(item, index) of items" :key="index" class="text__item" :class="{'text__item--visible': isShowingMore}">
<Icon class="text__icon" name="chevron-right" />
<AppLink class="text__link" :class="{'text__link--active': isCurrentPage(index)}" :to="item.href" :router-link="item.routerLink === true" :aria-current="isCurrentPage(index)" data-cy="text-link">{{ item.title }}</AppLink>
</li>
</ol>