HOWTO: Make installing custom fonts easy
Site director
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 moderateDifficulty 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}
INSERT IMMEDIATELY AFTER page hint: no_wysiwyg}
Last edit: by Patrick Schmalstig
- Need support for version 10? The core development team is no-longer offering it for free (unless it's a critical bug that breaks your entire site or a serious security hole). Please consider hiring me instead if you need v10 support or a non-critical bug fix. Or, ask the community in the forums!
- Do you enjoy Composr? Please consider contributing your talent to the project or recommending Composr to others. Even small contributions make a big impact in the Composr community.
- Do you have feedback for us? You can report bugs, suggest features, or give feedback on the Free support options page.
- Do you need professional service with your Composr website? Please consider contracting me for your needs through my company, PDStig, LLC. Doing so will also help fund Composr development.
- Want to watch live streams of me developing Composr CMS? Please subscribe to me on Twitch to be notified when I stream. Composr development streams are usually spontaneous / not scheduled in advance as work priorities come first.
1 guest and 0 members have just viewed this.
