Custom font css import not working on different browsers - css

Question

My custom font doesn't work on different browsers. I imported 3 font weights using #font-face, all of them .tiff. But when I imported other variations (.eot, .woff, .woff2, .svg) all the text goes bold.
#font-face {
font-family: 'Bicyclette';
src: url('fonts/Bicyclette-Light.ttf') format('truetype');
font-weight: lighter;
}
#font-face {
font-family: 'Bicyclette';
src: url('fonts/Bicyclette-Regular.ttf') format('truetype');
font-weight: normal;
}
#font-face {
font-family: 'Bicyclette';
src: url('fonts/Bicyclette-Bold.ttf') format('truetype');
font-weight: bolder;
}
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
font-family: 'Bicyclette', Helvetica, sans-serif;
}
I also added Helvetica as a secondary font, but most browsers display it as Arial.
My website is deployed at novarion.ro.
My questions are: how can I make my custom font work on most browsers? And if that doesn't work, is there a way to keep it always Helvetica as the second option?

Answer 1

Using numeric font-weight seems to be more robust.
You might also add a font-style value if there are any italic styles in your html/css:
#font-face {
font-family: 'Bicyclette';
src: url('fonts/Bicyclette-Light.ttf') format('truetype');
font-style: normal;
font-weight: 300;
}
#font-face {
font-family: 'Bicyclette';
src: url('fonts/Bicyclette-Regular.ttf') format('truetype');
font-style: normal;
font-weight: 400;
}
#font-face {
font-family: 'Bicyclette';
src: url('fonts/Bicyclette-Italic.ttf') format('truetype');
font-style: italic;
font-weight: 400;
}
#font-face {
font-family: 'Bicyclette';
src: url('fonts/Bicyclette-Bold.ttf') format('truetype');
font-style: normal;
font-weight: 700;
}
body{
font-family: 'Bicyclette', Helvetica, sans-serif;
}
h1{
font-weight:700;
}
.light{
font-weight:300;
}
Besides, make sure all font-files are properly loaded (check your dev tool's console for 404s).
Helvetica Fallback
Provided, there is some Helvetica installed on a system - font-family names can be quite different.
You could add alternative font-family names as described by Chris Coyier: Better Helvetica
to make the browser search for several font names.
body {
font-family: Bicyclette, "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;
}
However, this approach merely improves your chances of seeing a proper Helvetica, if one is available.