RocketTheme - TOPIC: [Solved] Gantry v4.1.24 Google Font for whole Document (1/2)

Welcome Guest! Login

0 items Join Now

- Philipp Holz
- Newbie
- Posts: 17
- Thanks: 2
SOLVED Gantry v4.1.24 Google Font for whole Document

Posted 9 years 11 months ago
- Hello,
  
  I'm using Gantry v4.1.24 with Joomla 3.3.0 and I want to use a Goolg for all text elements on the page. But the font is just applied to h1 and h2.
  I searched the code but couldn't figure out where the code is added.
  I don't want to add this to a custom css file because I can configure it at the backend and I want to configure as few things as possible with custom files.
  Any ideas where the inline code h1, h2 { font-family: 'Source Sans Pro', 'Helvetica', arial, serif; } is added?
  
  Thanks!
#1099378
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13481
- Web Designer/Developer
Re: SOLVED Gantry v4.1.24 Google Font for whole Document

Posted 9 years 11 months ago
- 1. We deliberately only change the titles for a font change as using a custom font on the whole page can dramatically slow down your site.
  2. If you want to do it though then you will have to do it using some custom CSS. - the font settings are styled in CSS (not inline) and therefore you will need to write some custom CSS to effect an override.
  
  If you need help, Could you please post a URL to your site (this can be done in the secure area tab if you prefer) so we can look for you. Without a link to page where the problem is on your site it is quite hard for us to provide the best solution due to so many variables. We try to provide file names and line numbers for code changes and if changes have already been made then our advice may be incorrect.
  
  Regards, Mark.
- Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
#1099395
- Philipp Holz
- Newbie
- Posts: 17
- Thanks: 2
Re: SOLVED Gantry v4.1.24 Google Font for whole Document

Posted 9 years 11 months ago
- How do I use the font variable in the custom css?
  I tried
  p { font-family: @font; }
  but this didn't show any effect on the page. Am I using the wrong variable?
  
  regards
- Last Edit: 9 years 11 months ago by Philipp Holz.
#1099413
- prim
- Preeminent Rocketeer
- Posts: 17290
- Thanks: 217
Re: SOLVED Gantry v4.1.24 Google Font for whole Document

Posted 9 years 11 months ago
- Your site is set as offline - Please provide a login or set the site as online.
- Please reply with a direct link to the issue & create a new thread for each new issue.
  
  A template is only as good as the content that goes into it - DanG
#1099415
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13481
- Web Designer/Developer
Re: SOLVED Gantry v4.1.24 Google Font for whole Document

Posted 9 years 11 months ago
- You don't because that would be LESS not CSS. So, if you want to use that mixin then you will need to use a custom LESS file instead.
  
  As GANTRY4 now incorporates LESS. There are two recommended methods for dealing with your custom changes to the template. Unless you specifically want to use LESS then you should USE ITEM 1 below.
  
  1. For older templates (pre FRACTURE
  LESS compiler is not active), or for those of you that want to stick with traditional CSS, you can simply create a file called "<TEMPLATENAME>-custom.css" and put this file in the CSS folder of the template (where <TEMPLATENAME> is the name of the template e.g. rt_fracture). GANTRY4 will automatically load this CSS file. you can also have browser specific files by appending, for example, "-ie9" making the filename "<TEMPLATENAME>-custom-ie9.css"
  2. For those of you that want to use the power of
  LESS (compiled CSS), you can simply create a file called "template-custom.less" (that is the file name - don't change it) and put this file in the less folder of the template. Now clear your cache! GANTRY4 will automatically detect this file and automatically compile the LESS code therein and put it into the compiled css for your site (along with the other compiled LESS files from the template). Note that you can just put ordinary CSS in a LESS file but you are strongly encouraged to learn more about LESS as it will speed up your development and make it clearer.
  
  Do not change the CSS files in the compiled-css folder as these changes will be lost whenever Gantry 4 detects a change in a LESS file, or the cache gets cleared.
  
  For more information on LESS please see the documentation on Gantry 4 at http://www.gantry-framework.org . Also, see this tutorial http://www.rockettheme.com/forum/index.php?f=662&p=860738&rb_v=viewtopic#p860738 .
  
  Regards, Mark.
- Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
#1099416
- Philipp Holz
- Newbie
- Posts: 17
- Thanks: 2
Re: SOLVED Gantry v4.1.24 Google Font for whole Document

Posted 9 years 11 months ago
- yes, i created the file style-custom.less in the less folder.
  
  But the variable font does not seem to be initialied correctly.
  
  I think it is enough information at the offline page to see the error:
  
  This image is hidden for guests.
  Please log in or register to see it.
#1099418
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13481
- Web Designer/Developer
Re: SOLVED Gantry v4.1.24 Google Font for whole Document

Posted 9 years 11 months ago
- where did you get that @font from - as far as I can tell there is no such variable?
  
  The font-stacks are defined as classes in gantry-core.less
  
  Regards, Mark.
- Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
#1099648

Philipp Holz
Newbie
Posts: 17
Thanks: 2

Re: SOLVED Gantry v4.1.24 Google Font for whole Document

Posted 9 years 11 months ago

But at gantry-core.less are just the none-google fonts defined.
The google font is included somewhere inline for h1 and h2.

The @font variable feature/styledeclaration.php:

$lessVariables = array(
		'linkcolor'     => $gantry->get('linkcolor',     '#2698de'),
		'fontcolor'     => $gantry->get('fontcolor',     '#434343'),
		'heading1color'   =>$gantry->get('heading1color',   '#2698de'),
		'heading2color'   =>$gantry->get('heading2color',   '#2698de'),
		'heading3color'   =>$gantry->get('heading3color',   '#2698de'),
		'heading4color'   =>$gantry->get('heading4color',   '#2698de'),
		'heading5color'   =>$gantry->get('heading5color',   '#2698de'),
		'backgroundcolor'   =>$gantry->get('backgroundcolor',   '#ffffff'),
		'footerbackground'   =>$gantry->get('footerbackground',   '#dadada'),
		'headerbackground'   =>$gantry->get('headerbackgroundheaderbackground',   '#a50044'),		
		'font'   =>$gantry->get('font-family')
	);

Last Edit: 9 years 11 months ago by Philipp Holz.

#1099652

- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13481
- Web Designer/Developer
Re: SOLVED Gantry v4.1.24 Google Font for whole Document

Posted 9 years 11 months ago
- currently your site is broken... (see screenshot). Are you sure you don't have permissions issues too?
  
  The headings are not styled inline?
  
  Regards, Mark.
- Last Edit: 9 years 11 months ago by MrT.
- Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
#1099663

Philipp Holz
Newbie
Posts: 17
Thanks: 2

Re: SOLVED Gantry v4.1.24 Google Font for whole Document

Posted 9 years 11 months ago

#rt-logo {background: url(/images/wm_logo.png) 50% 0 no-repeat !important;}
#rt-logo {width: 151px;height: 65px;}
h1, h2 { font-family: 'Source Sans Pro', 'Helvetica', arial, serif; }

This is the code that is generated inline.

#1099668

Time to create page: 0.057 seconds