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

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.)