How To Add Custom Fonts To Your Website

What Fonts Can Be Used on a Website?

Websites can use system fonts already installed on a visitor’s device, fonts delivered by third-party services, or licensed font files hosted on the website’s own server.

The best choice depends on several factors:

Brand identity.
Readability.
Language and character support.
Font licensing.
Website performance.
Browser compatibility.
Privacy requirements.
Accessibility.

Typography is not only a visual-design decision. Font selection and loading strategy can affect how quickly text appears, whether the page shifts while loading, how easily users can read the content, and whether all required characters display correctly.

Main Types of Website Fonts

1. System Fonts

System fonts are fonts already installed on the user’s operating system. When a website uses a system font, the browser usually does not need to download an additional font file.

Benefits may include:

Fast text rendering.
No external font request.
Reduced page weight.
Familiar appearance within the operating system.
Lower risk of invisible text during font loading.

The exact font displayed can vary between Windows, macOS, Android, iOS, and Linux.

A modern system-font stack may look like this:

body {
    font-family:
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;
}

The browser uses the first available font in the list.

2. Web-Safe Fonts

Web-safe fonts are typefaces that have historically been available across many common operating systems.

Examples include:

Arial.
Helvetica.
Verdana.
Tahoma.
Trebuchet MS.
Georgia.
Times New Roman.
Courier New.

Availability is not identical on every device. For that reason, CSS should define a fallback stack rather than relying on one exact font.

Example:

article {
    font-family: Georgia, "Times New Roman", Times, serif;
}

3. Hosted Web Fonts

Hosted web fonts are downloaded by the browser from a font provider or content-delivery service.

Common services include:

Google Fonts.
Adobe Fonts.
Font providers and licensed foundry services.

Hosted services can simplify implementation and provide a large selection of font families. They may also introduce:

Additional network connections.
Dependence on an external provider.
Privacy considerations.
Changes in font availability or service terms.
Less control over delivery behavior.

4. Self-Hosted Web Fonts

Self-hosting means storing licensed web-font files on the same infrastructure as the website or on a CDN controlled by the website owner.

Potential advantages include:

Greater control over caching and delivery.
Reduced reliance on third-party services.
More control over privacy and network requests.
Ability to select only the required files and character subsets.

Self-hosting also creates additional responsibilities:

Confirming that the font license permits web embedding and self-hosting.
Creating or obtaining suitable web formats.
Configuring caching and CORS correctly.
Managing updates and file variants.
Optimizing loading performance.

5. Variable Fonts

A variable font can store multiple variations, such as weight, width, or slant, within one font resource.

Instead of loading separate files for several weights, a website may load one variable file that supports a continuous range.

Example:

@font-face {
    font-family: "Example Variable";
    src: url("/fonts/example-variable.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

body {
    font-family: "Example Variable", system-ui, sans-serif;
}

Variable fonts can reduce the number of font requests, but they are not automatically smaller than every collection of static files. Compare the actual file sizes and only include the axes and characters the website needs.

6. Icon Fonts

Icon fonts store graphical symbols as font characters. Well-known examples include Font Awesome and custom icon sets created through tools such as IcoMoon.

They can provide:

Simple CSS sizing.
Current-color inheritance.
One downloadable resource containing many icons.

However, icon fonts also have limitations:

Icons may fail when the font does not load.
Accessibility labels require careful implementation.
Rendering may vary between browsers.
An entire font may be downloaded for only a few icons.
Multicolor icons are difficult to support.

For many modern interfaces, inline SVG or an SVG sprite provides better accessibility, styling control, and delivery efficiency.

When an icon font is used, decorative icons should be hidden from assistive technology, while meaningful controls need an accessible name.

Font Categories Used in Web Design

Serif Fonts

Serif fonts contain small finishing strokes at the ends of characters.

They are often used for:

Editorial websites.
Long-form articles.
Luxury or traditional brands.
Headings and quotations.

Examples include Georgia, Lora, Source Serif, and Merriweather.

Sans-Serif Fonts

Sans-serif fonts do not have traditional serif strokes. They are common in interfaces because many families remain clear at small sizes.

Examples include Arial, Inter, Roboto, Open Sans, Source Sans, and IBM Plex Sans.

Monospace Fonts

In a monospace font, each character occupies approximately the same horizontal width.

They are useful for:

Source code.
Terminal output.
Technical values.
Tabular identifiers.

Examples include Consolas, Menlo, Monaco, Source Code Pro, and JetBrains Mono.

Display Fonts

Display fonts are designed for large headlines, campaign messages, logos, or decorative text.

They should generally be used sparingly because highly stylized letterforms can reduce readability in body copy, navigation, and forms.

Handwriting and Script Fonts

Script fonts may support a personal, artistic, or elegant visual direction. They can become difficult to read when used for:

Long paragraphs.
Small text.
All-uppercase content.
Critical instructions.
Form labels.

Which Font Format Is Best for the Web?

For websites targeting modern browsers, WOFF2 is generally the preferred font format.

WOFF2 was designed for efficient web delivery and provides strong compression and broad current browser support.

WOFF2

Recommended for modern websites.

Benefits include:

Efficient compression.
Broad modern-browser support.
Designed specifically for web use.
Support for modern OpenType features.
Support for variable fonts.

WOFF

WOFF is the earlier version of the Web Open Font Format. It may be retained when a project must support an older browser environment not covered by WOFF2.

For most current public websites, WOFF2 alone may be sufficient after confirming the project’s supported-browser policy.

TTF and OTF

TrueType and OpenType files are commonly used for desktop installation and source distribution. Browsers may support them through @font-face, but they are usually not the preferred production format for normal web delivery.

They may be:

Larger than optimized WOFF2 files.
Licensed for desktop use but not web embedding.
Missing web-specific subsetting or compression.

Convert or obtain official web-font files only when the license permits it.

EOT

Embedded OpenType was created for older versions of Internet Explorer. It is obsolete for modern browser-support policies and should not be included in a new website unless a specific legacy environment requires it.

SVG Fonts

The old SVG font format should not be confused with ordinary SVG icons or graphics.

SVG fonts are obsolete for general web typography and should not be part of a modern font-delivery strategy.

Modern Browser Support for Fonts

Format	Recommended for New Websites?	Typical Purpose
WOFF2	Yes	Primary modern web-font format
WOFF	Only when older-browser support is required	Legacy fallback for web fonts
TTF/OTF	Usually no	Desktop installation or source font files
EOT	No	Older Internet Explorer support
SVG Font	No	Obsolete font technology

How to Add a Self-Hosted Font with @font-face

The CSS @font-face rule allows a website to define a custom font resource.

Basic @font-face Example

@font-face {
    font-family: "Brand Sans";
    src: url("/fonts/brand-sans-regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

body {
    font-family: "Brand Sans", system-ui, sans-serif;
}

Define Each Font Style Correctly

If separate static files are used, create a rule for every required weight and style.

@font-face {
    font-family: "Brand Sans";
    src: url("/fonts/brand-sans-regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Brand Sans";
    src: url("/fonts/brand-sans-semibold.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Brand Sans";
    src: url("/fonts/brand-sans-italic.woff2") format("woff2");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

Do not label a regular file as supporting every font weight. Doing so can cause the browser to synthesize styles or display unexpected results.

Understanding font-display

The font-display descriptor controls how text is displayed while a web font is downloading.

font-display: swap

The browser displays fallback text quickly and replaces it after the web font becomes available.

@font-face {
    font-family: "Brand Sans";
    src: url("/fonts/brand-sans.woff2") format("woff2");
    font-display: swap;
}

This prevents text from remaining invisible for an extended period, but the font change can cause layout movement if the fallback and web font have different metrics.

font-display: optional

The browser may continue using the fallback font when the custom font cannot be loaded quickly.

This can be suitable when performance and visual stability are more important than guaranteeing that the custom typeface appears during the first visit.

font-display: fallback

This provides a short blocking period followed by a fallback period. The browser may use the downloaded font on a later visit if it does not arrive soon enough.

Choose font-display According to the Project

There is no universal value for every font.

For example:

A distinctive logo-style heading may tolerate different behavior from body text.
Body content should become readable quickly.
A decorative font may be optional.
A fallback system font may be sufficient on slow connections.

How to Reduce Layout Shift from Web Fonts

When fallback and custom fonts have different character widths or line heights, text may reflow after the web font loads.

This can contribute to Cumulative Layout Shift and create a distracting reading experience.

Choose a Compatible Fallback

Select a fallback whose proportions are reasonably similar to the custom font.

Use Font Metric Overrides

CSS provides descriptors that can help align fallback metrics:

size-adjust.
ascent-override.
descent-override.
line-gap-override.

Example:

@font-face {
    font-family: "Brand Sans Fallback";
    src: local("Arial");
    size-adjust: 102%;
    ascent-override: 92%;
    descent-override: 24%;
    line-gap-override: 0%;
}

body {
    font-family:
        "Brand Sans",
        "Brand Sans Fallback",
        sans-serif;
}

The values must be calculated for the selected fonts rather than copied blindly from another project.

Test Real Content

Evaluate:

Long headings.
Buttons.
Navigation labels.
Forms.
Numbers and prices.
Vietnamese diacritics.
Content in other supported languages.

How to Preload a Critical Font

A critical self-hosted font may be requested earlier through preload:

<link
    rel="preload"
    href="/fonts/brand-sans-regular.woff2"
    as="font"
    type="font/woff2"
    crossorigin
>

Preload should be used selectively.

Do not preload every:

Font family.
Weight.
Italic variant.
Language subset.
Decorative font.

Unnecessary preload requests compete with more important resources such as the main stylesheet, hero image, and application code.

The preload URL must exactly match the URL referenced in @font-face.

Font Subsetting and unicode-range

A font may contain thousands of characters covering several languages and writing systems. Loading every character is unnecessary when the website uses only a limited subset.

Subsetting can reduce file size by creating separate font resources for required characters.

The unicode-range descriptor tells the browser which character ranges a font resource supports.

@font-face {
    font-family: "Brand Sans";
    src: url("/fonts/brand-sans-latin-ext.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    unicode-range:
        U+0000-024F,
        U+1E00-1EFF;
}

Websites containing Vietnamese should confirm that the selected font and subset include all Vietnamese characters and combining marks.

Do not create font subsets without checking the license and testing all supported content.

How to Use Google Fonts

Google Fonts provides a hosted CSS API for loading supported font families.

Add a Google Fonts Stylesheet

<head>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link
        rel="preconnect"
        href="https://fonts.gstatic.com"
        crossorigin
    >
    <link
        href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap"
        rel="stylesheet"
    >
</head>

Apply the Font in CSS

body {
    font-family: Roboto, Arial, sans-serif;
}

Request Only Required Weights

Avoid loading every available weight and style.

If the design uses only regular and bold text, request only those variants.

Consider Privacy and Third-Party Loading

Loading fonts from an external service creates network requests to that provider.

Depending on the website, market, and applicable privacy requirements, the business may choose to:

Use the hosted service.
Use system fonts.
Self-host properly licensed fonts.

Self-hosting a Google Fonts family still requires compliance with the font’s license and correct technical implementation.

How to Use Adobe Fonts

Adobe Fonts allows eligible subscribers to create a Web Project and add supported font families to it.

Create a Web Project

Sign in to Adobe Fonts.
Select a font family.
Add the font to a new or existing Web Project.
Select the required styles and language subsets.
Copy the provided embed code.

Add the Embed Code

<head>
    <link
        rel="stylesheet"
        href="https://use.typekit.net/xxxxxxx.css"
    >
</head>

Apply the Font

body {
    font-family: "example-family", sans-serif;
}

Use the exact CSS family name provided by Adobe Fonts.

Fonts served through an Adobe Fonts Web Project must be used according to Adobe’s licensing and embed requirements. Adobe Fonts files supplied through the service should not simply be downloaded and self-hosted.

Font Licensing for Websites

Font files are software and are normally protected by copyright and licensing terms.

Having a font installed on a computer does not automatically grant permission to:

Upload the file to a public server.
Convert it to WOFF2.
Embed it in a website.
Share it with a client or contractor.
Use it in an application.

Check the License Before Implementation

Confirm whether the license permits:

Web embedding.
Self-hosting.
Commercial use.
Modification or subsetting.
Use across multiple domains.
Use by a client or agency.
Application or document embedding.

Keep License Records

Store:

Purchase receipt.
License agreement.
Permitted domains.
Licensed pageview or usage limits where applicable.
Font version.
Provider contact details.

Do not use font files copied from another website or downloaded from an unverified source.

Font Fallback Strategies

Every custom font declaration should include fallback fonts.

Sans-Serif Fallback

body {
    font-family:
        "Brand Sans",
        Inter,
        "Segoe UI",
        Arial,
        sans-serif;
}

Serif Fallback

article {
    font-family:
        "Brand Serif",
        Georgia,
        "Times New Roman",
        serif;
}

Monospace Fallback

code,
pre {
    font-family:
        "JetBrains Mono",
        Consolas,
        Monaco,
        "Courier New",
        monospace;
}

A generic family such as sans-serif, serif, or monospace should appear at the end of the stack.

Typography Accessibility Best Practices

Use Readable Body Text

The appropriate text size depends on the font family, weight, line length, language, and audience. Approximately 16 CSS pixels is a common starting point for body content, not a mandatory universal value.

Maintain Sufficient Contrast

Text must remain readable against its background. Very light font weights may appear less legible even when the selected colors technically pass a contrast calculation.

Avoid Long Lines

Long-form content can use a maximum width:

.article-content {
    max-width: 70ch;
}

Use Comfortable Line Height

Body text often benefits from a unitless line-height:

body {
    line-height: 1.6;
}

Do Not Justify Long Body Text Unnecessarily

Full justification can create uneven gaps that make reading more difficult, especially on narrow mobile screens.

Avoid All Caps for Long Content

Uppercase styling can be useful for short labels, but long uppercase text is harder to scan and may require adjusted letter spacing.

Support User Zoom

Do not prevent users from enlarging the website through restrictive viewport settings.

How Many Fonts Should a Website Use?

Many websites can create a complete visual hierarchy with one font family or two complementary families.

A common structure is:

One family for body text and interface controls.
One optional display family for headings.

Using too many families, weights, and styles can:

Increase download size.
Create inconsistent visual hierarchy.
Complicate maintenance.
Increase layout-shift risk.
Make the website appear unprofessional.

Fonts and Core Web Vitals

Largest Contentful Paint

If the largest visible element is text, delayed font loading may affect when that content appears correctly.

Improve delivery by:

Reducing font files.
Using WOFF2.
Requesting only necessary styles.
Preloading only a genuinely critical font.
Using an appropriate font-display value.

Cumulative Layout Shift

A late font replacement can change line breaks, button dimensions, and section heights.

Reduce this risk through:

Compatible fallbacks.
Font metric overrides.
Early delivery.
Testing real content.

Interaction to Next Paint

Font loading itself is not usually the main cause of interaction delay, but large stylesheets, third-party services, and JavaScript-based font loaders can contribute to overall main-thread work.

Do Fonts Affect SEO?

Search engines do not rank a page higher simply because it uses a particular font.

Fonts can indirectly affect website quality through:

Text readability.
Mobile usability.
Page loading.
Visual stability.
Accessibility.
User trust.

Important text should remain real HTML text rather than being placed only inside images.

Do not hide keyword-rich text, use unreadably small font sizes, or create foreground and background colors intended to conceal content.

Common Web Font Mistakes

Loading many font families and weights.
Using TTF or OTF files without checking for optimized web formats.
Uploading fonts without a valid web license.
Forgetting fallback fonts.
Using the wrong weight descriptor in @font-face.
Preloading every font file.
Loading a decorative font for ordinary body copy.
Ignoring Vietnamese or multilingual character support.
Using an icon font for only one or two icons.
Allowing web fonts to create noticeable layout shifts.
Using low-contrast, very thin text.
Relying on browser-synthesized bold or italic styles.
Testing typography only on one operating system.

How to Test Web Font Implementation

Inspect Network Requests

Use browser developer tools to verify:

Which font files are downloaded.
Whether unnecessary variants are requested.
File sizes.
Caching headers.
CORS errors.
Third-party connection time.

Simulate Slower Connections

Check how the website behaves before the custom font becomes available.

Confirm that:

Text remains visible.
The fallback is readable.
Navigation still works.
Buttons do not resize dramatically.
The page does not shift excessively.

Test Supported Languages

Check all characters used by the website, including:

Vietnamese diacritics.
Currency symbols.
Quotation marks.
Mathematical characters.
Product codes.
Names from target markets.

Test Across Operating Systems

Font rendering can vary between:

Windows.
macOS.
iOS.
Android.
Linux.

Web Font Implementation Checklist

Font Selection

The font supports the brand.
Body text is readable.
Required languages and characters are included.
The selected weights and styles are genuinely needed.

Licensing

A valid web-font license exists.
Self-hosting is permitted where applicable.
Subsetting or conversion is permitted.
License documents are stored.

Technical Implementation

WOFF2 is used for modern browsers.
@font-face descriptors are accurate.
A suitable font-display strategy is defined.
Fallback stacks are present.
Caching and CORS are configured.
Only critical fonts are preloaded.

Performance

Unused weights have been removed.
File sizes have been reviewed.
Required character subsets are used where appropriate.
Text remains visible during loading.
Layout shift has been tested.

Accessibility

Text has sufficient contrast.
Font sizes remain readable.
Line height and line length are comfortable.
Users can zoom the page.
Icons have appropriate accessible labels.

Frequently Asked Questions About Web Fonts

What Is the Best Font Format for Websites?

WOFF2 is generally the preferred format for websites targeting modern browsers because it offers broad support and efficient compression.

Should I Use Both WOFF and WOFF2?

Many modern websites can use WOFF2 alone. WOFF may be added when the project has a specific requirement to support older browsers.

Can I Use a TTF Font on a Website?

Browsers may support it, but WOFF2 is normally more suitable for production web delivery. You must also confirm that the font license permits web embedding or conversion.

Can I Upload Any Font to My Website?

No. A desktop font license does not automatically permit public web hosting. Review the license or obtain a proper web-font license before uploading the file.

Are Google Fonts Free?

Google Fonts provides families under open licenses, but each font’s license and attribution information should still be reviewed. Technical and privacy implementation also remain the website owner’s responsibility.

Can Adobe Fonts Be Self-Hosted?

Fonts provided through the Adobe Fonts subscription service must be used according to Adobe’s Web Project and embed-code requirements. The service does not provide those hosted files for independent self-hosting.

What Does font-display: swap Do?

It allows fallback text to appear quickly and replaces that text with the web font after the font is available. The replacement can cause layout movement if the two fonts have different metrics.

Should I Preload Web Fonts?

Preload only the font files required for content visible early in the page. Preloading too many resources can delay other critical downloads.

How Many Font Weights Should I Load?

Load only the weights used by the design. Many websites need regular, semibold, and possibly bold or italic—not every available variation.

Are Variable Fonts Always Faster?

No. A variable font can replace several static files, but its total size may be larger than a small number of carefully selected static files. Compare the actual implementation.

Are Icon Fonts Still Recommended?

They remain usable, but SVG is often a better option for a small or medium icon set because it offers greater visual and accessibility control.

Why Does Text Move When a Font Loads?

The fallback and downloaded font may have different character widths, line heights, and other metrics. Use a more compatible fallback, metric overrides, and an appropriate loading strategy.

Do Custom Fonts Help SEO?

No font family directly improves rankings. A well-optimized implementation can support readability, accessibility, performance, and visual stability.

Which Fonts Support Vietnamese?

Many modern families support Vietnamese, but support must be verified for the exact font and downloaded subset. Test all Vietnamese diacritics before publishing.

Conclusion

Adding a font to a website is technically simple, but implementing typography well requires careful decisions about readability, licensing, file format, performance, and accessibility.

A modern web-font strategy should:

Use system fonts when custom typography is unnecessary.
Prefer WOFF2 for modern web delivery.
Load only required families, weights, and characters.
Define complete fallback stacks.
Select an appropriate font-display value.
Preload only genuinely critical files.
Reduce layout shift through compatible metrics.
Confirm Vietnamese and multilingual support.
Respect font licensing.
Test on real devices and slower connections.

Typography should support the content rather than compete with it. A visually distinctive font is valuable only when visitors can read the website comfortably and the implementation does not create avoidable delays or instability.

VietSEO provides font implementation, responsive typography, UI/UX design, website performance optimization, accessibility improvement, and web design issue resolution for business websites, ecommerce stores, and custom web applications.