Can't get a custom Font working - css

Question

I'd need some help with custom fonts. For some reason I can't get them to work, I'm using a .css and I'm pretty sure I'm doing all as required. Here's my head link with .css :
<link rel=stylesheet type= "text/css" href= "main.css">
and my .css :
html, body {
padding-top: 2em;
text-align: left;
width: 50%;
margin: 0 auto;
}
#font-face {
font-family: 'Dudu_Calligraphy';
src: url(fonts/Dudu_Calligraphy.tff);
font-style: normal;
font-weight: 100;
}
p {
font-family: Dudu_Calligraphy
font-weight= 100;
}
both .html, .css, and the font are in one folder and i just can't apply them on the paragraphs

Answer 1

First, you misspelled a little, it should be font-weight: 100;, not font-weight= 100;.
You need multiformat fonts to use them in the web, because some browsers supports one type, some supports the another one.
Needed formats: TrueType, WOFF, EOT Compressed, SVG.
And your #font-face should look like this:
#font-face {
font-family: 'FONTNAME';
src: url('path/to/font/font.eot');
src: url('path/to/font/font.eot?#iefix') format('embedded-opentype'),
src: url('path/to/font/font.ttf') format('truetype'),
src: url('path/to/font/font.woff') format('woff'),
src: url('path/to/font/font.svg#FONTNAME') format('svg');
}
To generate different types of font, you can for example use this font generator: https://www.fontsquirrel.com/tools/webfont-generator
And if your fonts will not be rendered properly on all platforms, you can try this CSS rules:
* {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}