I can't connect my font via @font-face
Hello everyone, I can't connect my font, I check in two browsers and not in one does not work. I threw the Font in the root folder. The code below is:
@font-face {
font-family: MyCustomFont;
src: url(OpenSans-Light.ttf) /* TTF file for CSS3 browsers */
}
body,html {
margin-top:0px;
margin-left:0px;
margin-right::0px;
margin-bottom:0px;
width: 100%;
height: 100%;
vertical-align:top;
vertical-align:top;
font-size:12px;
font-family:"MyCustomFont";
color:#ffffff;
background-image:url(../img/bg.jpg);
background-repeat:repeat-y;
background-color:#c5c5c5;
background-position:50% 0;
}
What could be the problem? Thank you in advance!
8 answers
Try using online font generators to generate fonts in different formats for different browsers.:
1) http://www.fontsquirrel.com/tools/webfont-generator
2) http://www.web-font-generator.com/
Upload your font, in response you will be given to download an archive with various formats and a CSS file with the necessary code. Copy the downloaded scripts to your site and paste the CSS. Try both generators, I don't know why, but they probably work differently. If you use the first service, select " EXPERT..." and add the SVG format, if I'm not mistaken, it is needed for Firefox. Do not forget to check the correctness of the paths to the fonts.
It didn't work when the font was in a separate folder (the path is specified correctly). I moved it to CSS - it worked! On habrahabr.ru I read it: "fonts with the correct paths in CSS will not be connected, but when the CSS file itself is connected in HTML up the folder tree... The reason for this is the browser's security policy... Local documents have access to other local documents in the same directory and in subdirectories, but not in the upper sections. (Default)... "
Try using quotation marks
font-family:'MyCustomFont';
src: url('OpenSans-Light.ttf');
Take web font, woff, not ttf. Then everything will fall into place ;)
Also, I advise you to work with Google Fonts. This is much easier and easier:
<link href='http://fonts.googleapis.com/css?family=Dosis:600' rel='stylesheet' type='text/css'>
The example is taken from the Dosis class. Choose your own and that's it. Why do you need extra lines?
He steamed with this problem. It was:
@font-face {
font-family: 'Open Sans', sans-serif;
src: local("Open Sans"),
url("../fonts/OpenSans-Light.ttf");
font-weight: 300;
}
Removed the second font sans-serif, changed the quotation marks to apostrophes. Become:
@font-face {
font-family: 'Open Sans';
src: local('Open Sans'),
url('../fonts/OpenSans-Light.ttf');
font-weight: 300;
}
So I earned it.
It was before that and didn't work:
@font-face {
font-family: Proxima;
font-weight: normal;
src: url(./fonts/proxima-normal.otf);
}
Added apostrophes to font-family:
@font-face {
font-family: 'Proxima';
font-weight: normal;
src: url(./fonts/proxima-normal.otf);
}
And in the selector already without apostrophes:
.greeting {
color: white;
font-family: Proxima;
font-size: 50px;
text-align: center;
margin-top: 100px;
}
And everything worked!
And if you specify the path from the root directory, where to put the typefaces of these fonts locally? That's how I decided on them:
@font-face {
font-family: 'franklingothic-book';
src: url('/franklingothic-book-webfont.woff2') format('woff2'), url('/franklingothic-book-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;}
* {
font-family: franklingothic-book;}
Missing semicolon after src: url(OpenSans-Light.ttf)