I can't get @font-face working in any browser on macs. I believe this is the relevant code but I will be happy to paste other pieces. Do macs handle this differently?
@font-face {
font-family: BebasNeue;
src: url('fonts/BebasNeue.otf');
}
/*----HEADING----*/
.heading {
font-family: BebasNeue, sans-serif;
}
.word1{
font-size: 100px;
position: absolute;
top: 35px;
}
.word2{
font-size: 79px;
color: 6a6964;
position: absolute;
top: 54px;
left: 165px;
}
.word3{
font-size: 106px;
position: absolute;
top: 104px;
}
.tagline {
font-family: BebasNeue, sans-serif;
font-size: 35px;
color: c1bcb6;
position: absolute;
top: 205px;
left: 13px;
}
.tagWord2{
color: 6a6964;
}
.copyright {
font-family: arial, sans-serif;
color: 6a6964;
font-size: 13px;
font-variant: small-caps;
position: absolute;
top: 245px;
left: 215px;
}
PS I had shoulder surgery recently, so I appreciate you patience while i tap at the keyboard with 1 hand. Thanks!
***So I figured out my error, there was a mistake in the font location and my local machine has the font loaded already. I don' have enough reputation to answer or delete my own question, so first person to post that as an answer I will mark correct.
Where did you get the BebasNeue.otf font file from? Could it be that it is not really an otf font?
To make font-face completely cross browser compatible, you need to provide a few more font sources in different formats. Here is a good starting point: http://www.fontspring.com/blog/the-new-bulletproof-font-face-syntax