In Template Manager, for the Protostar Template, you will see there is a box to fill out the Google Font Name.

This adds a font from the Google Font directory into your site. The default font is Open+Sans. This is the font that will be used throughout your site for the site title and the headings. The default font for content is font-family: "Helvetica Neue",Helvetica,Arial,sans-serif";

The font is loaded into your index.php page with the following in the <head> section. This pulls in the font from Google AND assigns it to the h1, h2, h3, h4, h6 and site-title. No matter what you do in your stylesheets for the heading tags, this style in the index.php will override the stylesheet.

<?php
// Use of Google Font
if ($this->params->get('googleFont'))
{
?>
    <link href='http://fonts.googleapis.com/css?family=<?php echo $this->params->get('googleFontName');?>' rel='stylesheet' type='text/css' />
    <style type="text/css">
        h1,h2,h3,h4,h5,h6,.site-title{
            font-family: '<?php echo str_replace('+', ' ', $this->params->get('googleFontName'));?>', sans-serif;
        }
    </style>
<?php
}
?>

If you look at the source code for your page, you will see this:

<link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans">

Please explain about Google Fonts

If you are new to all this, you may not be aware of Google Fonts. Google Fonts has an extensive library of font files that you can use for free at this link:

www.google.com/fonts

You go to this page and you will see a list of fonts. You can type your own text into the Preview Text box, if you wish to see what your site title or heading will look like in this font. You can filter for serif, sans-serif, display, handwriting and/or. monospace. If your language has special characters other than the standard English, you may want to pull down the Script option and choose for that language. Not all fonts will have all these characters, so this will save you time. 

Find the font that you like, click on the button that reads Add to Collection

You font or fonts will show at a list at the bottom of the page. Click on the 'Use' button and the screen will change.

You can now select if you want other forms of this font (if available), like Light, Bold, Italic, etc. Scroll down a bit and you can choose extra character sets.

Scroll some more and you will see the <link> tag that adds the code to your site. You will next see how to call for the use of these fonts in your stylesheet.

How to integrate Google Fonts with Protostar

In the Template Manager, under the Advanced tab for Protostar, you can type in the name of your chosen font into that box. Say you like Federo, type in Federo. If you like Sofadi One, then type in Sofadi+One.

If you want the extended character set for your font, you need to place the <link> provided by Google fonts into the <head> portion of your index.php file.

For example: 

<link href='http://fonts.googleapis.com/css?family=Playfair+Display+SC:400,700,900&subset=latin,latin-ext' rel='stylesheet' type='text/css'>

Keep in mind that the <?php ?> in the index.php sets the style from the Template Manager Advanced tab setting. This will add the other characters to that font specified in Template Manager. The fonts must agree.

If you want to have different fonts for different headings and the site title, and have your stylesheet specify these fonts, then remove the <style type="text/css">...</style> for the index.php as shown at the top of this article.

 

 


Has BJ.Zemplate.com helped you with understanding Joomla?

If you would like to make a small contribution to help fund this resource, that would be great, but do not feel obligated in any way.

Donation Amounts


Still not finding a special topic?

Use Google's Search function below for search the content of bj.zemplate.com.