I recently started learning HTML/CSS and am starting to get really frustrated with font and cross-browser compatibility. I am using a custom font (Klavika) with my personal site and have uploaded it to the server, but I can’t figure out how to make it compatible across browsers. The site is here: http://www.tommaxwell.me and as you may be able to see, the font it’s displaying is really ugly. Can someone look at my code and put me in the right direction?
CSS:
body {
background-image: url(209241_2453996366505_1946848896_o.jpg);
background-size:cover;
}
@font-face {
font-family: klavika-medium;
src: url(Klavika-Medium.otf);
}
h1 {
text-align: center;
margin-top: 10%;
font-family: klavika-medium;
color:#FFFFFF;
font-size: 6.250em;
}
p {
position: relative;
top:-8%;
text-align: center;
font-family: klavika-regular;
color:#FFFFFF;
font-size: 1.875em;
}
ul {
position: relative;
text-align: center;
list-style-type: none;
margin-top: 5%;
left:36.5%;
font-family: klavika-medium;
}
ul li {
font-size: 40px;
}
ul li a {
text-decoration: none;
color: #FFFFFF;
opacity: 0.8;
float:left;
padding-right:3%;
}
ul li a:hover {
opacity: 1.0;
}
You need different formats of your font for different browsers. You can try http://www.fontsquirrel.com/fontface/generator
In that site they will convert the font in all the proper formats for you. They will also give you a stylesheet sample so you can copy the css already prepared for use cross browser. The other added bonus is that like images and audio fonts can be compressed. Their tool can also do this to give you a smaller font.
By the way, when declaring the font face you can also declare the font weight associated with that weight. font-weight:100 could be your regular font, and font-weight:600 could be your medium font. This makes it easier to use the font as you will only have to memorize one name, and simply apply the proper weight, whereever you use your font.