I think most people follow this tutorial when using custom fonts.
However, with this way of writing, fonts are loaded synchronously, and I think there is a risk of spoiling the user experience if the font is very large in file size.
For this reason, font-display:swap; is used in front-end development to replace the font when it has finished loading.
If you have already used web fonts, have you tried this method? If you have, I would appreciate it if you could share the benefits and any difficulties you had.