I embed the normal weight/style of my font in my inline CSS as a data-uri, this allows the browser to render the majority of the text properly, rendering faux italic / non-normal weights using this base font where necessary.
Then I asynchronously load the rest of my CSS, which contains url-based references to the specific weights & styles (e.g. italic, bold, light), causing the browser to repaint with the proper font.
If you have a server/CDN supporting HTTP/2 (most popular CDNs support this now) you could push those files, defeating the need for inline CSS (or data-uri included fonts) and simply reference them as normal in your code.
In future, the ultimate solution, once browsers catch up, would be to combine font-display: swap with HTTP/2 pushing of the fonts.
This may not be the very latest practice but I follow what Zachleat calls "Critical FOFT with data-uri" (https://www.zachleat.com/web/comprehensive-webfonts/#critical-foft-data-uri)...
I embed the normal weight/style of my font in my inline CSS as a data-uri, this allows the browser to render the majority of the text properly, rendering faux italic / non-normal weights using this base font where necessary.
Then I asynchronously load the rest of my CSS, which contains url-based references to the specific weights & styles (e.g. italic, bold, light), causing the browser to repaint with the proper font.
If you have a server/CDN supporting HTTP/2 (most popular CDNs support this now) you could push those files, defeating the need for inline CSS (or data-uri included fonts) and simply reference them as normal in your code.
In future, the ultimate solution, once browsers catch up, would be to combine
font-display: swapwith HTTP/2 pushing of the fonts.