font load detection

src/main/resources/templates/fragments/card.html

@@ -1,4 +1,4 @@
-<div th:fragment="card" class="feature-card" th:id="${id}" th:if="${@endpointConfiguration.isEndpointEnabled(cardLink)}"
+<div th:fragment="card" class="feature-card hidden" th:id="${id}" th:if="${@endpointConfiguration.isEndpointEnabled(cardLink)}"
   th:data-bs-tags="${tags}">
   <a th:href="${cardLink}">
     <div class="d-flex align-items-center">
@@ -19,4 +19,5 @@
       star
     </span>
   </div>
-</div>
+</div>
+</div>

src/main/resources/templates/fragments/common.html

@@ -59,6 +59,7 @@
   <link rel="stylesheet" href="css/stamp.css" th:if="${currentPage == 'stamp'}">
   <link rel="stylesheet" href="css/fileSelect.css">
   <link rel="stylesheet" href="css/footer.css">
+<script src="js/thirdParty/fontfaceobserver.standalone.js"></script>
 
   <!-- Google MD Icons -->
   <link rel="stylesheet" href="css/theme/font.css">