Search code examples
sassphalcongoogle-font-api

How to load fonts in PhalconPHP with CSS in a bower package?

I'm trying to load the Roboto google font in a PhalconPHP application. I've installed roboto-fontface using bower and I'm trying to load it's fonts locally using @font-face in my _fonts.scss file.

This is my font loading "code":

$roboto-font-path: '../../bower_components/roboto-fontface/fonts/roboto/';

@font-face {
  font-family: "Roboto";
  src: //local(Roboto Thin),
  url("#{$roboto-font-path}Roboto-Thin.woff2") format("woff2"),
  url("#{$roboto-font-path}Roboto-Thin.woff") format("woff");

  font-weight: 100;
}

The url that I'm using seemed to work, but when inspecting what actually happens in Firefox I get the following (which is the contents of my index.volt): Screenshot of Firefox.

Of course I can load this font using <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"> but that compromises loading time when using multiple fonts in the future.

Any help?

Solution

  • The .htacces in the root of each PhalconPHP application redirects all incoming requests to the public directory. My bower_components was outside of this directory. Moved bower_components inside of the public directory using a .bowerrc file and modified some paths. Works like a charm now ¯_(ツ)_/¯.