Google Fonts are ready-to-use, but they are everywhere and you can prefer to use another web font. I'd like to test League Gothic in Lifestyle 2, but the font files don't exist in Fonts folder. So I take the font files from Koan template, but it doesn't work. I suppose I must configure some files, but I don't know which of them and how to do it. Explanations (here in Bamboo and in T3 forum) are very sparse.

Can you tell me a full detailed explanation about how to install and configure a non-Google font?

Hi

With embedding fonts and loading them it does add a speed bump to the site

With Google fonts there are 100's of different fonts to look at so it would be possible I'd have thought to use a less common one

That said if you want more info please confirm and I'll look it up

Cheers
Paul

I'm looking for a font like Trade Gothic. Oswald is the most similar Google font I've found, but it's too narrow for my taste, and it's used everywhere.

So I've downloaded Bebas Neue from Font Squirrel. It's free and ready to embedding. What must I do now?

and you've created the various font file types using Font Squirral?

Yeah. Font Squirrel let you to download a full kit containing 4 font file types and a stylesheet

Right ok I'll have to dig out my notes for this

Huh, have you digged out your notes yet?

Hi,

The font squirrel kits contain everything you need to use the font.

Copy the css to a custom.css file in the templates css folder and make sure the paths to the font files are correct, and then add css to change the font of the elements you want to target.

Regards,

Rob

I´ve spent a much of time applying changes, but nothing works.

I put the BebasNeue files in fonts folder. I copied FontSquirrel stylesheet.css and pasted it in my custom.css and head.php. Because ThemeMagic Selector is only linked to League Gothic, I renamed my new font as League Gothic.

Nothing works. I don't know what to do

Try the other way

Open up to two files and a folder -

\templates\lifestyle2\fonts

drop the fonts in the folder


Open up the file

\templates\lifestyle2\templateDetails.xml

and open up the file

\templates\lifestyle2\tpls\blocks\head.php

In the head file I'm adding this

<?php if(($bodyfont || $headingfont || $navfont || $logofont) == "db") { ?>
@font-face {
font-family: 'db';
src: url('<?php echo T3_TEMPLATE_URL ?>/fonts/20db-webfont.eot');
src: url('<?php echo T3_TEMPLATE_URL ?>/fonts/20db-webfont.eot?#iefix') format('embedded-opentype'),
url('<?php echo T3_TEMPLATE_URL ?>/fonts/20db-webfont.woff') format('woff'),
url('<?php echo T3_TEMPLATE_URL ?>/fonts/20db-webfont.ttf') format('truetype'),
url('<?php echo T3_TEMPLATE_URL ?>/fonts/20db-webfont.svg#') format('svg');
}
<?php }?>

I'm using this font - www.fontsquirrel.com/fonts/20-db

I'm adding this chunk below the league-gothic font section

with the templatedetails

<option value="League Gothic">League Gothic</option>

Below the existing line I'm adding this to all the font options for heading, body etc

<option value="db">DB</option>

Which gives me



Cheers
Paul

Having selected it in the template admin drop downs

I'd suggest copying the php files before making changes

Cheers

It works! Great!!

One point. In the last sentence of head.php, you have to write:

url('<?php echo T3_TEMPLATE_URL ?>/fonts/20db-webfont.svg#db') format('svg'); }

And of course, you must add the stylesheet to custom.css

Thanks !

Ah missed that off

I've not added the style to the stylesheet - are you selecting it via the fonts section in the template admin?

Cheers
Paul

Yeah. And there is happening a curious event: it works only if I put the fonts in templates/lifestyle/css/fonts. If I put them in templates/lifestyle/fonts, it doesn't.

hmm not sure why that is happening as I have mine working directly from the fonts folder

maybe the path you added is different but as it works = happy days

Cheers
Paul