css - How do I get this custom font to work? -
i'm trying font named 'corleonedue' display on website i'm working on. btw, font used godfather movies.
i downloaded font here: http://www.dafont.com/corleone.font
i converted ttf file woff file here: https://andrewsun.com/projects/woffjs/woffer-woff-font-converter/
and css rule unsuccessfully used:
@font-face { font-family: 'corleonedue'; src: url('fonts/corleonedue.ttf') format('truetype'); src: url('fonts/corleonedue.woff') format('woff'); }
can please me font render/display on website?
edit:
i followed directions 1 of commenters (andrei), , i'm still having no luck. current css rule has been updated to:
@font-face { font-family: corleonedue, sans-serif; src: url('corleonedue-webfont.eot'); src: url('corleonedue-webfont.eot?#iefix') format('embedded-opentype'), url('corleonedue-webfont.woff2') format('woff2'), url('corleonedue-webfont.woff') format('woff'), url('corleonedue-webfont.ttf') format('truetype'), url('corleonedue-webfont.svg#corleone_dueregular') format('svg'); font-weight: normal; font-style: normal; }
the css <h1>
tag (and class) want use font is:
.header-text { font-family: corleonedue; color: white; font-weight:bold; text-align: center; }
add css rule element want displayed font:
font-family: corleonedue, fantasy;
you can replace fantasy
generic font family (if think font best replaced generic family: serif
, sans-serif
, monospace
, cursive
). font substituted default font set generic family in 2 cases:
- the browser/system cannot read of provided font files provided.
- the font file fails load (server fault, etc...). chances page loads , font file doesn't minimal (if on same server) - shouldn't worry this.
however, regarding point 1.
, should keep in mind .ttf
, .woff
formats not enough display font cross-browser. perhaps should try better web font generator, such squirrelfonts. i'm not endorsing it, named it's big. should own research , find 1 suits goal best.
if want know how generic families rendered system (when font file doesn't load), here's sample of each:
div { text-align: center; } h1 { display: inline-block; width: 30%; min-height: 60px; margin: 0 auto; } h1:nth-child(1) { font-family: cursive; } h1:nth-child(2) { font-family: sans-serif; } h1:nth-child(3) { font-family: serif; } h1:nth-child(4) { font-family: monospace; } h1:nth-child(5) { font-family: fantasy; }
<div> <h1>cursive</h1> <h1>sans serif</h1> <h1>serif</h1> <h1>monospace</h1> <h1>fantasy</h1> </div>
Comments
Post a Comment