Font Configuration
Font File URLs

Enter the URLs to your font files. WOFF2 is recommended for best compression. Leave empty to skip a format.

WOFF2 Best
WOFF
TTF
OTF
Advanced Options
Name as installed on user's system
Prepended to all file paths
Generated CSS
@font-face { font-family: 'MyCustomFont'; font-weight: 400; font-style: normal; font-display: swap; src: url('/fonts/myfont.woff2') format('woff2'); }
Usage Example
.my-element { font-family: 'MyCustomFont', sans-serif; font-weight: 400; font-style: normal; }

Generate @font-face CSS rules for embedding custom fonts on your website. Supports multiple font formats for cross-browser compatibility.

How to Use

  • Font Family: Enter the name you'll use in CSS font-family
  • Weight & Style: Match your font file's weight and style
  • Font Files: Add URLs to your font files (WOFF2 recommended)
  • Font Display: Choose how fonts load (swap is recommended)
  • Copy: Copy the generated CSS to use in your stylesheet
/* Basic @font-face rule */
@font-face {
  font-family: 'CustomFont';
  src: url('font.woff2') format('woff2'),
       url('font.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* With local fallback */
@font-face {
  font-family: 'CustomFont';
  src: local('Custom Font'),
       url('font.woff2') format('woff2');
}

/* With unicode-range for Latin subset */
@font-face {
  font-family: 'CustomFont';
  src: url('font.woff2') format('woff2');
  unicode-range: U+0000-00FF;
}