Hi EQ

Would you have an example of the page to which you with to load the font? Once you have your font loaded you will then need to apply to your styling using some Custom CSS. An example would be as follows which can be added to the Custom CSS field of your templates parameters (edit to taste)..

body {

   font-family: 'YourFont';

} 

Ciarán

Ciaran, it isn't a single page. Editing the "oxygen" template's template.css extended the entire template. (This is also how it worked with "notebook", which I believe you don't offer any more.)

With those templates, all it took was creating a "/fonts" directory off the base directory, installing the physical font files, then adding sections like the following to template.css. Those fonts then appeared in all the drop-downs, including those of the JCE editor plug-in (without having to go through its instructions on adding fonts).

@font-face {
font-family: 'simonettaext';
src: url('/fonts/simonettaext-regular-webfont.eot');
src: url('/fonts/simonettaext-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('/fonts/simonettaext-regular-webfont.woff') format('woff'),
url('/fonts/simonettaext-regular-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'simonettaext';
src: url('/fonts/simonettaext-italic-webfont.eot');
src: url('/fonts/simonettaext-italic-webfont.eot?#iefix') format('embedded-opentype'),
url('/fonts/simonettaext-italic-webfont.woff') format('woff'),
url('/fonts/simonettaext-italic-webfont.ttf') format('truetype');
font-weight: normal;
font-style: italic;
}

And so forth. Then, within any document itself, all that appeared in order to use one of the fonts was a statement like this:

<span style="font-family: simonettaext; font-size: 12pt;"><span style="font-family: simonettaext_black;">

Does "lifestyle" not have a CSS that acts as its root for style definitions?

BTW, the directions on TemplateMonster [http://www.templatemonster.com/help/joomla-3-x-how-to-add-and-use-custom-fonts.html] are as simple as the procedure was for "oxygen" and "notebook".

Ciaran! I added the "@font-face" clauses to three CSS files (custom, jstuff, and template_rtl), then forced the font families into the default profile of the JCE editor. The font families became pick-able there, and the text is formatted as desired when rendered.

Now, it looks like those clauses are coming in from jstuff.css. It's surprising that it took so much wrestling, but it's imperative for the text that its fonts be specific. (The problem with HTML/Joomla is that it was designed by programmers ["12pt Courier should do!"], not graphics designers—same problem with Kindle. None of whom understand the true nature of typography: these appear to be the same ones who will color a font so weakly that it's almost impossible to read its text!)

Check the main page of http://www.davidmydavid.com/ and its source to see what's going on with its font specs/usage.

These fonts render beautifully on Chrome and Firefox, even on my (Android) smartphone and tablet (which definitely don't have the fonts installed locally). (Some IE versions are horrible at rendering fonts, even locally installed ones, so I haven't even bothered with it.) Further examples (and free fonts) from my use of site-local fonts are at http://www.eduardqualls.com/free-stuff/free-fonts, especially on the individual sites linked through each font-family name.

Unfortunately, those new font families still don't show up on the font lists within your template's "Styling" options, which means forcing the website not to have a unified design in its typography. Any suggestions?

Hi EQ

Glad to hear everything worked out and thank you for the update. For future reference the templates nexus.css (../templates/[YourTemplate]/css/nexus.css) would be the equivalent of the original template.css, it been usually the last CSS to be loaded. The 'Custom CSS' field will also work however is only applied to that template style. Handy in some cases but possibly not the best option here.

To add your font to the dropdown menus within the templates parameters open your templates googlefonts.php (../templates/j51_yourtemplate/elements/googlefonts.php) and add your font to the list already in place using the following format..

$googleFonts['FontName'] = 'FontName';

Note you can also remove other fonts from this list to make things a little simpler. As you are not using Google fonts you will need to continue importing your font via CSS.

The fonts on your site look great. Definitely no mistaking the improvement in clarity. We realise that Google fonts are not the perfect solution however due their relative small file size, large choice and clear licensing it does make them a very popular choice among template designers.

Ciarán