If you have installed Phoca Font component, go to Fonts and upload your .ttf or .otf font. Set this font as default. Enable Phoca Font plugin. After enabling this plugin, the installed font will be used in frontend of your Joomla! site. Users who are using browser which supports @font-face rule, will see your installed font instead some system font selected by their operating system.

 

See the following video:

 

 

This video displays how to set different fonts with font-face rule on Joomla! website. First, Phoca Font component will be installed. After installation of the component, Phoca Font plugin will be installed. This plugin will be enabled in Plugin Manager. Then, specific font will be installed in Phoca Font component. On the frontend of Joomla! site, the font will be changed after refreshing the site. In case the plugin will be disabled, the standard font will be displayed.

Fonts displayed with help of font-face rule are independent on visitor's browsers and operating system. It means, if visitor doesn't have installed the font set by the website, the font will be loaded from the server and will be displayed. It will be not replaced by some other similar font found in visitor's operating system.

 

Quick Guide

 

 

Using a font from Google Font Directory

 

1 Download the Phoca Font componentPhoca Font plugin.

 

2 Install the component and plugin.

 

3 Enable plugin.

 

4 Go to Extensions - Phoca Font - Fonts. Click on New and add the name of font from Google Font Directory (Google Web Fonts). Save it.

 

5 Go to Control Panel of Phoca Font, click on Options and set tag, class or id where the selected font will be applied - as default there is a body tag which means, the font will be used on the whole page (different tag, class or id can be set, more fonts can be used on one site too).

 

 

Using standard font

 

1 Download the Phoca Font component, Phoca Font plugin and one of the Phoca Font fonts - e.g. phoca Domestic Manners font.

 

2 Install the component and plugin.

 

3 Enable plugin.

 

4 Install the phoca domestic manners through the phoca font component.

 

5 Go to Control Panel of Phoca Font, click on Options and set tag, class or id where the selected font will be applied - as default there is a body tag which means, the font will be used on the whole page (different tag, class or id can be set, more fonts can be used on one site too)

 

 See the following article: Making Own Font Ready For Phoca Font, if you need to create own font file.