The information in this thread might be outdated
If the solution did not help, please, check our Help Portal or contact Ecwid Team.
 
 
Thread Tools Display Modes
  #1  
Old 07-08-2014, 06:52 AM
Hannah Kelly's Avatar
Hannah Kelly is offline
Junior Member
 
Join Date: Jun 2014
Posts: 4
Default

How to add Google Fonts


I want to use a google font on on my online store (called 'PT Sans').
The instructions tell me to add this code to this code to my website:

<link href='http://fonts.googleapis.com/css?family=PT+Sans' rel='stylesheet' type='text/css'>

and then it says i should integrate the fonts into my CSS, and it gives me this code:

font-family: 'PT Sans', sans-serif;

I'm confused as to where I should add the first code? i've read another forum thread about google fonts, and someone said to add it to my 'basic web page code' but where can i find that?



Last edited by Hannah Kelly; 07-08-2014 at 07:06 AM. Reason: to provide more informations
  #2  
Old 07-09-2014, 09:01 AM
Arthur Belostotsky's Avatar
Arthur Belostotsky Arthur Belostotsky is offline
 
Join Date: Jun 2014
Posts: 466
Default

Quote:
Originally Posted by Hannah Kelly View Post
I want to use a google font on on my online store (called 'PT Sans').
The instructions tell me to add this code to this code to my website:

<link href='http://fonts.googleapis.com/css?family=PT+Sans' rel='stylesheet' type='text/css'>

and then it says i should integrate the fonts into my CSS, and it gives me this code:

font-family: 'PT Sans', sans-serif;

I'm confused as to where I should add the first code? i've read another forum thread about google fonts, and someone said to add it to my 'basic web page code' but where can i find that?


Hello Hannah,
To integrate any Google Font to your online store, you should add the link to the google stylesheet to the code of the page where your Ecwid shopping cart is installed and edit the “font-style” parameter of the text element you want to change.

1) At first you should edit the code of the page, where you installed Ecwid.
If you installed it manually - this is the page where you pasted the Product Browser code.
If you use our plugin for Wordpress or Joomla, this page was created on installing the plugin.

Open this page in edit mode and paste here the link below:
HTML Code:
<link href='http://fonts.googleapis.com/css?family=PT+Sans' rel='stylesheet' type='text/css'>
Don’t forget to save it before we’ll go to the next step.

2) Go to Ecwid Control Panel > System settings > Design > CSS Themes

At the bottom of this page you can see the Standard Theme code.
Copy it completely and paste to any text editor.

In this code you can see a list of the elements of your Ecwid store.
Every element has a headline, so you can look about there easily.

Let’s suppose you’d like to change the product links style to PT Sans.
So we take this part of the standard theme code:
Code:
/* Product name links */
div.ecwid-productBrowser-productNameLink a,
div.ecwid-productBrowser-productNameLink a:active,
div.ecwid-productBrowser-productNameLink a:visited {
    font: normal 18px helvetica, arial, verdana, sans-serif;
    color: #1e2c38;
    text-decoration: underline;
}
And change the font parameter value to this:
Code:
font: normal 18px 'PT Sans', sans-serif;
Then open your CSS Theme (Ecwid Control Panel > System settings > Design) or create one if you haven’t done so yet (‘New CSS Theme’ button).
Paste the code we created earlier to your theme, then save and activate it.
As a result, the style of all product name links will be changed to PT Sans.

Please learn more about changing Ecwid design here: http://help.ecwid.com/customer/porta...e-ecwid-design
The Following User Says Thank You to Arthur Belostotsky For This Useful Post:
Hannah Kelly (07-12-2014)
  #3  
Old 07-12-2014, 05:22 AM
Hannah Kelly's Avatar
Hannah Kelly Hannah Kelly is offline
Junior Member
 
Join Date: Jun 2014
Posts: 4
Default

Thankyou! Does this still apply if I'm using Ecwid through Crazy Domains website hosting?
I don't think crazy domains allows you to edit the html pages.
  #4  
Old 07-14-2014, 03:09 PM
Arthur Belostotsky's Avatar
Arthur Belostotsky Arthur Belostotsky is offline
 
Join Date: Jun 2014
Posts: 466
Default

Quote:
Originally Posted by Hannah Kelly View Post
Thankyou! Does this still apply if I'm using Ecwid through Crazy Domains website hosting?
I don't think crazy domains allows you to edit the html pages.
HI Hannah,
Glad to help!

If you use Crazy Domains only as web hosting, an ability to edit pages of your website depends firstly not from Crazy Domains (or any other hosting company) but from the software that you use to manage the content on your site.
I.e. your hosting is a storage where your site is placed physically.
You can install any CMS (content management system) you like to this storage and manage your site through it (edit pages, create sections, customize design, install plugins to extend a functionality).

In case of you use Crazy Domains not only as a web hosting, but also as a site-builder, it may be possible that it doesn’t allows you to edit html-code of the pages.
Please contact Crazy Domains’ support to learn if this customizing is possible.

Please let us know about result. I think it would be very helpful for other users.
  #5  
Old 07-14-2014, 07:19 PM
Thematizr.com's Avatar
Thematizr.com Thematizr.com is offline
Webpartner
 
Join Date: Jul 2012
Posts: 379
Default

That's not the only way to do that. For example, our design themes for Ecwid are using Google Fonts all the way, but we never ask our customers to edit the HTML of their page.

Basically, you would need to visit the URL that you can see in the 'href' parameter of the suggested font code - there by that URL will be a CSS code that you can simply copy and paste to your Ecwid CSS theme (before all other rules). Then use it in the actual rules as sir Arthur suggested. This way the custom font can go along with your store wherever you embed it.
__________________
Check out our latest ready-made designs for Ecwid:

Termion | Helata | Martina

Get 1 year of access to all our current and future themes.

Follow us on Twitter: @thematizr
 
The information in this thread might be outdated
If the solution did not help, please, check our Help Portal or contact Ecwid Team.

Tags
google fonts

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 06:48 PM.
Powered by vBulletin® Version 3.8.11. Copyright ©2000 - 2021, Jelsoft Enterprises Ltd.