CSS 코드 생성기

Google Fonts용 바로 사용 가능한 CSS 코드를 생성하세요. 폰트와 굵기를 선택하고 복사-붙여넣기 코드를 받으세요.

기본 폰트

보조 폰트 (선택사항)

Frequently Asked Questions

Both @import (in CSS) and <link rel='stylesheet'> (in HTML) fetch the Google Fonts stylesheet, but they differ in how they interact with the browser's rendering pipeline. A <link> tag in <head> is discovered early during HTML parsing and can be downloaded in parallel with other resources. An @import at the top of a CSS file blocks the CSS parser until the imported stylesheet is fetched, adding latency. Chrome's Lighthouse performance audit specifically flags render-blocking @import statements and recommends converting them to <link> tags.

Self-hosting removes the data transfer to Google's CDN by serving font files from your own server or CDN. The process involves: (1) using the Google Fonts Helper tool or FontFYI's CSS Generator to obtain @font-face rules pointing to local WOFF2 files; (2) downloading the specified WOFF2 files; (3) uploading them to your hosting; and (4) replacing the Google Fonts <link> with a <link> to your local CSS file. The self-hosted approach also enables precise cache-control headers and eliminates the cross-origin DNS lookup latency of fonts.googleapis.com.

The unicode-range descriptor in @font-face tells the browser to download a font file only if the page contains characters within the specified Unicode range. Google Fonts exploits this by splitting each family into multiple subset files (latin, latin-ext, cyrillic, etc.) and serving @font-face rules with matching unicode-range values. A page with only Latin text will download only the Latin subset, saving tens of kilobytes. When generating @font-face rules manually, including the correct unicode-range values from the Google Fonts API response ensures the same optimised subset loading behaviour.

font-display: swap renders the fallback font immediately and replaces it with the web font on load, minimising invisible text but risking a visible layout shift. font-display: fallback uses a very short invisible period (100 ms) before swapping, giving the font a brief chance to load without FOIT while still swapping if it arrives quickly. font-display: optional gives the font a short window to load; if it misses that window, it is abandoned for the current page load and cached for subsequent visits. Google recommends swap for body fonts on performance-critical pages and optional for decorative fonts.

Add <link rel='preload' as='font' type='font/woff2' href='https://fonts.gstatic.com/s/fontname/...' crossorigin> in the <head> before the fonts.googleapis.com stylesheet. This instructs the browser to fetch the font file at the highest priority—ahead of images, scripts, and stylesheets—so that the font is ready when the first text render occurs, preventing LCP degradation. You must include the crossorigin attribute because font files are cross-origin resources. FontFYI's CSS Generator can emit the preload tag alongside the stylesheet link for your selected fonts.