0

I've downloaded the kit of a font called Pompiere from fontsquirrel and uploaded the files. The fonts show perfectly on Safari and Chrome, but on Firefox it won't show.

I have 4 unique fonts total that I use, does anyone know a possible reason as to why it's not showing up?

Here is a part of my css:

@font-face {
font-family: 'Pompiere';
src: url('fonts/pompiere/PompiereRegular.eot'); /* IE9 Compat Modes */
src: url('fonts/pompiere/PompiereRegular.eot?#iefix') format('embedded-opentype');
src: url('fonts/pompiere/PompiereRegular.woff') format('woff'), /* Modern Browsers */
     url('fonts/pompiere/PompiereRegular.ttf')  format('truetype'), /* Safari, Android, iOS */
     url('fonts/pompiere/PompiereRegular.svg') format('svg');
}

#normal-font {
font-size: 23px;
font-family: 'Pompiere', Helvetica, sans-serif; }
user2184437
  • 11
  • 7
  • Are the fonts served from a different domain than your page? Also see http://stackoverflow.com/questions/2856502/css-font-face-not-working-with-firefox-but-working-with-chrome-and-ie – bendytree May 28 '13 at 20:56

2 Answers2

0

Thanks guys, to anyone having the same issue, I got it working by:

  1. Moving my 'fonts' folder to the root. (Before, it was inside my wordpress theme folder)
  2. Directly linking my src url in the css. For example, 'http://yoursite.com/fonts/fontname.ttf' instead of '../fonts/fontname.ttf'

By doing those two things all of my fonts show up correctly on Safari, Chrome & Firefox. :)

user2184437
  • 11
  • 7
0

I had a similar problem and fixed it by removing the .eot url

FredTheLover
  • 1,009
  • 10
  • 19