In 2017, choosing the best web fonts means balancing modern OpenType features, broad device coverage, fast loading, and permissive licensing. Sans families like Inter, Source Sans Pro, and Roboto remain strong for UI readability, while Merriweather and Lora offer clear, warm text for long-form publishing. This evergreen guide explains font formats (WOFF2, WOFF, TTF), core webfont performance techniques, and practical licensing checks so your type choices age well across browsers and regions.
What Makes a Web Font Ideal in 2017
An ideal web font in 2017 balances four attributes: screen readability, multi-platform availability, efficient delivery, and clear licensing. Readability depends on x-height, counters, and moderate stroke contrast, especially at small sizes. Availability is stronger where WOFF2 adoption grows, but WOFF and TTF remain necessary for older platforms. Delivery efficiency comes from subsetting, preloading, and font-display strategies, while permissive licensing reduces legal risk for long-term projects.
Top Recommended Web Font Families
The following families are widely available, well maintained, and suitable for public-use projects in 2017. They represent different design priorities—screen optimization, editorial clarity, and flexible utility—so you can match them to content and brand needs.
Inter: Designed for Screens
Created for user interfaces and terminals, Inter offers open counters and sturdy lowercase shapes. Its wide weights and italics make it adaptable to dashboards, apps, and long reading experiences on low-resolution displays.
Source Sans Pro / Source Sans 3: A Flexible UI Typeface
Open-sourced by Adobe, Source Sans families provide a neutral, humanist voice with strong Latin coverage. Source Sans 3 (2016 refresh) expands language support and improves spacing, making it suitable for both UI and editorial at small sizes.
Roboto: Google’s Cross-Platform Workhorse
Roboto’s moderate contrast and generous proportions perform well on mobile and desktop. By 2017 it includes a fuller Latin Extended set, supporting Western European languages without switching families, which simplifies implementation and reduces requests.
Merriweather: Readable, High-Contrast Serif
Designed for low-resolution screens, Merriweather’s large x-height and open forms improve legibility of long text. Its higher contrast suits editorial layouts and blogs where serif typography can aid reading rhythm.
Lora: Balanced Serif for Articles
With calligraphic details and dignified curves, Lora offers a warmer alternative for magazines and long-read publishing. It pairs cleanly with sans UI families for layouts that distinguish headings from body text.
Essential Font Technologies and Formats
By 2017, WOFF2 is the preferred format for compression and broad support, with WOFF as a reliable fallback. TTF remains useful for local development and legacy tools, while EOT is largely obsolete except for older IE versions. SVG fonts are niche and generally discouraged for new projects due to compatibility tradeoffs.
| Format | Verified Detail | Source Type |
|---|---|---|
| WOFF2 | Broad support in evergreen browsers; best compression | Web standards |
| WOFF | Widely supported fallback; smaller file than TTF | Web standards |
| TTF | Works in many desktop and older mobile browsers | Web standards |
| EOT | Legacy IE support; largely unnecessary for new projects | Legacy docs |
| SVG | Limited use; compatibility issues in modern rendering | Legacy practice |
Performance-First Delivery Strategies
Fast, stable text requires preconnect hints, preload for critical faces, and font-display tuning. Preconnect to your font CDN early, preload WOFF2 for the chosen weights, and avoid layout shifts by setting size attributes or using reserve keywords. Subset only characters you actually use—Latin-only subsets can reduce file size dramatically without losing readability for most Western-language content.
Practical Licensing and Legal Checks
Even permissive licenses can contain nuances around embedding, desktop conversions, or monetization. Verify whether a font allows commercial use, requires attribution, or limits enterprise embedding. For long-term projects, prefer families with open, web-friendly licenses or official web-embedding rights. When in doubt, self-host under a clearly documented license or choose an openly sourced alternative with stable maintenance.
Quick Comparison at a Glance
- Inter — Screen-first UI sans; strong hinting and italics; permissive open-source licensing.
- Source Sans 3 — Humanist UI serif style; wide Latin coverage; Adobe-backed open font.
- Roboto — Balanced contrast and spacing; excellent cross-platform consistency; Google Fonts convenience.
- Merriweather — High-contrast serif optimized for low-resolution screens; ideal for long text.
- Lora — Elegant serif with calligraphic details; excellent for editorial hierarchies and pairings.
Putting It Together: A Simple 2017 Workflow
- Define content needs: UI components vs long reading; language requirements.
- Select 1–2 families: One for UI, one for editorial (or a single neutral family for consistency).
- Choose weights and italics that cover headlines to body text without unnecessary duplication.
- Serve WOFF2 via CDN with preload and font-display: swap or optional for critical paths.
- Subset to Latin (or needed scripts), verify licensing, and test rendering on target devices.
Looking Ahead
By focusing on readable designs, efficient formats, and legally sound sources, the best web fonts of 2017 remain relevant as baseline choices for long-term digital strategy. As browser support and tooling evolve, these principles—legibility, performance, and clarity—continue to guide durable, future-proof typographic systems.