Loading Google FontsĪs with any custom fonts including self-hosted files, Google fonts are added to the page with a collection of CSS rules to define each specified font. Fortunately there's a simple solution to configure Google Fonts to eliminate this render blocking resource. In most cases, using custom Google fonts is as easy as adding a single line of HTML - for example the regular and bold variants of a font called Roboto: HTML stuff -> Īlthough this file is usually very small for a reasonable number of fonts (~4-6), a conventional render blocking reference for relatively low-priority resources like fonts can impact page speed. Another important layer in the rich and rewarding tapestry of page speed optimization.Ĭustom web font services like Google Fonts make it easy to enhance branding with eye-catching headings and stylish text elements. Before we get into the finer points of optimizing Google Fonts, don't forget to first apply these strategies to reduce and streamline web fonts.
