Google fonts is the leading open-source fonts repository hosted of Google CDN. Google CDN currently hosted 1029+ Font Families available to anyone. It provides a easy to use <link>
tag that is inserted in <head>
tag of HTML page.
If website is tested against Google's Core Web Vitals guideline you see this message.
<link rel="preconnect" href="https://fonts.gstatic.com">
<link rel="stylesheet" media="print" onload="this.onload=null;this.removeAttribute('media');" href="https://fonts.googleapis.com/css2?family=Russo+One&display=swap">
Any file or resource that browser think is critical for page loading results in render blocking the page, CSS is on of those "critical" files. Setting media
property to print
tells the browser that this style sheet is used for printing purpose and it is not required for page loading, so browser give it less priority and load without blocking the page. After page is loaded successfully the onload
parameter of the Google Font API simply swap the font after the loading of font file.