Issue
Sorry if it's incorrect practice to post multiple problems, but:
I have a working @font-face set up, but when I set the font-weight inside @font-face, Firefox displays my default font instead of the one I defined in @font-face. Chromium doesn't even seem to work with @font-face in the first place... And, I think due to me not being able to set the font-weight, the font (Lato Black) is way too bold.
Here is my HTML:
<!DOCTYPE HTML>
<html>
<head>
<meta charset = "utf-8">
<title>Marco Scannadinari</title>
<link href = "layout.css" type = "text/css" rel = "stylesheet">
</head>
<body>
<div class = "centre">
<div class = "lato-black">
<h1>Marco Scannadinari</h1>
</div>
<div class = "cantarell">
<p>Lorem ipsum dolor sit amet.</p>
</div>
</div>
</body>
</html>
... And my CSS:
body {
background: #cdcdcd;
margin-top: 32px;
margin-left: 512px;
margin-right: 512px;
}
div.centre {
text-align: center;
}
@font-face {
font-family: "lato-black";
src: url("fonts/Lato-Bla.ttf")
format("truetype")
}
@font-face {
font-family: "cantarell";
src: local("fonts/Cantarell-Regular.otf")
format("opentype")
}
div.cantarell {
font-family: "cantarell";
}
div.lato-black {
font-family: "lato-black";
text-shadow: 0px 1px #ffffff;
}
Solution
You have to use different formats of fonts for different browsers. In the end you should have something like this:
@font-face {
font-family: 'MyFontFamily';
src: url('myfont-webfont.eot?#iefix') format('embedded-opentype'),
url('myfont-webfont.woff') format('woff'),
url('myfont-webfont.ttf') format('truetype'),
url('myfont-webfont.svg#svgFontName') format('svg');
}
Answered By - AnilkaBobo
Posts
0 Comments:
Post a Comment
Note: Only a member of this blog may post a comment.