logo
Welcome to our new AbleCommerce forums. As a guest, you may view the information here. To post to this forum, you must have a registered account with us, either as a new user evaluating AbleCommerce or an existing user of the application. For all questions related to the older version of Gold and earlier, please go to AbleCommerce Gold forum. Please use your AbleCommerce username and password to Login. New Registrations are disabled.

Notification

Icon
Error

Options
Go to last post Go to first unread
SteveFeher  
#1 Posted : Friday, August 23, 2019 11:28:55 AM(UTC)
SteveFeher

Rank: Member

Groups: Developers, HelpDesk, Registered
Joined: 11/1/2018(UTC)
Posts: 29

Really need to use a Google Font for branding/consistency for a client site.
Struggling to get the font to install correctly.

Need to use Google's Cinzel font.

Several questions:

1.) Where/how can I install the call to Google Font API in the header? I can't seem to locate the correct header file to add this to the code.
I need to add :
<link href="https://fonts.googleapis.com/css?family=Cinzel:400,700%7CSource+Sans+Pro:400,600,700" rel="stylesheet">
to the header file so that the CSS can pick up the font.

2.) There's options to update in CSS, but I'm unsure which is best to use.
custom.css -- all customizations should be here, I think.
fonts.css -- could this update the listing of available fonts in the Typography section of the CMS? This might be better for end-users.
skin.css -- I thought that this was where some customizations were stored (I read another post that gave me that impression, but I could be wrong.)


3.) Is there a 'best practice' for inclusion of Google Fonts? I don't see any references in the help files/forums, but I can't be the only person dealing with this.



Many thanks!

Wanna join the discussion?! Login to your AbleCommerce Forums forum account. New Registrations are disabled.

MikeR  
#2 Posted : Friday, August 23, 2019 12:06:24 PM(UTC)
MikeR

Rank: Advanced Member

Groups: Administrators, Developers, Registered, HelpDesk, System, Admin
Joined: 10/18/2018(UTC)
Posts: 183

Thanks: 1 times
Was thanked: 6 time(s) in 6 post(s)
Hi Steve,

Shouldn't be difficult but I couldn't figure it out :), I've asked the developers to help.
Thank you for your support!
Mike Randolph
AbleCommerce.com
shari  
#3 Posted : Monday, August 26, 2019 2:52:37 AM(UTC)
shaharyar

Rank: Advanced Member

Groups: Admin, Developers, Registered, HelpDesk, Authorized User
Joined: 10/5/2018(UTC)
Posts: 703

Thanks: 5 times
Was thanked: 113 time(s) in 112 post(s)
Hi Steve,

To use the Cinzel Google Font at the store level you need to follow these steps.

1- Please open the file: \Website\Themes\Sample\Views\Shared\_ThemeStyles.cshtml
This path is for the default theme i-e sample. If you are using custom theme then update the path accordingly.

Add the link tag at the end of the file and save.

Code:
<link href="https://fonts.googleapis.com/css?family=Cinzel:400,700%7CSource+Sans+Pro:400,600,700" rel="stylesheet">


2- Now open the file: C:\AbleCommerce9\trunk\Website\Themes\Sample\Skin.xml
This path is for the default theme i-e sample. If you are using custom theme then update the path accordingly.

Add this line of code to the list of fonts.
<Font>Cinzel</Font>

Code:
<Fonts>
    <Font>Arial</Font>
    <Font>Arial Black</Font>
    <Font>Bookman</Font>
    <Font>Comic Sans MS</Font>
    <Font>Courier</Font>
    <Font>Courier New</Font>
    <Font>Garamond</Font>
    <Font>Geneva</Font>
    <Font>Georgia</Font>
    <Font>Helvetica</Font>
    <Font>Impact</Font>
    <Font>Palatino</Font>
    <Font>Sans Serif</Font>
    <Font>Source Sans Pro</Font>
    <Font>Times</Font>
    <Font>Times New Roman</Font>
    <Font>Trebuchet MS</Font>
    <Font>Verdana</Font>
  </Fonts>


3- Now log in to store as an admin and visit any page from the retail side. Turn on the editing mode and open the CSS style editor from the left sidebar and then from the Typography section select the Cinzel font.

I am sharing the screenshot for your help.

style editor.PNG (88kb) downloaded 0 time(s).

Let me know if you have any questions.







Users browsing this topic
Similar Topics
Include Google fonts in Theme? (General Questions)
by sweeperqb 5/3/2022 10:22:17 AM(UTC)
Forum Jump  
You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.