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!
|
|
|
|
|
|
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. |
|
|
|
|
|
|
Rank: Advanced Member
Groups: Admin, Developers, Registered, HelpDesk, Authorized User
Joined: 10/5/2018(UTC)
Posts: 704
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.
|
|
|
|
|
|
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.
Important Information:
The AbleCommerce Forums uses cookies. By continuing to browse this site, you are agreeing to our use of cookies.
More Details
Close
