HOWTO: Make installing custom fonts easy

Post

Posted
Rating:
Item has a rating of 5 (Liked by Chris Graham)
#508 (In Topic #109)
Avatar
Site director
Patrick Schmalstig is in the usergroup ‘Administrators’

In this tutorial, I'll explain how you can implement a few hooks and template changes to make installing fonts on Composr (Comcode and WYSIWYG editor) much easier

Difficulty to implement: 3/5 moderate
Difficulty to use: 1/5: Easy

Step 1: If the folder doesn't already exist, create the path sources_custom/hooks/systems/symbols . Also create data_custom/fonts if it doesn't exist. Be sure to add empty index.html files in the data_custom/fonts folder.

Step 2: Create in that folder the file CUSTOM_FONTS_CHAT.php , and put the following code in it:

Code

<?php




class Hook_symbol_CUSTOM_FONTS_CHAT
{
    
    public function run($param)
    {
        
        $out = '';
        
        
        if ((!isset($GLOBALS['DOING_USERS_INIT'])) && (!in_safe_mode())) { // The !isset is because of if the user init causes a DB query to load sessions which loads DB hooks which checks for safe mode which leads to a permissions check for safe mode and thus a failed user check (as sessions not loaded yet)
        $dir = get_file_base() . '/data_custom/fonts';
        $dh = @scandir($dir);
        if ($dh !== false) {
            foreach ($dh as $file) {
                $basename = basename($file, '.ttf');
                if (($file[0] != '.') && ($file == $basename . '.ttf')) {
                    $out .= $this->font_name($basename);
                }
            }
        }
    }
     return $out;   
    }
    
    public function font_name($basename)
    {
        
        $output = preg_replace('#[^\w]#', '-', strtolower($basename)) . ',';
        return $output;
    }
}

Step 3: Create in that same folder the file CUSTOM_FONTS_CSS.php, and put in that file the following:

Code

<?php




class Hook_symbol_CUSTOM_FONTS_CSS
{
    
    public function run($param)
    {
        
        $out = '';
        
        
        if ((!isset($GLOBALS['DOING_USERS_INIT'])) && (!in_safe_mode())) { // The !isset is because of if the user init causes a DB query to load sessions which loads DB hooks which checks for safe mode which leads to a permissions check for safe mode and thus a failed user check (as sessions not loaded yet)
        $dir = get_file_base() . '/data_custom/fonts';
        $dh = @scandir($dir);
        if ($dh !== false) {
            foreach ($dh as $file) {
                $basename = basename($file, '.ttf');
                if (($file[0] != '.') && ($file == $basename . '.ttf')) {
                    $out .= $this->font_face($basename,'/data_custom/fonts/' . $file);
                }
            }
        }
    }
     return $out;   
    }
    
    public function font_face($basename, $path)
    {
        require_code('global3');
        
        $output = '@font-face {
        font-family: "' . preg_replace('#[^\w]#', '-', strtolower($basename)) . '";
        src: url("' . $path . '");
        src: local("' . preg_replace('#[^\w]#', '-', strtolower($basename)) . '"), url("' . $path . '") format("truetype");
        }';
        return $output;
    }
}

Step 4: Create in that same folder the file CUSTOM_FONTS_OPTIONS.php and save into it the following:

Code

<?php




class Hook_symbol_CUSTOM_FONTS_OPTIONS
{
    
    public function run($param)
    {
        
        $out = '';
        
        
        if ((!isset($GLOBALS['DOING_USERS_INIT'])) && (!in_safe_mode())) { // The !isset is because of if the user init causes a DB query to load sessions which loads DB hooks which checks for safe mode which leads to a permissions check for safe mode and thus a failed user check (as sessions not loaded yet)
        $dir = get_file_base() . '/data_custom/fonts';
        $dh = @scandir($dir);
        if ($dh !== false) {
            foreach ($dh as $file) {
                $basename = basename($file, '.ttf');
                if (($file[0] != '.') && ($file == $basename . '.ttf')) {
                    $out .= $this->font_name($basename);
                }
            }
        }
    }
     return $out;   
    }
    
    public function font_name($basename)
    {
        
        $output = '<option value="' . preg_replace('#[^\w]#', '-', strtolower($basename)) . '" style="font-family: \'' . preg_replace('#[^\w]#', '-', strtolower($basename)) . '\'">' . preg_replace('#[^\w]#', '-', strtolower($basename)) . '</option>' . "\n";
        return $output;
    }
}

Step 5: Create in that same folder the file CUSTOM_FONTS_WYSIWYG.php and save into it the following:

Code

<?php




class Hook_symbol_CUSTOM_FONTS_WYSIWYG
{
    
    public function run($param)
    {
        
        $out = '';
        
        
        if ((!isset($GLOBALS['DOING_USERS_INIT'])) && (!in_safe_mode())) { // The !isset is because of if the user init causes a DB query to load sessions which loads DB hooks which checks for safe mode which leads to a permissions check for safe mode and thus a failed user check (as sessions not loaded yet)
        $dir = get_file_base() . '/data_custom/fonts';
        $dh = @scandir($dir);
        if ($dh !== false) {
            foreach ($dh as $file) {
                $basename = basename($file, '.ttf');
                if (($file[0] != '.') && ($file == $basename . '.ttf')) {
                    $out .= $this->font_name($basename);
                }
            }
        }
    }
     return $out;   
    }
    
    public function font_name($basename)
    {
        
        $output = preg_replace('#[^\w]#', '-', strtolower($basename)) . '; ';
        return $output;
    }
}

Step 6: For every theme that contains a global.css and that you wish to apply custom CSS installation to, including the default theme, edit a CUSTOM version of the global.css file in the css_custom folder.

ADD after the theme wizard variables and before the CSS elements are defined

Code

{$CUSTOM_FONTS_CSS}

Save.

Step 7. Edit the COMCODE_EDITOR.tpl template in your active theme(s), preferably your default theme. Use a CUSTOM version… don't save over the original.

FIND

Code

<select id="f_face" name="f_face">
      <option value="/">[{!FONT}]</option>

After, ADD

Code

{$CUSTOM_FONTS_OPTIONS}

Save.

Step 8: Edit the CHAT_ROOM_SCREEN.tpl template in your active theme(s), preferably your default theme. Use a CUSTOM version… don't save over the original.

FIND

Code

{+START,LOOP,Arial\,Courier\,Georgia\,Impact\,Times\,Trebuchet\,Verdana\,Tahoma\,Geneva\,Helvetica}
(Above may be different depending on if it was edited to reflect a different list of fonts)

INSERT IMMEDIATELY AFTER

Last edit: by Patrick Schmalstig

Online now: No Back to the top
1 guest and 0 members have just viewed this.

Statistics

Users online:

Philip, Salman, mytracker, Manu, amit.nigam

Forum statistics:
  • 1,298 topics, 5,830 posts, 7,064 members
  • Our newest member is flour2door
Birthdays:
Back to Top