font-face directive, cufon fonts, google web fonts - which fonts and why?

[Fido Dondus]

I need to chancge fonts. What is the best solution and why. Pros and cons. And optinaly how do i do that in prestashop 1.5?

Edited February 9, 2013 by Fido Dondus (see edit history)

[vekia]

well, the best way to change fonts is to use CSS styles

[Fido Dondus]

Why? If i got that correctly , the problem is cause users cant see fonts which are on internet store.Where do CSS styles saves fonts ? on server?

 

And is there any guide about fonts how to create css styles?

[vekia]

css don't save fonts.. the best guide for css: http://www.w3schools.com/css/

[Fido Dondus]

Thank u for this site.its great site, specialy for begginer like i am.

Can i have custom fonts in css styles 2? Cause maybe i didnt explain good enough.Im interested in setting custom fonts so users can see them, when they visit my site.

[vekia]

Thank u for this site.its great site, specialy for begginer like i am.

Can i have custom fonts in css styles 2? Cause maybe i didnt explain good enough.Im interested in setting custom fonts so users can see them, when they visit my site.

 

sure you can, for example i've got font in fontname.otf file

 

you have to insert this code into css file:

@font-face {
font-family: fontname;
src: url('fontname.otf');
}

 

next you can use this font by (example class)

 

.newfont {font-family:fontname;}

 

then add class to sample span like below:

 

<span class="newfont">Sample text - my new font usage</font>

[Fido Dondus]

thank u for ur answer.Code which u wrote will be great help to me.

Do i need to copy my custom font in to my prestashop folder? Im running xampp prestashop right now.

[vekia]

thank u for ur answer.Code which u wrote will be great help to me.

Do i need to copy my custom font in to my prestashop folder? Im running xampp prestashop right now.

 

if you're using code that i pasted aboe you must copy font to css folder in your theme directory

[Fido Dondus]

Thank u vekia for all of ur help. Yes ,i will use ur code. Its easier for me this way, cause im not coder. I use theming book for setting my store, but the book is for begginers and for prestashop 1.3 and in the book, there is not much about codeing. Actualy didnt find nothing about custom fonts either .

 

So to put this simple, i would be lost without ur help I was googling like crazy, how to set this up,and i didnt find nothing. When i first saw ur 1st response which was : well, the best way to change fonts is to use CSS styles , i looked in the air and sad to myself: omg, this guy is pro, and hes talking Klingon to me. But, when i refrazed my question, u helped me alot with detailed explanation. I guess , now i just need to figure this out,where to put code and play around alittle to see how will i manage this font thingy.

 

thank u for ur time and respect

[CUBE-IN]

Better way is to use google fonts for example:

<link href='http://fonts.googleapis.com/css?family=Dosis:200,300,400,500,600,700,800&subset=latin,latin-ext' rel='stylesheet' type='text/css'>

and then use it in CSS.

Edited February 14, 2013 by CUBE-IN (see edit history)

[vekia]

Better way is to use google fonts for example:

<link href='http://fonts.googleapis.com/css?family=Dosis:200,300,400,500,600,700,800&subset=latin,latin-ext' rel='stylesheet' type='text/css'>

and then use it in CSS.

 

i don't think so, in my opinion it isn't better way

[Fido Dondus]

Ok, we got here 2 coders and one total noob Proobably both of techiques which u guys mentioned, has PROS and CONS. Can we talk about them?

 

Why do u think is one solution better than the other?

[vekia]

Well, i think that It's better to host own fonts, imagine that some day google service will be down and font's from google will not work on your website. With own host for fonts you can be sure that it will work well.

 

Moreover, you can use ANY font you want, just upload font file to your hosting, prepare a css and use it anywhere you want. With google fonts you can only use their fonts available here: http://www.google.com/webfonts

[Fido Dondus]

I thought that googlefont users,and other font technics users will replay with their appinion, so i can easier decide. Ur arguments are quite powerfull vekia. Non independable of anythingh, like ur own master of ur font magic

 

So for example if i wont to change fonts in module, lets say that module is the one for categories, i need to paste ur code in to css ,under the module part?

[Chrisz]

This is how i add the contact details to the default theme in PS1.5.3

 

Note: code cribbed from blockcontactinfos.tpl and tweaked a little ...

 

[update 3 April 2013]: The display of the blockcontactinfos variables no longer works as of 1.5.4 because the variables now appear to be stored in the smarty cache not against smarty root and so are not available in the main content area ... there may be a solution to retrieve them out of the cache when not in the footer but I am not a smarty expert ... sorry!

 

Edit contact-form.tpl and before this line:

 

<p class="bold">{l s='For questions about an order or for more information about our products'}.</p>

 

Add this code:

 

{if $blockcontactinfos_company != ''}<span class="contact-details-company">{$blockcontactinfos_company|escape:'htmlall':'UTF-8'}</span>{/if}
{if $blockcontactinfos_address != ''}<pre class="contact-details-address">{$blockcontactinfos_address|escape:'htmlall':'UTF-8'}</pre>{/if}
{if $blockcontactinfos_phone != ''}<p class="contact-details-tel">{l s='Tel:' mod='blockcontactinfos'} {$blockcontactinfos_phone|escape:'htmlall':'UTF-8'}</p>{/if}
{if $blockcontactinfos_email != ''}<p class="contact-details-email">{l s='Email:' mod='blockcon1tactinfos'} {mailto address=$blockcontactinfos_email|escape:'htmlall':'UTF-8' encode="hex"}</p>{/if}

 

I have included a class for each contact element so you can format as you want but this should be enough to get you going:

 

edit the global.css and add this at the end (where I usually add my changes)

.contact-details-company{
font-weight:bold;
}
pre.contact-details-address{
font:normal 11px/14px Arial, Verdana, sans-serif !important;
margin-bottom:10px;
}

 

HTH

Chris

Edited April 3, 2013 by Chrisz (see edit history)

[Fido Dondus]

Thanks Chrisz, i think this topic will be great help for begginers like me who try to learn something new.And great guide for font coding.

Respect

[vekia]

I want to ask whether you can make a product that has a different price range

 

 

wrong topic my friend, and you added got a lot of unavailable images,i deleted it

[l3msip]

Just to chime in on the above question regarding css3 font face or google web fonts.

 

1st google web fonts uses css font face behind the scenes.

 

2nd, it has a couple of advantages over locally hosted fonts:

 

a) They are licenced for web embeding. Many fonts are not, you cant just use any old font (well legally you cant)

There is a decent chance if you are using a popular google font, it will already be cached by the users browser, so load quicker.

 

That said, there is a slim chance the service could go down, and you are limited to their catalogue of fonts.

[vekia]

Just to chime in on the above question regarding css3 font face or google web fonts.

 

1st google web fonts uses css font face behind the scenes.

 

2nd, it has a couple of advantages over locally hosted fonts:

 

a) They are licenced for web embeding. Many fonts are not, you cant just use any old font (well legally you cant)

There is a decent chance if you are using a popular google font, it will already be cached by the users browser, so load quicker.

 

That said, there is a slim chance the service could go down, and you are limited to their catalogue of fonts.

 

you've got right my friend

[radus]

There must exist a override to load the fastest loadable fonts: either the google-hosted, or same version but locally hosted.

If you carry both, the script would choose fastest methos. Maybe the person already has the fonts in cache.

I remember I saw this approach somewhere. Please repost here if you find it.

[shahriar]

you've got right my friend

 

sure you can, for example i've got font in fontname.otf file

 

you have to insert this code into css file:

@font-face {
font-family: fontname;
src: url('fontname.otf');
}

next you can use this font by (example class)

 

.newfont {font-family:fontname;}

then add class to sample span like below:

 

<span class="newfont">Sample text - my new font usage</font>

 

Hello, 

 

can you tell please what file exactly we have to put the code , there is lots of css file

[vekia]

these css styles you can paste into the global.css file located in /css/ subdirectory in your theme dir

[shahriar]

these css styles you can paste into the global.css file located in /css/ subdirectory in your theme dir

@import url("grid_prestashop.css");

/* ************************************************************************************************

GENERAL STYLE

************************************************************************************************ */

* {

margin: 0;

padding: 0;

}

ul, ol {

list-style: none;

margin: 0;

}

@font-face {

font-family: fontname;

src: url('XRoya.otf');

}

.newfont {font-family:XRoya;}

 

That's ok ? 

 

Im using multistore and i want to RTL theme to use this font 

[shahriar]

in global.css using this font , font-family:"Trebuchet MS"

 

But where they definition this one . it is not located in global.css , but they using all over global.css this font , i think i have to replace my font with this one , but dont know where