Problem with Path in @font-face src: url(...)

bytesource · September 9, 2014

Hi,

I downloaded the font Open Sans from FontSquirrel and want to include if using @font-face in the <head> section.

The problem I haven't been able to get the path to the font file right.

The actual path to one of the files is as follows:

/site/templates/styles/my-fonts/open-sans/default/OpenSans-Regular-webfont.woff

In the <head> of my my main template the following code gets output:

// _done.php
<style media="screen" type="text/css">
@font-face {
    font-family: 'Open Sans', sans-serif; 
    src: url('<?php echo $path ?>') format('woff'); 
    font-weight: 400; 
    font-style: normal; 
}
</style>

Neither of the following has been working:

$path = $config->urls->templates . "styles/my-fonts/open-sans/default/OpenSans-Regular-webfont.woff";
// /processwire/site/templates/styles/my-fonts/open-sans/default/OpenSans-Regular-webfont.woff
$path = $config->paths->templates> "styles/my-fonts/open-sans/default/OpenSans-Regular-webfont.woff";
// /...home path.../htdocs/site/templates/styles/my-fonts/open-sans/default/OpenSans-LightItalic-webfont.woff

I am therefore thinking the problem might be something different, but I have not been able to figure that out.

The reason I am not using Google Fonts to import my fonts are because:

Google Fonts is extremely slow within China, and sometimes seems to be blocked completely.
In general, load times for sites located outside of China long, and I want to minimize this delay.

Cheers,

Stefan

Edit:

Normally I would just import the CSS in a separate file, but here I placed it inside <style> tags as the fonts to be used are chosen dynamically based on the current language. This is to reduce the total file size, which was quite high before.

cstevensjr · September 9, 2014

I have been using @font-face format recently on most of my websites (always in the CSS).

Here is what's working for me with PW:

p {font-family: "steagal_regularregular", Helvetica, Tahoma, sans-serif}

@font-face {
    font-family: 'steagal_regularregular';
    src: url('fonts/SteagalRegular-webfont.eot');
    src: url('fonts/SteagalRegular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/SteagalRegular-webfont.woff') format('woff'),
         url('fonts/SteagalRegular-webfont.ttf') format('truetype'),
         url('fonts/SteagalRegular-webfont.svg#steagal_regularregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

Martijn Geerts · September 9, 2014

I am therefore thinking the problem might be something different, but I have not been able to figure that out.

I work on mac & sometimes when I move downloaded files to my local project, the files get 'read none' for some reason. Going to the file and get info, there I can change the permissions.

( Probably i'm totally wrong here, but when you're on a mac it's worth checking )

Fokke · September 9, 2014

Have you tried to declare @font-face rules before any other css rules?

bytesource · September 9, 2014

@cstevensjr

Normally I would do the same, but in this case I need to output the font-face in the <head> section. I assume a relative path to the font file in my case would have to start at the page root, but then again the following did not work, either:

$path = "site/templates/styles/my-fonts/open-sans/" . "default/OpenSans-LightItalic-webfont.woff";
// site/templates/styles/my-fonts/open-sans/default/OpenSans-Light-webfont.woff

$path = "/site/templates/styles/my-fonts/open-sans/" . "default/OpenSans-LightItalic-webfont.woff";
// /site/templates/styles/my-fonts/open-sans/default/OpenSans-Light-webfont.woff

@Martjin

I checked the file permissions, they seem to be OK:

Owner: Read and write
Group: Read and write
Other: Read-only

@Fokke

I tried both. Currently the @font-face rules are placed before any other CSS rules.

==================

This is the code in question. Maybe someone will find something I haven't seen yet:

// site/templates/includes/partials/fonts/open-sans.php
<?php

// Import font based on the user language.

$currentLanguage = $user->language->name;
$fontPath        = $config->paths->templates . "styles/my-fonts/open-sans/";
$css             = "";

$fonts = array(
        'Open Sans' => array(
               'OpenSans-Light'             => '300',
               'OpenSans-LightItalic'         => '300',
               'OpenSans-Regular'             => '400',
               'OpenSans-Italic'             => '400',
               'OpenSans-Semibold'             => '600',
               'OpenSans-SemiboldItalic'     => '600',
               'OpenSans-Bold'                 => '700',
               'OpenSans-BoldItalic'         => '700'
                   ),
        'Open Sans Condensed' => array(
                'OpenSans-CondLight'         => '300'
                )
        );

switch ($currentLanguage) {

    case "default": // English
    case "ru":        // Russian
    case "es":        // Spanish
        foreach ($fonts as $font => $styles) {
            foreach ($styles as $style => $weight) {
                // Target path:
                // site/templates/styles/my-fonts/open-sans/<user language>/<font name>-webfont.woff
                $url    = $fontPath . $currentLanguage . "/" . $style . "-webfont.woff";

                $css .= <<<CSS
                @font-face {
                font-family: '$font', sans-serif;
                src: url('$url') format('woff');
                font-weight: $weight;
                font-style: normal;
                }
                \n
CSS;
            }
        };
        
        break;

    default:
        echo "<h2>No CSS Font found!</h2>";

}

echo $css;

// site/templates/_init.php
<?php
$partialsPath = $config->paths->templates . 'includes/partials/';
?>

// site/templates/_done.php
<head>
    <style media="screen" type="text/css">
          <?php include($partialsPath . "fonts/open-sans.php"); ?>
    </style>
</head>

Output:

<head>
<style media="screen" type="text/css">

@font-face {                 
font-family: 'Open Sans', sans-serif;                 
src: url('/<home path>/htdocs/site/templates/styles/my-fonts/open-sans/default/OpenSans-Light-webfont.woff') format('woff');                 
font-weight: 300;                 
font-style: normal;                 
}

@font-face {                 
font-family: 'Open Sans', sans-serif;                 
src: url('/<home path>/htdocs/site/templates/styles/my-fonts/open-sans/default/OpenSans-LightItalic-webfont.woff') format('woff');                 
font-weight: 300;                 
font-style: normal;                 
}

@font-face [...]

</style>
</head>

Cheers,

Stefan

cstevensjr · September 9, 2014

Just a FYI, when I was learning about using @font-face, I ran across an old post that helped me understand some things:

http://nicewebtype.com/notes/2009/10/30/how-to-use-css-font-face/

This article also had many additional links to all things @font-face and web typography.

Fokke · September 9, 2014

font-family: 'Open Sans', sans-serif;

Remove "sans-serif" part. Font substitutions do not belong to the @font-face declarations.

adrian · September 9, 2014

Just another alternative - you could embed the font using base64:

http://sosweetcreative.com/2613/font-face-and-base64-data-uri

I haven't tried this method yet, but have heard great things about it, so is on my list to try out.

bytesource · September 10, 2014

@cstevensjr

Thanks for this article. That was an interesting read!

@adrian

I have heard people say that base64 encoded fonts would load pretty fast, so I am really interested to hear about your personal experience when this tasks pops off of your list.

@Fokke

You saved me from my misery! After removing the alternative font (and changing $config->paths->templates to $config->urls->templates) the fonts finally loaded.

For every font I also had to specify the font-style as either 'normal' or 'italic'. Otherwise all fonts would be displayed in italics. Just removing the font-style property from @font-face did not work.

This is the final implementation:

<?php

// Import font based on the user language.

$currentLanguage = $user->language->name;
$fontPath        = $config->urls->templates . "styles/my-fonts/open-sans/";
$css             = "";

$fonts = array(
        'Open Sans' => array(
               'OpenSans-Light'             => ['normal', 300],
               'OpenSans-LightItalic'         => ['italic', 300],
               'OpenSans-Regular'             => ['normal', 400],
               'OpenSans-Italic'             => ['italic', 400],
               'OpenSans-Semibold'             => ['normal', 600],
               'OpenSans-SemiboldItalic'     => ['italic', 600],
               'OpenSans-Bold'                 => ['normal', 700],
               'OpenSans-BoldItalic'         => ['italic', 700]
                   ),
        'Open Sans Condensed' => array(
                'OpenSans-CondLight'         => ['normal', 300]
                )
        );

switch ($currentLanguage) {

    case "default": // English
    case "ru":        // Russian
    case "es":        // Spanish
        foreach ($fonts as $font => $variations) {
            foreach ($variations as $variation => $properties) {
                // Target path:
                // site/templates/styles/my-fonts/open-sans/<user language>/<font name>-webfont.woff
                $url    = $fontPath . $currentLanguage . "/" . $variation . "-webfont.woff";
                $style  = $properties[0];
                $weight = $properties[1];

                $css .= <<<CSS
                @font-face {
                font-family: '$font';
                src: url('$url') format('woff');
                font-weight: $weight;
                font-style: $style;
                }
                \n
CSS;
            }
        };
        
        break;

    default:
        echo "<h2>No CSS Font found!</h2>";

}

echo $css;

Sample output:

@font-face {                 
font-family: 'Open Sans';                 
src: url('/processwire/site/templates/styles/my-fonts/open-sans/default/OpenSans-Light-webfont.woff') format('woff');                 
font-weight: 300;                 
font-style: normal;                 
}                                  

@font-face {                 
font-family: 'Open Sans';                 
src: url('/processwire/site/templates/styles/my-fonts/open-sans/default/OpenSans-LightItalic-webfont.woff') format('woff');                
font-weight: 300;                 
font-style: italic;                 
}                                  

@font-face  [...]

I wanted to thank you all again for your help! As I am not a web developer by trade, I often get stuck at things that "just should work". Luckily, there is always some great people on the Processwire forum who point me in the right direction.

Cheers,

Stefan

Sign In

Problem with Path in @font-face src: url(...)

Recommended Posts

bytesource

cstevensjr

Martijn Geerts

Fokke

bytesource

cstevensjr

Fokke

adrian

bytesource

Create an account or sign in to comment

Create an account

Sign in

Recently Browsing 0 members

Browse

Activity

My Activity Streams

Support

Store

My Details