title: Rectangles instead of letters when browsing Angular 12 app using mobile browser
body: <p>I have developed a website in Angular 12. When browsing using desktop browsers everything works fine. When browsing from some specific mobile browsers (e.g., Chrome 95.0.4638.74 in Android 11) some of the letters in the HTML text are missing and rectangles appear instead, as shown in the following screenshot.</p>
  <p><a href="https://i.stack.imgur.com/9NJRB.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9NJRB.jpg" alt="enter image description here" /></a></p>
  <p>The font used for this heading is described in the CSS file as:</p>
  <pre><code>@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,500&amp;display=swap');
  h1, .h1{ font-size: 2.5rem; font-family: 'Playfair Display', serif; }
  </code></pre>
  <p>Can anyone enlighten me on the technical roots of the problem and suggest the best possible solution?</p>