Menu
I'm trying to use @font-face to implement a font I downloaded online (http://www.losttype.com/font/?name=blanch) and I'm having issues getting it to work on any browser. Here's the sample code I'm using to test the font.
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div class = "title">
<p>THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG</p>
</div>
</body>
</html>
And the css file is:
@font-face {
font-family: Blanch;
src: url(‘BLANCH_CONDENSED.ttf’);
}
.title {
text-align:center;
font-family: Blanch, 'Helvetica Neue', Arial, Helvetica, sans-serif;
color:white;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
I only have the .ttf file. Can someone explain why this isn't working?
880
TrueType Font (TTF) TTF has long been the most common format for fonts on Mac and Windows operating systems. All major browsers have supported it.
TTF/OTF - TrueType and OpenType font support is Fully Supported on Google Chrome 71. If you use TTF/OTF - TrueType and OpenType font support on your website or web app, you can double-check that by testing your website's URL on Google Chrome 71 with LambdaTest. The features should work fine.
In the construct url(‘BLANCH_CONDENSED.ttf’), the ‘smart’ single quotes must be replaced by Ascii quotes (single or double), e.g. url('BLANCH_CONDENSED.ttf').
You should also use FontSquirrel webfont generator or some similar tool to generate different font formats to cover all browsers.
63
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
