{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 beautiful° 的问题《Trouble with @font-face and .ttf file》','https://www.manongdao.com/q-649792.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
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?
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.
That .rar that you posted only has .otf files in it, in your CSS file you have a .ttf. Could that be the problem?