I recently encountered an issue with using a custom font (Universe 55 font) in html5. I downloaded the .ttf file, applied it with the @font-face rule, and tested it on various browsers including IE, Chrome, and mobile browsers. Unfortunately, the font doesn't seem to work as expected even though it's supposed to be supported by browsers according to websites.
Do I need to include other file formats for the font to display properly?
Here is how I implemented the @font-face rule:
@font-face
{
font-family: 'Universe2';
src: url("C:\Users\..\Desktop\Fonts\Univers LT 55 Roman.ttf");
}
.custfont
{
font-family: 'Universe2';
font-size:25px;
}
<body><div class='custfont'>This is a customized font</div></body>