SwiperJS not showing next/prev icons but area is clickable

Question

I have pages I am using swiperJS with you can follow an example here:
https://pleinairarchive.com/painting-date/july-4-2021-annie-coleman-melissa-english-gizelle-jean-english/

The Artist Images row has swiper with images off the page, however the prev/next arrows are not showing. On inspection I found the area is defined and being built properly. The problem is the :after on the buttons have a width of 0. My guess is the font is doing something weird but I don't know what. It doesn't show locally in my dev environment so it's definitely something in here. I am using 11ty to build these pages and pulling in version 6.6.1 if swiper from unpkg.com.

My Swiper markup carousel.njk

<div class="{{ swipeClass }}-swiper swiper-container">
  <div class="swiper-wrapper">
    {% for image in images %}
      <div class="swiper-slide">
        <img data-full-src="{{image.imageKitUrl}}" src="{{image.imageKitThumbUrl}}" alt="" onClick="openLightbox(this)">
        {% if image.imageCredit %}
          <div>{{ image.imageCredit[0].name }}</div>
        {% endif %}
      </div>
    {% endfor %}
  </div>
  <div class="swiper-button-prev {{ swipeClass }}-prev"></div>
  <div class="swiper-button-next {{ swipeClass }}-next"></div>
</div>

My Swiper script carousel.js

const swiperOptions = {
  slidesPerView: 1,
  spaceBetween: 10,
  breakpoints: {
    480: {
      slidesPerView: 2,
      spaceBetween: 20,
    },
    1024: {
      slidesPerView: 3,
      spaceBetween: 30,
    },
  },
  centerInsufficientSlides: true,
};

if( null !== document.querySelector('.artist-swiper') ) {
  const artistSwiper = new Swiper('.artist-swiper', {
    ...swiperOptions,
    navigation: {
      nextEl: '.artist-next',
      prevEl: '.artist-prev',
    }
  });
}

if( null !== document.querySelector('.leslie-swiper') ) {
  const leslieSwiper = new Swiper('.leslie-swiper', {
    ...swiperOptions,
    navigation: {
      nextEl: '.leslie-next',
      prevEl: '.leslie-prev',
    }
  });
}

if( null !== document.querySelector('.location-swiper') ) {
  const locationSwiper = new Swiper('.location-swiper', {
    ...swiperOptions,
    navigation: {
      nextEl: '.location-next',
      prevEl: '.location-prev',
    }
  });
}

Answer 1

The answer was provided over on the swiper discussions on github. It was the text-rendering CSS property in my reset stylesheet. it was set to optimizeSpeed which disables ligatures and kerning.