Drupal 7: Include a referenz to webfont CSS in HTML head

Solenthaler
Solenthaler used Ask the Experts™
on
Need to implement some special fonts onto my Drupal WebSite. Therefore need a link to a CSS File in the Main HTML-File.
How is this done?
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Top Expert 2015

Commented:
Place the stylesheet in the css folder inside your theme folder. Open the template.php file from the theme folder and add:
$theme_path = base_path() . drupal_get_path('theme','your_theme_folder_name');
$css_path = $theme_path . 'css/your_stylesheet.css';
drupal_add_css($css_path);

Open in new window

Change the folder and file name.

Author

Commented:
Done as you stated. It's not working. The font's are not recognized. I do have my own template done with artisteer.
Top Expert 2015

Commented:
Can you verify that the stylesheet is now referenced in the head of the rendered page?

Are there any console errors regarding fonts not found? Perhaps the path to the font files relative to the location of the stylesheet is not correct.
Ensure you’re charging the right price for your IT

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Author

Commented:
I'm new to Drupal and have probs to find an entry point. In my Drupal installation there is a"/themes" path in root and a "/sites/all/themes/my_art_drupal_theme/template.php." Here i included the following Code:
$css_path = '/MyFontsWebfontsKit.css';
echo "css_path: " .$css_path;
drupal_add_css($css_path);
-> the echo: css_path: /MyFontsWebfontsKit.css
But the MyFontsWebfontKit.css is not not icluded.
Top Expert 2015

Commented:
The "sites/all/themes" is the correct folder.

Place your stylesheet in the css folder inside of the my_art_drupal_theme folder. Create the css folder if it's not already there.

You need to include the base path and path to the theme folder or the stylesheet will not be found and included.
$theme_path = base_path() . drupal_get_path('theme', 'my_art_drupal_theme');
$css_path = $theme_path . 'css/MyFontsWebfontsKit.css';
drupal_add_css($css_path);

Open in new window

The fonts may still not show up but check the view source of the rendered page to see if the stylesheet was included. The paths to the font files may need to be adjusted in the stylesheet.

Author

Commented:
Code at top of "/sites/all/themes/drupal_v1/template.php "
<?php
// $Id
require_once("common_methods.php");

$theme_path = base_path() . drupal_get_path('theme', 'drupal_v1');
$css_path = $theme_path . '/MyFontsWebfontsKit.css';
drupal_add_css($css_path);

echo "css_path: " .$css_path;
--------------------------------------------
php echo: $css_path-> /sites/all/themes/drupal_v1/MyFontsWebfontsKit.css
-> looks good!
--------------------------------------------
But the stylesheet "MyFontsWebfontsKit.css" is still not included (all others are).

With other CMS'es (eg Joomla) the MyWebfontKit works like a charm
Top Expert 2015
Commented:
Actually, the echo of $css_path does not look complete. It should include the root folder which should have been returned with base_path(). That function simply returns the $GLOBALS ['base_path']; variable. In my Drupal test environment it returns "/Drupal_test4/". My echo of $css_path is then "/Drupal_test4/sites/all/themes/bootstrap_sub/css/carousel.css". And carousel.css is then included on the page. After experimenting further, I realized that in my case the root folder was not needed and in fact made the carousel.css file inaccessible. Your situation may be otherwise.

Be sure to do a text search of the source on the rendered page for the name of your css file. It may not be inside a <link> block as you might expect depending on what kind of caching mechanisms you have in place. In my test environment, additional assets are loaded via a jQuery.extend() function.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial