Использование свойства stroke в CSS

Question

Я пытаюсь воссоздать кнопку из изображения в коде. Для кнопки используется шрифт 900 и шрифт Inter, который можно найти в шрифтах Google. Фактический цвет текста прозрачный, но он содержит обводку в 1 пиксель с легкой желтой окраской. Я почти полностью воссоздал кнопку, но на букве A обводка фактически показывает нижнюю полосу буквы A. Для всех моих CSS экспертов, есть ли способ исправить это?

Вот изображение:

Here is what my code is looking like visually:

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;900&display=swap');

.button {
    color: black;
    font-size: 34px;
    -webkit-text-stroke: 1px rgb(253, 230, 16);
    -webkit-text-fill-color: rgb(2, 17, 42);
    background-color: rgb(2, 17, 42);
  font-family: 'Inter', sans-serif!important;
    font-weight: 900;
}

<button class="button">ACCESS EVENT</button>

Answer 1

Это ошибка шрифта и того, как они рисуют A. Если вы удалите шрифт, он работает нормально

Edit кажется, что если вы используете другую ссылку импорта, он отлично работает

@import url('https://rsms.me/inter/inter.css');
.button {
  color: black;
  font-size: 34px;
  -webkit-text-stroke: 1px rgb(253, 230, 16);
  -webkit-text-fill-color: rgb(2, 17, 42);
  font-family: 'Inter', sans-serif!important;
  background-color: rgb(2, 17, 42);
  font-weight: 900;
}

<button class="button">ACCESS EVENT</button>