CODEWITHSUNDEEP
htmlcssfontsfont-face
user3480644
user3480644

Reputation: 577

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

Upvotes: 0

Views: 104

Answers (2)

Deimoks
Deimoks

Reputation: 728

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

Upvotes: 1

slieu
slieu

Reputation: 31

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 .

Upvotes: 1

Related Questions