Locally hosted Google Web Fonts not working

Question

I used to link my fonts directly to Google's API, which worked fine. Now I see that my fonts don't display properly on certain browsers and operating systems. I downloaded the fonts and converted them with fontsquirrel for web usage. After copying the converted files into my site's directory and pasting the @font-face CSS into my style sheet, the fonts don't show up in any browser. Please help.

The CSS is like this:

@font-face {
font-family: 'titillium_webregular';
src: url('titilliumweb-regular-webfont.eot');
src: url('titilliumweb-regular-webfont.eot?#iefix') format('embedded-opentype'),
     url('titilliumweb-regular-webfont.woff') format('woff'),
     url('titilliumweb-regular-webfont.ttf') format('truetype'),
     url('titilliumweb-regular-webfont.svg#titillium_webregular') format('svg');
font-weight: normal;
font-style: normal;

}

@font-face {
font-family: 'ralewaybold';
src: url('raleway-bold-webfont.eot');
src: url('raleway-bold-webfont.eot?#iefix') format('embedded-opentype'),
     url('raleway-bold-webfont.woff') format('woff'),
     url('raleway-bold-webfont.ttf') format('truetype'),
     url('raleway-bold-webfont.svg#ralewaybold') format('svg');
font-weight: normal;
font-style: normal;

}

@font-face {
font-family: 'ralewayregular';
src: url('raleway-regular-webfont.eot');
src: url('raleway-regular-webfont.eot?#iefix') format('embedded-opentype'),
     url('raleway-regular-webfont.woff') format('woff'),
     url('raleway-regular-webfont.ttf') format('truetype'),
     url('raleway-regular-webfont.svg#ralewayregular') format('svg');
font-weight: normal;
font-style: normal;

}

My fonts are in the main site directory, but my stylesheet is a seperate folder within the main directory (I don't know if this matters at all).

Do you have any error in your browser console? I would check the URL for the font source. As you have it right now, means that your CSS and all files are in the same folder. — Teknotica, May 08 '14 at 17:08
@Teknotica I just put the font files into my css folder and it's still not working. — user3361043, May 08 '14 at 17:14
can you paste an example of the CSS that is using the font? Any errors in your console? — Teknotica, May 08 '14 at 17:15
@Teknotica no errors, but I just fixed the issue (see my own answer). — user3361043, May 08 '14 at 17:24

andersevenrud · Accepted Answer · 2014-05-08T17:16:23.860

See what the "Network" tab and "Console" tab says in your Developer Tools (Chrome and Firefox).

Try to load using absolute paths. And you can define the faces a bit differently, something like this:

@font-face {
  font-family: 'titillium';
  src: url('/titilliumweb-regular-webfont.eot');
  src: url('/titilliumweb-regular-webfont.eot?#iefix') format('embedded-opentype'),
       url('/titilliumweb-regular-webfont.woff') format('woff'),
       url('/titilliumweb-regular-webfont.ttf') format('truetype'),
       url('/titilliumweb-regular-webfont.svg#titillium_webregular') format('svg');
  font-weight: normal;
  font-style: normal;

}

@font-face {
  font-family: 'raleway';
  src: url('/raleway-bold-webfont.eot');
  src: url('/raleway-bold-webfont.eot?#iefix') format('embedded-opentype'),
       url('/raleway-bold-webfont.woff') format('woff'),
       url('/raleway-bold-webfont.ttf') format('truetype'),
       url('/raleway-bold-webfont.svg#ralewaybold') format('svg');
  font-weight: bold; /* SEE HERE. SAME NAME, BUT WE JUST CHANGED THE WEIGHT TYPE */
  font-style: normal;
}

@font-face {
  font-family: 'raleway';
  src: url('/raleway-regular-webfont.eot');
  src: url('/raleway-regular-webfont.eot?#iefix') format('embedded-opentype'),
       url('/raleway-regular-webfont.woff') format('woff'),
       url('/raleway-regular-webfont.ttf') format('truetype'),
       url('/raleway-regular-webfont.svg#ralewayregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

And to use them:

.RalewayBoldTest {
  font-family: raleway;
  font-weight : bold;
}
.RalewayRegularTest {
  font-family: raleway;
}
.TitilliumRegularTest {
  font-family: titillium;
}

score 1 · Answer 2 · answered May 08 '14 at 17:13

Looks like a filepath error to me. The url(); should be relative to the stylesheet - so you're going to want to go up some levels, depending where your stylesheet is. To go up a level, merely use 2 dots:

url('../font.woff');
/* will take you up one level from the stylesheet and select the file called 'font.woff'. */

Hope this helps.

score 1 · Answer 3 · answered May 08 '14 at 17:13

1

it matters! you need to go up a folder in the structure:

src: url('../titilliumweb-regular-webfont.eot');

answered May 08 '14 at 17:13

MilkyTech

1,919
2
15
39

score 1 · Answer 4 · answered May 08 '14 at 17:23

1

This was indeed a file path issue. Also I didn't change the names from Google Font defaults (Titillium Web) to converted ones (titillium-webregular). Thanks for all the help.

answered May 08 '14 at 17:23

user3361043

361
3
10
23

Locally hosted Google Web Fonts not working

4 Answers4