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 [email protected] 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.
