In sendgrid I can see the preview of the fonts in the correct way but when I send a test email, Google Fonts not working as the way it should be. I tried several ways but non of them worked.

<link
  href="https://fonts.googleapis.com/css2?family=Inter&amps;display=swap"
  rel="stylesheet"
/>

@import URL(https://fonts.googleapis.com/css2?family=Inter&amps;display=swap)

    /* inter-regular - latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/inter-v12-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/inter-v12-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/inter-v12-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/inter-v12-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/inter-v12-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/inter-v12-latin-regular.svg#Inter') format('svg'); /* Legacy iOS */
}

CodePudding user response：

Only some email clients support web fonts. Gmail, for example, does not (aside from Roboto and Open Sans).

This is a good resource on things you need to know for embedding web fonts in emails, and covers some quirks in clients like Outlook. But ultimately, you need to know that not all clients will support it, and you will need a backup font to fallback to.