Replacing default font with custom font?

[matmatoo]

Hey everyone!

Well, I have migrated from osCommerce to PrestaShop and I just have to say... how FANTASTIC is this?! Amazing support, easy install/customising, it has it all! Thanks heaps PrestaShop!

One question however.. my website by default, uses Arial or something similar (not sure exactly but its just the default font) and I wish to upgrade the default font to a purpose made font for my website.

Can anyone PLEASE tell me how to go about replacing the default font with my own font?

I've searched the web to no avail so would appreciate someone on here showing me.


Thanks heaps in advance.


Cheers,
Matt

[matmatoo]

Anyone? I would really appreciate your help!

Matt

[shokinro]

First the font on web page is for browser to use, so the font you specify in your website must exists at client's computer.
If the client does not have the font you specified, it will choose a similar ones.

So even if you specified a custom font, if client doesn't install the font, then it will not be used.

By the way, you can change default font by changing "font-family" in CSS file at /themes/yoursitetheme/css/global.css
(starting from line# 15 at ver 1.3.2.3 of PrestaShop)

body {
   background-color: white;
   font-size: 11px;
   font-family: Verdana, Arial, Helvetica, Sans-Serif;
   color: #5d717e;
   text-align: center
}

*Start with the font you want, and always end with a generic family, to let the browser pick a similar font in the generic family, if no other fonts are available.

[simpson7647]

hi there, ive read this post and found it rather interesting.

Im looking to change the font in my category block to a custom one but if 99% of the time, its going to simply change the font to a standard one, then there's really not much point.

Is it possible for to insert an image in the category block in which ill decide the background and add my custom font?

this way people who don't have the font installed should be able to see it as its an image?

If it works, how would i do this please?

Many thanks and kind regards,

Ryan

[shokinro]

I think you should be able to do that.
What you have to do it find related tag and set the background image in style file.

Check this thread on how where to find related style code.
http://www.prestashop.com/forums/viewthread/91337/#379684

[simpson7647]

thanks for the reply.

Sorry but i dont see what you mean.

Say ive created the image with the text in it.
Now how would i use that image to replace a category title in the category block on the homepage?

thanks

[shokinro]

If you just want to use image instead of text for the title of category block, you can do this by replacing one line in file /modules/blockcategories/blockcategories.tpl

replace this line

<h4>{l s='Categories' mod='blockcategories'}</h4>

with this line

<h4><img src="{$base_dir}/img/category.jpg" /></h4>

Please Note:
create exactly size of image category.jpg and put it under /img/ folder.

[simpson7647]

thank you very much for that.

So thats for the title of category block.

But what about for the other titles like home, special, new products?


Thank you very much indeeed

[shokinro]

you can do the same way, just go there find the module and replace the title line.

the modules are

/modules/homefeaured/
/modules/blocknewproducts/
/modules/blockspecials/

[simpson7647]

any chance you can list which titles ill find in which module please??


So then, i do as you posted before with the categories title?

Also how can i find out the pixel size of the blocks?

Many many thanks indeed

[shokinro]

they are all the same, it appears in top (2nd or 3rd line) theme file of the block module.
It is embraced with "h4" tag and with attribute "title", you will not miss it.

replace the line with same code I posted previously, but change the image file name. That's it.

[simpson7647]

Thanks for reply
Origionally the block title colour was changed by me, will this affect anything?

Thanks

[shokinro]

if you change to use image, then has nothing to with what color you set in the style.
but your image's back ground must be consistent with your page style and the block style, otherwise, it will look ugly.

[simpson7647]

thank you very much.

ill give it a go

[simpson7647]

you can do the same way, just go there find the module and replace the title line.

the modules are

/modules/homefeaured/
/modules/blocknewproducts/
/modules/blocknewproducts/

just a quick question, were you supposed to write blocknewproducts twice?


So the codes to edit for the other titles are going to be in blockfeatured and blocknewproducts?

thanks

[simpson7647]

one other question please.

after going, themes-mysite theme-css and then global.css

I was looking for the top menu bar.

It comes as one long strip so how would i enter the texts in there so that when you click them, they will actually go to the page? :/

thanks

[simpson7647]

If you just want to use image instead of text for the title of category block, you can do this by replacing one line in file /modules/blockcategories/blockcategories.tpl

replace this line

<h4>{l s='Categories' mod='blockcategories'}</h4>

with this line

<h4><img src="{$base_dir}/img/category.jpg" /></h4>

Please Note:
create exactly size of image category.jpg and put it under /img/ folder.

I tried this and it changed the entire categories block background rather than the title 'category' block

thanks

[shokinro]

I tried this and it changed the entire categories block background rather than the title ‘category’ block

Can you show me the URL so that I can take a look to see what went wrong?

[simpson7647]

I changed it straight back and website is offline currently.

Ill be back after work in 8/9 hours so please message me and ill re-do it then.

Thanks

[simpson7647]

bumpp, anyone able to help?


Many thanks

[Enoteca]

If you just want to use image instead of text for the title of category block, you can do this by replacing one line in file /modules/blockcategories/blockcategories.tpl

 

replace this line

 

<h4>{l s='Categories' mod='blockcategories'}</h4>

with this line

<h4><img src="{$base_dir}/img/category.jpg" /></h4>

Please Note:

create exactly size of image category.jpg and put it under /img/ folder.

 

 

Can anyone update the above code for PS 1.5 ?  The h4 tags are not to be found anywhere.

[vekia]

hello

 

this is a part of default blockcategories module:
 

<!-- Block categories module -->
<div id="categories_block_left" class="block">
	<h4 class="title_block">{l s='Categories' mod='blockcategories'}</h4>

from 1.5.6.2 version