CODEWITHSUNDEEP
cssfontsfont-face
khizar ansari
khizar ansari

Reputation: 1556

override default font using @font-face

We want to modify default font in HTML using @font-face

@font-face {
    font-family: Times;
    font-style: normal;
    font-weight: 400;
    src: local('serif');
}

in the above code we want to override Times font to serif, but above code is not working and Times font is getting used all the time instead of serif

Upvotes: 1

Views: 1574

Answers (1)

Christopher Bennett
Christopher Bennett

Reputation: 801

Try this example, it works for me -- https://jsfiddle.net/gbk4rLw3/16/. However, it doesn't seem to work if you try to switch a font with a generic font type such as serif or sans-serif, but any other web-safe font seems to work.

Test code is here as well.

HTML

<div class="test">
TESTING
</div>

CSS

.test{
  font-family: Times;
}

@font-face {
    font-family: Times;
    font-style: normal;
    font-weight: 400;
    src: local("Impact"); /* Try replacing with Arial, Comic Sans MS, etc....*/
    }                          /*Doesn't seem to work with generic font types (serif,                                     sans-serif)*/

If you want a serif font, try using "Courier New".

Upvotes: 2

Related Questions