在Head中收费很多字体的问题

Question

我正在尝试制作像google这样的自定义字体，您可以在她的样式家族中看到每种字体，而我的照片是：

<ul (scroll)="onScroll($event)">
  <li *ngFor="let font of fontList | limitTo:limitTo">
    <p [style.font-family]="font">
        {{ font }}
    </p>
  </li>
</ul>

onScroll(event) {
   const scrollTop = event.target.scrollTop;
   const scrollHeight = event.target.scrollHeight;
   const offsetHeight = event.target.offsetHeight;
   const scrollPosition = scrollTop + offsetHeight;
   const scrollTreshold = scrollHeight - 10;
   if (scrollPosition > scrollTreshold) {
     this.limitTo += 10;
   }
   if (this.limitTo > 0) {
     this.link.href = 'https://fonts.googleapis.com/css?family=' + /* he is list of fonts from 0 to limitTo */ + '&display=swap';
   } else {
     this.link.href = null;
   }
   // we have already charge the link on ngOnInit
   // this.link.rel = 'stylesheet';
   // document.head.append(this.link);
}

但是如果我向下滚动到末尾，那将是一个问题，因为我将在头部充电很多字体，如何进行优化，例如，如果我知道li的位置仅显示6种字体之前和之后。