issue with @font-face on mozilla while using Shopify


I am using the css

@font-face { font-family: ChangaOne-Regular; src: url({{ 'changaone-regular.eot' | asset_url }}); src: url({{ 'changaone-regular.eot?#iefix' | asset_url }}) format('embedded-opentype'), url({{ 'changaone-regular.woff' | asset_url }}) format('woff'), url({{ 'changaone-regular.ttf' | asset_url }}) format('truetype'), url({{'changaone-regular.svg#changaone-regular' | asset_url }}) format('svg'); font-weight: normal; font-style: normal; }

I have saved the font in images folder. Since it was not taking the font I created the copy of the font in the folder within my css file.

Now it is working perfectly on chrome. But in mozilla the font is not getting read. I found that we can fix this by adding htaccess to the folder of the css file with content

<FilesMatch "\.(ttf|otf|eot|woff|font.css)$"> <IfModule mod_headers.c> Header set Access-Control-Allow-Origin "*" </IfModule> </FilesMatch>

This is also not making any difference in firefox. So how can we fix this? any idea?


Try using an absolute URL to the font file.


  • My website has font that is not supported/recognized in Firefox
  • external font does not work in Foundation.Zurb CSS
  • @font-face not working even after trying everything I could think of
  • A watermark inside a rectangle which filled the certain color
  • font-family crash with @font-face src
  • Load fonts from node_modules in react-rails application with webpack
  • @font-face issues in IE
  • Cyrillic characters trouble using @font-face
  • What fonts do browsers download when using @font-face
  • 'nodejs web.js' works, 'foreman start' doesn't
  • font-face not showing up on Firefox
  • IE9 Refusing to Load custom font?
  • Change Font Style (bold, Italic, bold italic) in C# [duplicate]
  • Embedding an OpenXML document within another OpenXml document
  • What's the logic in HKObserverQuery background delivery?
  • How can i use same custom fonts for both android and ios using react native
  • WP7 - read from CSV file? Or what to do with the data?
  • Font Awesome in Viewpager Previous Next
  • Creating interactive SVG maps for a web portal
  • Delphi Chromium Embedded - Clear browser cache
  • Why does PHP appear to evaluate this condition incorrectly?
  • addressing in assembler
  • d3.js selection conditional rendering
  • How to discover Font Type?
  • How to rotate the dial in a gauge chart? Using python plotly
  • How to access culture data in globalize.js V1.0.0
  • Not able to aggregate on nested fields in elasticsearch
  • how to display data from 1st point on words on y axis for line chart in d3.js
  • HTTP/2 streams vs HTTP/1.1 connections
  • Syntax for setting draggablecursor property in google maps api
  • Paperclip, set path outside of rails root folder
  • Incrementing object id automatically JS constructor (static method and variable)
  • Font Awesome Showing Box instead of Icons
  • GridView Sorting works once only
  • How to get icons for entities from eclipse?
  • Proper folder structure for lots of source files
  • Load html files in TinyMce
  • Free memory of cv::Mat loaded using FileStorage API
  • unknown Exception android
  • Append folder name and increment by 1 using batch script