Font Face Generator
Generate @font-face declarations for custom fonts
Font Properties
Configure font face settings
Font Files
Add font file URLs and formats
Font Preview
Preview your custom font
The quick brown fox jumps over the lazy dog.
Note: Preview will only work if font URLs are accessible
Generated Font Face Code
@font-face {
font-family: 'MyCustomFont';
src: url("font.woff2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
}
/* Usage */
.custom-font {
font-family: 'MyCustomFont', sans-serif;
}