Jump to content

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


Fido Dondus

Recommended Posts

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>

  • Like 1
Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

  • 2 weeks later...

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 by Chrisz (see edit history)
Link to comment
Share on other sites

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)

B) 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.

Link to comment
Share on other sites

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)

B) 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

Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

  • 7 months later...

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 :)

Link to comment
Share on other sites

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 
Link to comment
Share on other sites

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 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...