KPC
Kevin Powell - Community•3y ago
iLoveCoffee

Google Font Integration

When integrating google fonts; is it okay if I skip the first 2 lines and keep only the link tag containing css sources for my fonts to minimize my HTML code? And I write: 
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,300;0,400;1,400&family=Roboto:ital,wght@0,400;0,500;0,700;1,300;1,500&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,300;0,400;1,400&family=Roboto:ital,wght@0,400;0,500;0,700;1,300;1,500&display=swap" rel="stylesheet">
as 
<link href="https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,300;0,400;1,400&family=Roboto:ital,wght@0,400;0,500;0,700;1,300;1,500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,300;0,400;1,400&family=Roboto:ital,wght@0,400;0,500;0,700;1,300;1,500&display=swap" rel="stylesheet">
2 Replies
13eck
13eck•3y ago
Sure, you can ignore them. But it might cause your site to either load slower or to get a FOUT (flash of unstyled text). The rel="preconnect" attribute tells the browser to initiate an async connection to the href so when it's used later in the code the connection is already there and the resource can be loaded immediately. https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types/preconnect Then again, I'm a staunch believer in downloading and hosting the font yourself instead of using Google fonts. That way you control where/how the font is hosted, can reuse existing connections to your domain, and don't give Google any additional potential information on your users.
iLoveCoffee
iLoveCoffeeOP•3y ago
Thanks!

Did you find this page helpful?