-webkit-text-stroke chrome несколько строк

Question

Я пытаюсь использовать -webkit-text-stroke для создания контура текста. Похоже, в Safari отлично работает. Тем не менее, когда я смотрю в Chrome, он отображает шрифт с несколькими строками. Единственный способ, которым он этого не делает, это если я использую шрифт .eot, однако он не очень хорошо поддерживается. Я пробовал все другие шрифты woff woff2 otf tff.

Есть ли способ исправить это? Или в чем может быть проблема?

Вот CSS:

@font-face {
    font-family: 'Platform-Medium';
    src: url(../assets/Platform-Medium.otf);
    font-weight: 500;
}


body{
    font-family: 'Apercu', Helvetica, sans-serif;
    line-height: 2;
    /* here we smoothed the text a touch */
    -webkit-font-smoothing: antialiased;
}

.platform-medium {
    font-family: 'Platform-Medium';
}


.f7 {
    font-size: 13rem;
    letter-spacing: .05em;
}

.light{
    color:#E8EFEE;
}

.text-outline{
    color: transparent;
    -webkit-text-stroke-color: #E8EFEE;
    -webkit-text-stroke-width: 2px;
}

Я должен также упомянуть, что я использую тахионы.

<section class="hero min-vh-100 cover bg-center flex items-center justify-center" style="<?php if( get_field('hero_image') ):?> 
	background-image: url(<?php the_field('hero_image'); ?>;<?php endif; ?>">
		
		<div class="hero-content flex items-center justify-center w-100">

			<!-- If no image is added to the 'subhead' 
			custom field then the title of the post will be chown -->
			<?php if( get_field( 'Subhead' ) ): ?>
				<img class="subhead w-75" src="<?php the_field('Subhead'); ?>" />
               <?php else: ?>
               <h1 class="light platform-medium f7 ma0 text-outline ttu tc"><?php the_title();?></h1>
               <?php endif; ?>    

		</div>

	</section>

Это результат: введите описание изображения здесь