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

Open the console and see if it throws a 404 "couldn't find file" if it does then your path is probably wrong — user2209644
– user2209644, Commented Nov 4, 2014 at 11:30
you'll find a several custom fonts here , check it google.com/fonts — Ahmed Mohsen
– Ahmed Mohsen, Commented Nov 4, 2014 at 11:31
possible duplicate of How to add some non-standard font to a website? — Ulrich Schwarz
– Ulrich Schwarz, Commented Nov 4, 2014 at 11:54

Deimoks · Accepted Answer · 2014-11-04 15:56:16Z

1

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

edited Nov 4, 2014 at 15:56

answered Nov 4, 2014 at 11:51

Deimoks

7286 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

slieu · Accepted Answer · 2014-11-04 11:29:13Z

1

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 .

answered Nov 4, 2014 at 11:29

slieu

317 bronze badges

Collectives™ on Stack Overflow

How to use Custom Fonts using CSS?

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related