How to Add Google Fonts to Your Website

There are two common ways to load a Google Font: a <link> tag in your document head, or an @import rule inside your CSS.

Using a link tag

This is generally the faster option, since it lets the browser discover and fetch the font earlier in the page load.

Using @import

This keeps everything inside your stylesheet, which is convenient, but delays font discovery until the CSS itself has been parsed.

Performance tips

Only load the weights and styles you actually use, and add font-display: swap so text stays visible while the font loads.