Jump to content

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


bytesource
 Share

Recommended Posts

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.

Link to comment
Share on other sites

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;

}
  • Like 3
Link to comment
Share on other sites

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 :-) )

Link to comment
Share on other sites

@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

Link to comment
Share on other sites

@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

  • Like 5
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...