HTML and CSS project tutorial covering web development fundamentals. Learn to build interactive and responsive web pages.
To use a Google Font, include a link in your HTML head: <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">. The display=swap parameter ensures text is visible immediately using a fallback font while the custom font loads, preventing invisible text. Then reference the font in CSS: font-family: 'Inter', sans-serif;. You can include multiple fonts by separating them with & in the URL. Use the Google Fonts website to select fonts, customize weights, and generate the embed code automatically.
Great font pairings create contrast and visual hierarchy. Common strategies: pair a serif heading font with a sans-serif body font for classic editorial style — Playfair Display headings with Source Sans Pro body text creates an elegant, trustworthy feel. Use the same font family with different weights for a safe, modern, consistent look. Pair a distinctive display font for headings with a neutral body font for personality plus readability. Popular pairings include Roboto + Roboto Slab for consistency, Montserrat + Merriweather for modern editorial, Poppins + Open Sans for friendly energy, and Lora + Inter for clean academic presentation. Limit your site to two font families maximum for a professional appearance.
font-family specifies the font stack with fallbacks. font-weight controls thickness using numeric values 100-900 or named keywords like normal and bold. font-style supports normal, italic, and oblique. font-size sets text size — always use rem units for accessibility so text respects user browser settings. line-height controls vertical spacing between lines of text — 1.5 to 1.8 is optimal for body text readability. letter-spacing adjusts spacing between characters, useful for uppercase headings. text-transform changes case to uppercase, lowercase, or capitalize. text-decoration controls underline, overline, and line-through. Each property plays a role in creating readable, attractive typography.
Font files range from 50KB to 300KB per weight, making font optimization critical for page speed. Only load the font weights you actually use — loading 400+500+600+700 when you only need 400 and 700 wastes bandwidth. Use font-display: swap or optional to control how fonts load. Preload critical fonts: <link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>. Consider self-hosting fonts instead of using Google's CDN to eliminate third-party DNS lookups and gain full control over caching. Subset fonts to include only the characters you need — Latin-only subsets can reduce file sizes by 50% or more for Latin-alphabet content.
Variable fonts are a modern font format that packages multiple weights, widths, and styles into a single file. Instead of loading separate files for regular, bold, italic, you load one file and adjust design axes: font-variation-settings: 'wght' 700, 'ital' 1. This dramatically reduces total font payload — Inter Variable at ~200KB replaces Inter Regular + Inter Bold + Inter Italic at 500KB+. Google Fonts supports variable fonts — look for "Variable" in the font selection options. Browser support for variable fonts is excellent at over 98% globally. Performance gains are significant, especially on sites using multiple font weights.
System font stacks use fonts already installed on the user's device, eliminating font loading entirely. A modern system font stack: font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;. This stack uses San Francisco on Mac/iOS, Segoe UI on Windows, Roboto on Android, and falls back to Arial. System fonts load instantly, never cause layout shift, and match the operating system's native look. The trade-off is less design personality compared to custom fonts. Many successful sites like GitHub, Medium, and Bootstrap use system font stacks for optimal performance.
Use 1rem (16px) as the base font size for body text. Set line-height: 1.6-1.8 for comfortable reading. Keep line length between 65-75 characters per line. Establish a clear heading hierarchy with h1 at 2rem+, h2 at 1.5-1.75rem, and h3 at 1.25-1.5rem. Maintain at least a 1.5 ratio between heading levels. Test typography on both mobile and desktop. Limit your project to two font families maximum. Ensure text color contrast meets WCAG AA standards — at least 4.5:1 for normal text and 3:1 for large text. Use a tool like WebAIM's contrast checker to verify your color choices meet accessibility requirements.