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

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?
SolenthalerAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Tom BeckCommented:
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.
SolenthalerAuthor Commented:
Done as you stated. It's not working. The font's are not recognized. I do have my own template done with artisteer.
Tom BeckCommented:
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.
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

Get the Guide
SolenthalerAuthor 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.
Tom BeckCommented:
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.
SolenthalerAuthor 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
Tom BeckCommented:
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.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Drupal

From novice to tech pro — start learning today.