How to include a font .ttf using CSS?

html

font-loading

responsive-fonts

cross-browser

byAlex Kataev·Aug 9, 2024

Embed a .ttf font in CSS with the @font-face directive: declare font-family and specify the font file's src. Like so:

@font-face {
  font-family: 'MyFont'; // Your chosen font name. Choose wisely!
  src: url('font.ttf') format('truetype'); // Your font's path, not the yellow brick road
}

/* Apply "MyFont" to any element, cater to its vanity */
.element {
  font-family: 'MyFont', fallback-fonts; // 'MyFont' as the prince, fallback-fonts as the understudies
}

Swap 'font.ttf' with your font's path, and 'MyFont' with a name that sparks joy. Unleash 'MyFont' on any text element to sport the custom font.

Accommodate the picky browsers

For a truly responsive font deployment, consider the quirks of various browsers and their thirst for performance:

Employ .woff and .woff2 formats for those modern browsers showing off their slim file sizes.
Engage .eot and .svg formats as .ttf's understudies for older browsers.
Put .woff ahead in line - it's .ttf's more optimized cousin!

Unleash the power of Transfonter.org or Font Squirrel's Webfont Generator to easily transfigure .ttf files into these formats. Ensure what you are using has universal coverage, thanks to Can I Use.

Furthermore, let a CDN do the heavy lifting. Inspect your fonts across browsers, ensuring they behave and check the console for any sneaky font related mishaps.

Deep dive into the @font-face maze

Navigating the labyrinth of @font-face requires special attention:

@font-face {
  font-family: 'MyCustomFont'; // Keep this consistent as your aunt's holiday cards
  src: url('path-to-your-font.eot'); /* The pied piper for the IE9 Compat Modes */
  src: url('path-to-your-font.eot?#iefix') format('embedded-opentype'), /* IE6-IE8's guilty pleasure */
       url('path-to-your-font.woff2') format('woff2'), /* For the cool kids (aka super modern browsers) */
       url('path-to-your-font.woff') format('woff'), /* For the pretty cool kids (aka pretty modern browsers) */
       url('path-to-your-font.ttf') format('truetype'), /* Safari, Android, iOS's best friend */
       url('path-to-your-font.svg#svgFontName') format('svg'); /* Legacy iOS's old-school buddy */
}

Spread the love by sharing multiple src values, giving browsers a buffet of choices.

Ensure font-family naming is as consistent as a metronome. Triple-check the URL in src. Use relative or absolute URLs, depending on how your file structure rolls.

Making your fonts behave cross-browser

When you want every browser to display your fonts without throwing tantrums:

Play Detective: Investigate the file and folder structure to ensure browsers can locate the font files.
Test Relentlessly: Use a variety of browsers/devices to view how the fonts render. Details matter: Line height, letter spacing are paramount.
Fallback Fonts: They're your safety net. If a custom font fails to load, you can lean on these. Example: font-family: 'MyCustomFont', 'Arial', sans-serif;.

Always remember to include the format('format') attribute in @font-face to avoid any potential format confusion.

Optimizing font loading and performance

Boost web font loading performance:

Use Font Face Observer or similar to avoid a game of hide and seek during font loading.
If you have multiple font weights or styles, keep file sizes slim by subsetting your fonts.
Use swap or fallback font-display properties in your @font-face to control how the font is displayed during loading.