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:

  1. the browser/system cannot read of provided font files provided.
  2. 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

Popular posts from this blog

javascript - jQuery: Add class depending on URL in the best way -

caching - How to check if a url path exists in the service worker cache -

Redirect to a HTTPS version using .htaccess -