I’m using @font-face to load a custom font via CSS, and it’s loading fine in chrome on my PC and dolphin browser on my cell device, but on chrome for my Nexus 7 tablet it’s not loading the custom font for all of the tags.
For instance, on the tablet (the only one I’m having issues seeing the font on) it’s displaying the custom font for h1-h5’s, but not on paragraph tagged content.
Why would this be? is this a FOUT issue? I tried editing the .htaccess file on my server to load the font file only once, but that didn’t seem to fix it.
Here’s what i’ve added:
CSS-
@font-face {
font-family: ‘RobotoLight’;
src: url(‘…/fonts/Roboto-Light-webfont.eot’);
src: url(‘…/fonts/Roboto-Light-webfont.eot?#iefix’) format(‘embedded-opentype’),
url(‘…/fonts/Roboto-Light-webfont.woff’) format(‘woff’),
url(‘…/fonts/Roboto-Light-webfont.ttf’) format(‘truetype’),
url(‘…/fonts/Roboto-Light-webfont.svg#RobotoLight’) format(‘svg’);
font-weight: normal;
font-style: normal;
}
body {
font-family: ‘RobotoLight’, sans-serif;
}
h1, h2, h3, h4, h5 {
font-family: ‘RobotoLight’, sans-serif;
}
nav a {
font-family: ‘RobotoLight’, sans-serif;
}
(I understand the multi-declarations are redundant… was trying that to strangle it into submission. Didn’t work.
HTML-
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=“http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=“Content-Type” content=“text/html;charset=utf-8” />
<link href=“css/style.css” media=“all” rel=“stylesheet” type=“text/css” />
