html - CSS - @font-face font not displaying for certain users -


i'm having issue web font on client's website. after hours of researching have come here suggestions.

the font not displaying - in place blank space.

the issue has been reported 2 separate users, using chrome versions 40.0.2214.111 m , 43.0.2357.134 m, unable recreate issue.

i using version 43.0.2357.134 m , not happen me. tested on every version of chrome available through browserstack , unable recreate issue in of those.

a couple more points of interest:

  • i using 2 web fonts in website. both stored locally on web server , called in same way. 1 of them displays (hurme geometric sans 2) other 1 doesn't (hurme geometric sans 2 semibold).

  • everywhere font used in css, multiple fallback fonts specified, yet not render in of fallback fonts - shows blank space.


css:

    @font-face {     font-family: 'hurme geometric sans 2';     src: url('../fonts/hurmegeometricsans_no2_4_regular-webfont.eot');     src: url('../fonts/hurmegeometricsans_no2_4_regular-webfont.eot?#iefix') format('embedded-opentype'),          url('../fonts/hurmegeometricsans_no2_4_regular-webfont.woff2') format('woff2'),          url('../fonts/hurmegeometricsans_no2_4_regular-webfont.woff') format('woff'),          url('../fonts/hurmegeometricsans_no2_4_regular-webfont.ttf') format('truetype'),          url('../fonts/hurmegeometricsans_no2_4_regular-webfont.svg#hurmegeometricsans2_regularrg') format('svg');     font-weight: normal;     font-style: normal; }     @font-face {     font-family: 'hurme geometric sans 2 semibold';     src: url('../fonts/hurmegeometricsans_no2_5_semibold-webfont.eot');     src: url('../fonts/hurmegeometricsans_no2_5_semibold-webfont.eot?#iefix') format('embedded-opentype'),          url('../fonts/hurmegeometricsans_no2_5_semibold-webfont.woff2') format('woff2'),          url('../fonts/hurmegeometricsans_no2_5_semibold-webfont.woff') format('woff'),          url('../fonts/hurmegeometricsans_no2_5_semibold-webfont.ttf') format('truetype'),          url('../fonts/hurmegeometricsans_no2_5_semibold-webfont.svg#hurme_geometric_sans_2sbd') format('svg');     font-weight: normal;     font-style: normal; }  h1 {     font-family:'hurme geometric sans 2 semibold','hurme geometric sans 2', helvetica, arial, sans-serif;     font-size:38px;     line-height:38px;     text-align:center;     text-transform:uppercase;     margin-top:0px;     padding-top:0px;     margin-bottom:0px;     padding-bottom:0px;     font-weight:normal; } 

so, reiterate major points:

  • the font "hurme geometric sans 2 semibold" displays on 99.99% of browsers, doesn't display @ in cases (blank space shown).
  • the fallback fonts specified not utilised.
  • i have been unable recreate issue have seen screenshots of users.
  • the other font used on site, "hurme geometric sans 2" not have problem. in cases "hurme geometric sans 2 semibold" doesn't display, "hurme geometric sans 2" still does.


Comments