Font change

Hier werden alle Themen zu Templates für Joomla 1.6.x, 1.7.x und 2.5.x besprochen.

Font change

Neuer Beitragvon rocciaseventy am Fr 6. Jan 2012, 19:34

Hi there!
On my website I'm using your aha_success template and I'd like change font in the head
using a personal font. I found a tutorial (on http://wiki.joomla.it/index.php?title=F ... _in_joomla)
which explain how set new font-familiy.
I can't understand where I must paste that code...
I'd like ask here why using the template aha_success j1.7 do not accept the
html code for flash objects while when I used aha_magma J1.5, I use them
safely
Can you help me please?
Bild
Benutzeravatar
rocciaseventy
Beginner
 
Beiträge: 5
Registriert: Fr 6. Jan 2012, 19:10
Plz/Ort: Italy

Re: Font change

Neuer Beitragvon Gerhard am Fr 6. Jan 2012, 20:13

Hi rocciaseventy and welcome to the forum,

you can download fonts or use google font api.
For example font squirrel on http://www.fontsquirrel.com/
or the Google Font API on http://code.google.com/intl/de-DE/apis/webfonts/
or TypeKit on http://typekit.com/

You can write the following code on top inside the template.css or your own css-file:

Code: Alles auswählen
@font-face {
font-family: "OwnFont";
src: url('newfont.eot');
src: local(' '),
url (fonts/newfont.woff) format ("woff"),
url (fonts/newfont.otf) format ("otf"),
url (fonts/newfont.svg#ID) format ("svg");
}


Be sure to use the right src. It works with different browsers.
If you use your own css-file stored inside the templates css folder, you have to include this file in templates index.php like this:

Code: Alles auswählen
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/font.css" type="text/css" media="screen" />


Another way for Google Font API is to copy the following line inside the head area of the templates index.php:
Code: Alles auswählen
<link href='http://fonts.googleapis.com/css?family=Cantarell' rel='stylesheet' type='text/css'>


Now you can use the font for any selectors or tags inside the templates css files. For exampel:

Code: Alles auswählen
body {
font-family: "OwnFont", sans-serif;
}


or the google example:

Code: Alles auswählen
html, body {
font-family: 'Cantarell', arial, serif;
}


I hope that can help you.

Flash in Joomla 1.7 is a little bit tricky. The easiest way is to use an extension like Custom Flash. You will get this extension on http://extensions.designcompasscorp.com/index.php/custom-flash

It is a component, module and plugin. Simply safe your swf-file inside your joomla-folder "images". Then in the component click the "New-Button". Now you can enter the path to your swf-file. For example "images/aha468x60_1.swf".

Now save your configuration and in the new window after saving remember the ID on the left. You can use this id now for module or plugin. For the module you can also use the file path to the swf-file. For the plugin write the following:

Code: Alles auswählen
{customflashid=1}


Another extensions you will find on http://extensions.joomla.org/extensions/core-enhancements/flash-management

Does it help?
Gratis Templates, News, Tutorials und vieles mehr, bei http://www.Ahadesign.eu
Benutzeravatar
Gerhard
Administrator
 
Beiträge: 1159
Registriert: Do 27. Dez 2007, 22:48
Plz/Ort: Oberfranken

Re: Font change

Neuer Beitragvon rocciaseventy am Fr 6. Jan 2012, 22:16

Gerhard hat geschrieben:Hi rocciaseventy and welcome to the forum,

Hi Gerard!
Thanx for your patience and for acept me on this forum, I am not very practical forums and even css.
I tried to follow your instructions but I think I made ​​some mistakes because the font is changed, yes, but from Arial to Times New Roman, and I would like to use "Freebooter Script". The font has already been converted to .eot and put in a folder in the templates. I can send you a copy of the css?
Bild
Benutzeravatar
rocciaseventy
Beginner
 
Beiträge: 5
Registriert: Fr 6. Jan 2012, 19:10
Plz/Ort: Italy

Re: Font change

Neuer Beitragvon Gerhard am Fr 6. Jan 2012, 22:35

Ok, you can post your css-file here. Use "Dateianhang hochladen" below the editor here. Use the button "Durchsuchen" to browse your pc and select your file. Then click "Datei hinzufügen". If you want, you can add a comment inside the textarea "Dateikommentar".
I will take a look to your file.

By the way, there are some extensions to including fonts in joomla on http://extensions.forum.org Maybe it´s easier for you.
Gratis Templates, News, Tutorials und vieles mehr, bei http://www.Ahadesign.eu
Benutzeravatar
Gerhard
Administrator
 
Beiträge: 1159
Registriert: Do 27. Dez 2007, 22:48
Plz/Ort: Oberfranken

Re: Font change

Neuer Beitragvon rocciaseventy am Fr 6. Jan 2012, 22:51

Gerhard hat geschrieben:Ok, you can post your css-file here. Use "Dateianhang hochladen" below the editor here. Use the button "Durchsuchen" to browse your pc and select your file. Then click "Datei hinzufügen". If you want, you can add a comment inside the textarea "Dateikommentar".
I will take a look to your file.

By the way, there are some extensions to including fonts in joomla on http://extensions.forum.org Maybe it´s easier for you.

Thank you! I click on the link about the extension but look like not working... I can't attach the css here: The extension txt is not allowed.
Ok, I'll search on google about extension link.
Bild
Benutzeravatar
rocciaseventy
Beginner
 
Beiträge: 5
Registriert: Fr 6. Jan 2012, 19:10
Plz/Ort: Italy

Re: Font change

Neuer Beitragvon Gerhard am Fr 6. Jan 2012, 23:13

Yes you have to zip the file before. Send the file via E-Mail, its no problem.
Gratis Templates, News, Tutorials und vieles mehr, bei http://www.Ahadesign.eu
Benutzeravatar
Gerhard
Administrator
 
Beiträge: 1159
Registriert: Do 27. Dez 2007, 22:48
Plz/Ort: Oberfranken

Re: Font change

Neuer Beitragvon rocciaseventy am Fr 6. Jan 2012, 23:31

Gerhard hat geschrieben:Yes you have to zip the file before. Send the file via E-Mail, its no problem.

Thanx I had not thought about it. :)
Dateianhänge
Modified css.zip
(1.46 KiB) 20-mal heruntergeladen
Bild
Benutzeravatar
rocciaseventy
Beginner
 
Beiträge: 5
Registriert: Fr 6. Jan 2012, 19:10
Plz/Ort: Italy

Re: Font change

Neuer Beitragvon Gerhard am Sa 7. Jan 2012, 01:31

Ok, try to do the following.
First create a folder called "font" inside your template-folder and copy the downloaded fonts into this folder.
Then add this code at the top off the template.css:

Code: Alles auswählen
@font-face {
font-family: "Freebooter Script";
src: url("../font/freebooterscript.ttf");
}


Now you can write the following for your site title inside the header:

Code: Alles auswählen
.header h1 a:link,
.header h1 a:visited {
position:absolute;
z-index:101;
top:25px;
left:160px;
width:340px;
height:65px;
overflow:hidden;
line-height:1.2em;
text-align : left;
font-size : 1.6em;
font-family: "Freebooter Script", Helvetica, Arial, sans-serif;
}


It doesn´t work with all browsers. You can´t use ttf-fonts for all browsers.
You can convert ttf-files to .eot and other formats. Search for font converters or online font converters in the internet.
You will find more informations about fonts for example on http://webfonts.info/wiki/index.php?title=%40font-face_browser_support
Or search for @font-face and css3.
Gratis Templates, News, Tutorials und vieles mehr, bei http://www.Ahadesign.eu
Benutzeravatar
Gerhard
Administrator
 
Beiträge: 1159
Registriert: Do 27. Dez 2007, 22:48
Plz/Ort: Oberfranken

Re: Font change

Neuer Beitragvon rocciaseventy am Sa 7. Jan 2012, 10:49

Gerhard hat geschrieben:Ok, try to do the following.
First create a folder called "font" inside your template-folder and copy the downloaded fonts into this folder.
Then add this code at the top off the template.css:

Code: Alles auswählen
@font-face {
font-family: "Freebooter Script";
src: url("../font/freebooterscript.ttf");
}


Now you can write the following for your site title inside the header:

Code: Alles auswählen
.header h1 a:link,
.header h1 a:visited {
position:absolute;
z-index:101;
top:25px;
left:160px;
width:340px;
height:65px;
overflow:hidden;
line-height:1.2em;
text-align : left;
font-size : 1.6em;
font-family: "Freebooter Script", Helvetica, Arial, sans-serif;
}


It doesn´t work with all browsers. You can´t use ttf-fonts for all browsers.
You can convert ttf-files to .eot and other formats. Search for font converters or online font converters in the internet.
You will find more informations about fonts for example on http://webfonts.info/wiki/index.php?title=%40font-face_browser_support
Or search for @font-face and css3.

I tried...nothing :( I'd also made something modify but it's the same... The font was already converted and stored in a folder on template's directory. Ok I'll try to search for @font-face, maybe I'll find something.
Thank you for your support.
Bild
Benutzeravatar
rocciaseventy
Beginner
 
Beiträge: 5
Registriert: Fr 6. Jan 2012, 19:10
Plz/Ort: Italy


Zurück zu Templates für Joomla 1.6.x, 1.7.x und 2.5.x

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 2 Gäste

cron