Compass Font-Face Outputs Wrong Path to Font File

Compass font-face outputs wrong path to font file

Set http_fonts_path or :relative assets, true. :)

Compass font-face mixin bold

acarabott, I've made a commit to compass for this some time ago, and it seems to ship with 0.12.alpha.

Notice the $weight and $style parameters here:
http://beta.compass-style.org/reference/compass/css3/font_face/

Webpack 2 CSS with wrong path to font and images

Just in case someone stumbles on it....
I had to change the

publicPath: "" 

of my cssloader to

publicPath: '/assets/dist'

Webpack fonts looking in the wrong directory at build

Right.. So I don't know what was wrong - but this solved my issues (and it's ugly AF but it works)

The browser after compilation was looking for my fonts in ./dist/static/css/static/fonts/some_name.ttf etc. I of course wanted it to be ./dist/static/fonts/some_name.ttf. I changed and moved my old config from webpack.common.js that looked like this:

{
   test: /\.(ttf|eot|woff2?|otf)$/,
   use: {
       loader: 'url-loader',
       options: {
           name: 'static/fonts/[name].[hash].[ext]',
           limit: 10000
        }
    }
},

And moved this into my webpack.dev.js file. Because my dev env worked perfectly. Then in my webpack.prod.js I copied the setup and added an outputPath and a publicPath to my url-loader and this now looks as follows:

{
    test: /\.(ttf|eot|woff2?|otf)$/,
    use: {
         loader: 'url-loader',
         options: {
             name: '[name].[hash].[ext]',
             outputPath: 'static/fonts',
             publicPath: './../fonts',
             limit: 10000
         }
     }
 },

so I tell the build to put my files into the ./dist/static/fonts directory and the publicPath is set to be one folder up from where it's currently looking then go into fronts

font-face directory

You need to do it like this, depending on your server setup. Also, never used font-files before, or compass. I use src but I'm guessing its your server path. I.e. It thinks your font is elsewhere.

@include font-face("Museo300", src("../font/Museo300-Regular.otf"));

or

@font-face {
   font-family: 'Museo300';
   src: url('../font/Museo-Regular.otf');
   font-weight: normal;
   font-style: normal;
}

Compass SCSS font-url configuration issue

Bringing src: url("../fonts/cabin-regular?#iefix"); before the main src make working fine

@font-face {
  font-family: 'cabinregular';
  src: url("../fonts/cabin-regular?#iefix");
  src: url("../fonts/cabin-regular?#iefix") format("embedded-opentype"), url("../fonts/cabin-regular") format("woff"), url("../fonts/cabin-regular") format("truetype"), url("../fonts/cabin-regular.svg#cabin-regular") format("svg");
  font-weight: normal;
  font-style: normal;
}

@font-face EOT not loading over HTTPS

I know this is an old thread but I just had to weigh in. We had the same issue with EOT and WOFF fonts in all versions of Internet Explorer (7-11) not loading over HTTPS. After hours of trial and error and comparing our headers with other working sites we found it was the vary header that was messing things up. Unsetting that header for those file types fixed our issue right away.

<FilesMatch "\.(woff)$">
    Header unset Vary
</FilesMatch>

<FilesMatch "\.(eot)$">
    Header unset Vary
</FilesMatch>

Bonus Reading

• Eric Lawrence: Vary with Care (archive)
• IE Blog: Caching Improvements in Internet Explorer 9 (archive)

config.rb for SASS fonts directory path adding slash

You can set relative_assets = true right after path setting in config file.

Here is a sample config example to work on relative assets.

# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "app/css"
sass_dir = "app/css/sass"
images_dir = "app/img"
javascripts_dir = "app/js"
fonts_dir = "app/css/fonts"

output_style = :nested
environment = :development

relative_assets = true

---

Related Topics