#font-face sometimes works sometimes and not other times? - html

Question

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 1

Chances are it's the font, as you really need to create a webfont kit and use various font file types:
For example:
#font-face {
font-family: 'FontName';
src: url('fontname-webfont.eot');
src: url('fontname-webfont.eot?#iefix') format('embedded-opentype'),
url('fontname-webfont.woff2') format('woff2'),
url('fontname-webfont.woff') format('woff'),
url('fontname-webfont.ttf') format('truetype'),
url('fontname-webfont.svg') format('svg');
}
You should use a webfont generator like:
https://www.fontsquirrel.com/tools/webfont-generator
(obviously you need to have a licence to use some fonts as webfonts so best to check this before converting any.)

Answer 2

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!