Q:

How to use Custom Fonts using CSS? 

I have searched this on net found many articles and tutorials, I followed some of them but still not getting the desired results. 
I have downloaded the font and place this in the my project folder.  This is the code I am writing but it's not changing the font-style. 
@font-face
{
    font-family: Montereybold;
    src: url(font/Montereybold.ttf);
}

h1
{
    font-size:36px;
    font-family:Montereybold;
}

Kindly guide me what I am doing wrong here. 
Thanks

A:

¿Have you tried quoting the font name?  Also, for better compatibility, upload several font formats. 
@font-face {
    font-family: 'Montereybold';
    src: url('font/Montereybold.eot'); /* IE9 Compat Modes */
    src: url('font/Montereybold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('font/Montereybold.woff') format('woff'), /* Modern Browsers */
    url('font/Montereybold.ttf')  format('truetype'), /* Safari, Android, iOS */
    url('font/Montereybold.svg#Montereybold') format('svg'); /* Legacy iOS */
    font-weight:normal;
    font-style:normal;
}

Using it:
font-family:'Montereybold';

