How to use Custom Fonts using CSS?

Question

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

Go to this url http://css-tricks.com/snippets/css/using-font-face/ — Rohit Azad Malik, Nov 04 '14 at 11:23
Open the console and see if it throws a 404 "couldn't find file" if it does then your path is probably wrong — user2209644, Nov 04 '14 at 11:30
you'll find a several custom fonts here , check it http://www.google.com/fonts — Ahmed Mohsen, Nov 04 '14 at 11:31
possible duplicate of [How to add some non-standard font to a website?](http://stackoverflow.com/questions/107936/how-to-add-some-non-standard-font-to-a-website) — Ulrich Schwarz, Nov 04 '14 at 11:54

score 1 · Answer 1 · answered Nov 04 '14 at 11:29

Maybe the url is wrong. Is there "font" folder in parent folder of your css file ? Otherwise, try "../font/Montereybold.ttf".

Also, ttf is not supported by all browser. Use font-face generator for a best result : http://www.fontsquirrel.com/tools/webfont-generator .

Deimoks · Accepted Answer · 2014-11-04T15:56:16.327

¿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';

How to use Custom Fonts using CSS?

2 Answers2