By default, the Protostar template uses one font for the site title and the headings and a different font for all of the other text on the site, with a few exceptions.

The font for the entire site is specified for the <body> tag in template.css

body {
    margin: 0;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 13px;
    line-height: 18px;
    color: #333;
    background-color: #fff;
}

To change this font to something else, you can create a line in your custom stylesheet. For example:

body {font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;}

Keep in mind that you need to specify a standard web font or load font files from Google or other sources.

Here is a link to a list of standard web fonts: cssbasics.zemplate.com/css-concepts/15-css-concepts-common-fonts-for-web-pages

To load fonts from other sources, read this article: How to add custom fonts to Protostar

How to change the font for the site title and heading tags in Protostar

google-font-template-manager

By default, the Protostar template is set up to use PHP to load the Google font name specified in the Template Manager IF the option for Google Font for Headings is set to Yes. If this option is set to No, the pages will have the same font style for the site title and heading tags that it uses for the rest of the site specified in template.css as mentioned at the beginning of this article.

If set to Yes, PHP loads the Google Font Name into a <style> section in the <head> of the HTML document. If you make try to and font settings in your stylesheet, IT WILL NOT OVERRIDE THIS SETTING. Styles from stylesheets are overwritten with the <style> section of the HTML document. You must first set the Google Font option mentioned earlier to NO, then add your own preference for your font to your custom stylesheet.

If you do not yet have a custom stylesheet set up, and you are not sure how to create one, read this article: Add a custom stylesheet to the Protostar Template

Fonts used in template.css for Protostar

A font specified in the <body> tag will used for every piece of text on the page unless specified somewhere else in the style sheet. Protostar does use specific font-family settings for the <input>, <button>, <select>, <textarea>, <code> and <pre> tags and for the .search-query class. 


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.