--- id: w3css-fonts-google title: "W3CSS Fonts Google" category: "Programming_Language" status: "draft" verification_status: "conceptual" canonical_id: "" aliases: ["Google Fonts", "W3.CSS 구글 폰트"] duplicate_of: "" source_trust_level: "B" confidence_score: 0.87 created_at: 2026-07-04 updated_at: 2026-07-04 review_reason: "" merge_history: [] tags: ["w3css", "css-framework", "w3schools", "fonts", "google-fonts"] raw_sources: ["https://www.w3schools.com/w3css/w3css_fonts_google.asp"] applied_in: [] github_commit: "" --- # [[W3CSS Fonts Google]] ## 🎯 한 줄 통찰 (One-line insight) Adding a Google Font is just TWO steps regardless of which of the 1000+ fonts you pick — a `` tag pointing to the font family, then a plain `font-family` CSS rule referencing that same name — meaning the "complexity" of using any exotic font (Tangerine, Lobster, Allerta Stencil) is identical to using a common one. [S1] ## 🧠 핵심 개념 (Core concepts) - **Two-step integration** — (1) `` in ``, (2) `font-family: FontName, fallback;` in CSS. [S1] - **1000+ free fonts available** from Google Fonts. [S1] - **Custom font class pattern** — define `.w3-fontname { font-family: FontName, genericFallback; }`, then apply via `

`. [S1] - **Google Fonts effects** — appending `&effect=shadow-multiple` to the link URL applies a visual text effect alongside the font itself. [S1] ## 📖 세부 내용 (Details) - Basic Roboto integration: ` body,h1,h2,h3,h4,h5,h6 {font-family: Roboto, sans-serif;}`. [S1] - Custom font class: ` .w3-sofia { font-family: Sofia, cursive; }

Making the Web!

`. [S1] - Font with visual effect: ``. [S1] ## ⚖️ 모순 및 업데이트 (Contradictions & updates) 소스에서 모순되는 정보는 발견되지 않음. ## 🛠️ 적용 사례 (Applied in summary) 현재 발견된 실제 적용 사례가 없습니다 — Sofia/Tangerine/Lobster 같은 커스텀 폰트를 각각의 CSS 클래스로 감싸 재사용하는 것이 실전 활용의 대표 패턴이다. [S1] ## 💻 코드 패턴 (Code patterns) Custom Google Font class (HTML/CSS): ```html

Making the Web!

``` ## ✅ 검증 상태 및 신뢰도 - **상태:** draft - **검증 단계:** conceptual - **출처 신뢰도:** B (W3Schools — widely used educational reference, not a primary standards body) - **신뢰 점수:** 0.87 - **중복 검사 결과:** 신규 생성 (New discovery) ## 🔗 지식 그래프 (Knowledge Graph) - **상위/루트:** [[W3.CSS Tutorial]] - **관련 개념:** [[W3CSS Fonts]], [[W3CSS Text]] - **참조 맥락:** 외부 폰트 라이브러리 연동 — 텍스트 스타일링(Text) 챕터로 이어짐. ## 📚 출처 (Sources) - [S1] W3Schools — W3.CSS Google Fonts — https://www.w3schools.com/w3css/w3css_fonts_google.asp ## 📝 변경 이력 (Change history) - 2026-07-04: Initial draft synthesized from the W3Schools "W3.CSS Google Fonts" page (Astra wiki-curation, P-Reinforce v3.1 format).