Pieter Pieter - 2 months ago 13
CSS Question

@font-face sometimes works sometimes and not other times?

I am having an issue with @font-face rule in my css.
In some stylesheets it works perfectly in others it doesn't work at all...

As you can see in the snippet I use an external file for my font but in this particular case it is not working...

Any thoughts anyone?

Endless gratitude will be your share :)



@charset "utf-8"

@font-face {
font-family: sinhala;
src: url(fonts/Sinhala.ttc);
}

#wrapperportfolio4 {
width: 45%;
float:left;
position:relative;
margin-left: 5%;
margin-top: -42.5%;
box-shadow: 3px 5px 4px 0px black;
height: 20vw;


}

#wrapper4trans {
width: 45%;
float:left;
position:relative;
margin-left: 5%;
margin-top: -42.5%;
background-color: black;
opacity: 0.5;
height: 20vw;
}

#box1title {
width: 65%;
font-family: sinhala;
font-size: 1.0vw;
color: white;
margin-top: 2%;
text-align: center;
}



#box1img {
width: 60%;
position:relative;
float:left;
margin-left: 2.5%;
margin-top: 1.5%;

}

#box1txt{
width: 25%;
position:relative;
float:left;
font-family: sinhala;
font-size: 1.0vw;
color: white;
margin-left: 5%;
margin-top: 5%;
text-shadow: 0px 2px 4px rgba(0,0,0,0.50);

}

#box1txt2{
width: 25%;
position:relative;
float:left;
font-family: sinhala;
font-size: 1.0vw;
color: white;
margin-left: 5%;
margin-top: 5%;
text-shadow: 0px 2px 4px rgba(0,0,0,0.50);
}

#box1link {
width: 25%;
position:relative;
float:left;
font-family: sinhala;
font-size: 1.0vw;
color: white;
margin-left: 5%;
margin-top: 5%;
text-shadow: 0px 2px 4px rgba(0,0,0,0.50);
cursor: pointer;
}

<div id="wrapperportfolio4">

<p id="box1title">www.pieterswebdesign.com</p>



<img id="box1img" src="images/box1img.png" />

<p id="box1txt">Pieter's Web Design is een beginnende webdesigner gevestigd in Gent.</p>

<p id="box1txt2">Voor betaalbare professionele websites is dit de ideale oplossing.</p>

<a id="box1link" href="https://www.pieterswebdesign.com">www.pieterswebdesign.com</a>
</div>




Answer

for browsers compatibility you have to use this rule.

/* Fonts */
@font-face {
    font-family: 'sinhala';
    src: url("./fonts/sinhala.eot");
    src: url("./fonts/sinhala.eot?#iefix") format('embedded-opentype'),
         url("./fonts/sinhala.woff") format('woff'),
         url("./fonts/sinhala.ttf") format('truetype'),
         url("./fonts/sinhala.svg#montezregular") format('svg');
    font-weight: normal;
    font-style: normal;
}

You have to get three formats (woff, eot, ttf) of the FONT. See the https://www.fontsquirrel.com/tools/webfont-generator On this page you can converit the font to correcto format.

Succes!