Bradley Hand ITCBold font is not displaying in mozilla and chrome - html

Question

I am facing a problem of brandley handwritten font ,
its look perfect in safari but there is a problem in both the giant browser so called mozilla and chrome .
Here's the code .
#font-face {
font-family: "BradleyHandITCBold";
src: url(BradleyHandITCBold.ttf);
}
.newfont
{
font-family: 'BradleyHandITCBold';
}

Answer 1

Solutions:
There is only problem in mozilla and chrome because its modern browser and does not supports ttf font , so there is need to convert TTF to WOFF or WOFF2.
I converted it using TTF to WOFF Converter and its worked perfectly .
Here is the solved code .
#font-face {
font-family: 'BradleyHandITCBold';
src: url("css/BradleyHandITCBold.ttf") format('truetype');
src: url("css/BradleyHandITCBold.woff") format('woff');
}
.newfont
{ font-family: 'BradleyHandITCBold' !important;
font-size : 31px;
}
i am posting Here to help out other developer in future .
thanks for your comment #t.niese

Answer 2

also really nice is it to have different font-weights for your fonts:
#font-face {
font-family: "DIN";
src: url("/media/fonts/din-regular-webfont.eot");
src: local('?'), url("/media/fonts/din-regular-webfont.woff") format('woff'), url("/media/fonts/din-regular-webfont.ttf") format('truetype'), url("/media/fonts/din-regular-webfont.svg#webfontfLFgafto") format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: "DIN";
src: url("/media/fonts/din-bold-webfont.eot");
src: local('?'), url("/media/fonts/din-bold-webfont.woff") format('woff'), url("/media/fonts/din-bold-webfont.ttf") format('truetype'), url("/media/fonts/din-bold-webfont.svg#webfontfLFgafto") format('svg');
font-weight: bold;
font-style: normal;
}
and use it like this:
.bold-text {
font-family: 'DIN', sans-serif;
font-weight: bold;
}
.regular-text {
font-family: 'DIN', sans-serif;
}