X
Tap here to go to the mobile version of the site.

Fóram Tacaíochta

Cuireadh an snáithe seo sa chartlann. Cuir ceist nua má tá cabhair uait.

@font-face cannot work in the Firefox but work on other browsers.

Postáilte

I have made a website and it is using some custom font that requires @font-face for styling. I have used Internet Explorer, Firefox and Chrome to check if the CSS script is functioning and I have found that it is functioning well, except Firefox.

I have tried to find any resources or issues about it but it seems difficult. Is there any web programmers who know about this issue?

The following is the code:

@font-face { font-family: Yesteryear; src: url("font/Yesteryear-Regular.woff"); }

I have made a website and it is using some custom font that requires @font-face for styling. I have used Internet Explorer, Firefox and Chrome to check if the CSS script is functioning and I have found that it is functioning well, except Firefox. I have tried to find any resources or issues about it but it seems difficult. Is there any web programmers who know about this issue? The following is the code: @font-face { font-family: Yesteryear; src: url("font/Yesteryear-Regular.woff"); }

Réiteach roghnaithe

To all people who have helped me in this topic, thanks so much. I have found what is the problem is... Actually the Firefox does not support the EOT file type and make the whole @font-face destructed. I have removed it and only putting WOFF file in the CSS and it works now.

Thanks so much.

Read this answer in context 2

Tuilleadh mionsonraí faoin chóras

Breiseáin Shuiteáilte

  • Google Update
  • Next Generation Java Plug-in 10.45.2 for Mozilla browsers
  • NPRuntime Script Plug-in Library for Java(TM) Deploy
  • NVIDIA 3D Vision plugin for Mozilla browsers
  • NVIDIA 3D Vision Streaming plugin for Mozilla browsers
  • The plug-in allows you to open and edit files using Microsoft Office applications
  • Office Authorization plug-in for NPAPI browsers
  • Shockwave Flash 10.0 r2
  • Adobe PDF Plug-In For Firefox and Netscape

Feidhmchlár

  • Firefox 27.0.1
  • User Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:27.0) Gecko/20100101 Firefox/27.0
  • URL Tacaíochta: https://support.mozilla.org/1/firefox/27.0.1/WINNT/zh-TW/

Eisínteachtaí

  • Troubleshooter 1.1a (troubleshooter@mozilla.org)

JavaScript

  • incrementalGCEnabled: True

Grafaic

  • adapterDescription: NVIDIA GeForce GT 240
  • adapterDescription2:
  • adapterDeviceID: 0x0ca3
  • adapterDeviceID2:
  • adapterDrivers: nvd3dumx,nvwgf2umx,nvwgf2umx nvd3dum,nvwgf2um,nvwgf2um
  • adapterDrivers2:
  • adapterRAM: 1024
  • adapterRAM2:
  • adapterVendorID: 0x10de
  • adapterVendorID2:
  • direct2DEnabled: True
  • directWriteEnabled: True
  • directWriteVersion: 6.2.9200.16571
  • driverDate: 1-18-2013
  • driverDate2:
  • driverVersion: 9.18.13.1106
  • driverVersion2:
  • info: {u'AzureCanvasBackend': u'direct2d', u'AzureFallbackCanvasBackend': u'cairo', u'AzureContentBackend': u'direct2d', u'AzureSkiaAccelerated': 0}
  • isGPU2Active: False
  • numAcceleratedWindows: 1
  • numTotalWindows: 1
  • webglRenderer: Google Inc. -- ANGLE (NVIDIA GeForce GT 240 Direct3D9Ex vs_3_0 ps_3_0)
  • windowLayerManagerRemote: False
  • windowLayerManagerType: Direct3D 10

Sainroghanna Athraithe

  • accessibility.typeaheadfind.flashBar: 0
  • browser.cache.disk.capacity: 1048576
  • browser.cache.disk.smart_size.first_run: False
  • browser.cache.disk.smart_size_cached_value: 665600
  • browser.places.smartBookmarksVersion: 4
  • browser.sessionstore.upgradeBackup.latestBuildID: 20140212131424
  • browser.startup.homepage_override.buildID: 20140212131424
  • browser.startup.homepage_override.mstone: 27.0.1
  • dom.mozApps.used: True
  • extensions.lastAppVersion: 27.0.1
  • font.internaluseonly.changed: True
  • gfx.direct3d.last_used_feature_level_idx: 0
  • gfx.direct3d.prefer_10_1: True
  • network.cookie.prefsMigrated: True
  • places.database.lastMaintenance: 1393223311
  • places.history.expiration.transient_current_max_pages: 104858
  • plugin.disable_full_page_plugin_for_types: application/pdf
  • plugin.importedState: True
  • privacy.sanitize.migrateFx3Prefs: True
  • storage.vacuum.last.index: 0
  • storage.vacuum.last.places.sqlite: 1392618526

Éagsúil

  • User JS: No
  • Inrochtaineacht: Níl
Diego Victor 658 réiteach 4175 freagra

Hello,

This code are in a external file or inner the html page?

Try use simple ' instead a double " . Also try put the font file in same directory of the page.

The sintax of the call is correct, maybe another part of the code is wrong, missing some ;,etc...

Hello, This code are in a external file or inner the html page? Try use simple ''' ' ''' instead a double ''' " '''. Also try put the font file in same directory of the page. The sintax of the call is correct, maybe another part of the code is wrong, missing some ''';''',etc...
cor-el
  • Top 10 Contributor
  • Moderator
17573 réiteach 158945 freagra

Do you see any errors about downloading this font in the Browser Console (Firefox/Tools > Web Developer)?

Do you see any errors about downloading this font in the Browser Console (Firefox/Tools > Web Developer)? *https://developer.mozilla.org/Browser_Console * https://developer.mozilla.org/en/CSS/@font-face

Úinéir na ceiste

Diego: It is an external CSS file and I have tried to put the font in the same directory but it is still not working. Also I have used the W3C CSS validator to check but nothing found.

cor-el: I have checked the web console and have just found an error for applying EOT file, which is used on IE. In fact, I have applied WOFF, TTF and EOT files.

For the error got: downloadable font: invalid version tag (font-family: "Yesteryear" style:normal weight:normal stretch:normal src index:0) source: http://littpi.net/font/Yesteryear-Regular.eot style.css

downloadable font: rejected by sanitizer (font-family: "Yesteryear" style:normal weight:normal stretch:normal src index:0) source: http://littpi.net/font/Yesteryear-Regular.eot

Diego: It is an external CSS file and I have tried to put the font in the same directory but it is still not working. Also I have used the W3C CSS validator to check but nothing found. cor-el: I have checked the web console and have just found an error for applying EOT file, which is used on IE. In fact, I have applied WOFF, TTF and EOT files. For the error got: downloadable font: invalid version tag (font-family: "Yesteryear" style:normal weight:normal stretch:normal src index:0) source: http://littpi.net/font/Yesteryear-Regular.eot style.css downloadable font: rejected by sanitizer (font-family: "Yesteryear" style:normal weight:normal stretch:normal src index:0) source: http://littpi.net/font/Yesteryear-Regular.eot
cor-el
  • Top 10 Contributor
  • Moderator
17573 réiteach 158945 freagra
You can try to check the font. *http://www.fontsquirrel.com/tools/webfont-generator

Réiteach Roghnaithe

To all people who have helped me in this topic, thanks so much. I have found what is the problem is... Actually the Firefox does not support the EOT file type and make the whole @font-face destructed. I have removed it and only putting WOFF file in the CSS and it works now.

Thanks so much.

To all people who have helped me in this topic, thanks so much. I have found what is the problem is... Actually the Firefox does not support the EOT file type and make the whole @font-face destructed. I have removed it and only putting WOFF file in the CSS and it works now. Thanks so much.