All geek questions in one place

Problem with @ font-face and .ttf files

I am trying to use the @ font-face font to implement the font that I downloaded online ( http://www.losttype.com/font/?name=blanch ) and I am having problems getting it to work in any browser. Here is an example of the code that I use to check 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 css file:

 @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 a .ttf file. Can someone explain why this is not working?

+4
source share
2 answers

In the url('BLANCH_CONDENSED.ttf') "construct, smart single quotes must be replaced by Ascii quotes (single or double), e.g. url('BLANCH_CONDENSED.ttf') .

You should also use the FontSquirrel webfont generator or some similar tool to create different font formats for all browsers.

+3
source

In this .rar you posted, there are only .otf files, there is a .ttf in your CSS file. Could this be a problem?

0
source

Source: https://habr.com/ru/post/1482633/

More articles:


All Articles