Support Center

How to extend the font-library of a theme

Last Updated: Jul 04, 2013 03:12PM EEST
In this article we will show you how to extend the font-family options of our themes. We will use our Business Class theme as a point of reference. However the same procedure is valid for the rest of our themes that come with this feature built-in. 

 

The Fonts 


Directory

As a first step we have to choose the fonts we would like to add to our theme. We can use fonts available from an online directory, like “Google Fonts” or load a font directly from the file system (recommended only for “web safe fonts”). Ιn the latter case it is critical to make sure that the font selected 
 
  • is properly licensed so as to be used (i.e. in case of a commercial font that we have the proper software license), 
  • has been tested and is available in all Operating Systems and 
  • can be properly used by all major browsers. 
In this example we will use the “Google Web Fonts” directory  http://www.google.com/webfonts and add a new font combination using:
  • Della Respira font for the heading (H1, H2, H2 )
  • Oxygen font for the body and paragraph text

CSS include

We will create a new .css file with the proper reference for each font we would like to use. These files will be used to include the font references in our theme, when needed.
dellarespira-font.css
 /*
 * font-family: 'Della Respira', serif;
 */

@import url(http://fonts.googleapis.com/css?family=Della+Respira); 
 
oxygen-font.css
 /*
 * font-family: 'Oxygen', sans-serif;
 */

@import url(http://fonts.googleapis.com/css?family=Oxygen); 
We will place these .css files in the sites/all/themes/businessclass folder.
 

Theme


Creating Theme setting 

We will edit the theme-settings.php file of our theme and will add one more font option. To do that we have to add the extra code marked below with bold:
 
 ...
'hff-default' => t('Open Sans, Helvetica Neue, Helvetica, Arial, Free Sans, Sans-serif'),
'hff-1' => t('PT Sans, Myriad Pro, Helvetica, Arial, Free Sans, Sans-serif'),
'hff-2' => t('Podkova, Georgia, Serif'),
'hff-3' => t('Della Respira, Serif'),
...
 ...
'pff-1' => t('PT Sans, Myriad Pro, Helvetica, Arial, Free Sans, Sans-serif'),
'pff-2' => t('Lato, Myriad Pro, Helvetica, Arial, Free Sans, Sans-serif'),
'pff-3' => t('Georgia, Times, Times New Roman, Serif'),
'pff-4' => t('Quattrocento Sans, Times, Times New Roman, Serif'),
'pff-5' => t('Quattrocento, Times, Times New Roman, Serif'),
'pff-6' => t('Oxygen, Sans-serif'),
... 


Loading the fonts 

In the template.php file we will locate the “businessclass_preprocess_html() function and will add the following lines (marked with bold)
 
 function businessclass_preprocess_html(&$variables) {

...
drupal_add_css(
   drupal_get_path('theme', 'businessclass') . '/dellarespira-font.css', 
      array('group' => CSS_THEME, 'type' => 'file'));

drupal_add_css(
   drupal_get_path('theme', 'businessclass') . '/oxygen-font.css', 
      array('group' => CSS_THEME, 'type' => 'file'));
...

} 
 
Doing that we will force our theme to load these .css files.
 

Adding the proper CSS rules

Finally we will add the proper CSS rules that will enable the fonts we have added above. To do that we will create a new local.css file and use it for our rules. 
 
We will place the local.css file in the sites/all/themes/businessclass folder.
 
local.css
 
 body.pff-6, 
.pff-6 #slogan, 
.pff-6 input, 
.pff-6 textarea { 
    font-family: 'Oxygen', sans-serif  
}

.hff-3 h1, 
.hff-3 h2, 
.hff-3 h3, 
.hff-3 h4, 
.hff-3 h5, 
.hff-3 h6, 
.hff-3 #navigation-right ul.nice-menu li a, 
.hff-3 #navigation-right ul.menu li a {
    font-family: 'Della Respira', serif; 
} 
 
The following addition to the businessclass.info file is required to make our theme aware of the new .css file.
 
 stylesheets[all][] = style.css
stylesheets[all][] = local.css


Alternatively: Hiring us to implement this for you

If you do not want or do not have the time to mess with coding in order to carry out the above yourself or within your organization, you can always hire us so to implement this for you. 
 
To go for it, please send an email at support@morethanthemes.com mentioning the fonts you would like to use and, ideally, including a link to the repository where they can be found. 
 
Before proceeding, we will check the fonts you want to use, and will inform you about the cost of implementation. Once you agree, we will proceed accordingly.  

Contact Us

support-agent@morethanthemes.com
http://assets1.desk.com/
false
morethanthemes
Loading
seconds ago
a minute ago
minutes ago
an hour ago
hours ago
a day ago
days ago
about
false
Invalid characters found
/customer/en/portal/articles/autocomplete