Thank you for your theme. I just bought and installed it a few hours ago and was able to get up and running quite quickly.
I've currently loaded two fonts via Typekit, Adobe Garamond (adobe-garamond-pro) and Brandon Grotesque (brandon-grotesque). Both these fonts seems to have loaded successfully, but the assignments seem to be faulty. My questions are as follows:
How can I assign specific fonts to specific weights (H1, H2-H6 etc.)? Currently, everything except for the site title (which is currently replaced with the logo) display in the serif font (Adobe Garamond). I want to get the main navigation and other titles (like on the FAQ page) to Brandon Grotesque.
How can I change the body copy text size to increase it. I did find a support thread where you'd recommended using "a {font-size: 20px !important;}" to change the type size, but this affected mainly the titles and navigation menu.
Finally, for more typographic control, is there a plugin that you would recommend that might make editing these aspects easier?
Once again, thanks a lot for this theme, I'm really happy with how quick it was do deploy and get the hang of.
1. This can be managed through TypeKit directly, go to typekit site and go to Kits then click on the Kit Editor button, follow the instructions below or watch this video I recorded.
The TypeKit window will appear, on the top left in the Selectors add .wrapper if you want the font to show on your whole site, or any other selector specific for a button, menu or wherever you want to use it.
Click Save Changes, and check your site to see it live.
2. We don't have a typography manager where you can set the sizes for the site but we can help you out with custom CSS on this, I couldn't get which part of the body text you want to change, the links or the whole body text?
3. The answer for this is the one above, unfortunately this theme does not have more control on font sizes.
Thanks a lot for your reply. I'll give the suggestion of editing via the kit editor a shot. I think the .wrapper instruction should help fix it, because I mentioned all the tags that I wanted with that particular font. I'll update as soon as I do this.
The x-height of Garamond is a little small, which is why it renders small in the same point size compared to other fonts. The text I mainly want to increase the size of is the body text, especially that of each blog post, since it is essential for it to render clear and large.
I'm not sure how the increase in point size would affect the line spacing, but just in case, I need to increase it, could you also show me how I could do that?
Once again, thank you for your detailed response, I appreciate it greatly!
Update: I tried updating the kit, but it doesn't seem to have fixed the issue.
So then I changed the 'Primary Font' to Brandon, and the headings show in the correct font now, but all body text (in blogs and even on the FAQ page) is also being set in Brandon, instead of Garamond.
The body text now looks exceedingly tiny (because Brandon has an even lower x-height), so I would need to increase the point size of the body text significantly.
The site also seems to be rendering with the same weight of the font throughout, so could you please show me how I can change the:
individual fonts for each title (widget titles, H1-H6)
(whole) body text (to Garamond)
weights of specific titles/headings to bolder versions of the same font
The titles of the FAQ seem like they have a tighter tracking/letterspacing. Is there a way I can loosen this up a bit?
I think I will need to have a closer look at it, could you include your site login credentials and your TypeKit account so I can see how you have implemented the fonts?
I have managed to fix some of your problems using Custom CSS, as I could see from the screenshots the Kit is set up right but I don't know why it is not including the font on the body.
Please see the Custom CSS area and there you can change anything you want, which headings you want to make bolder/lighter?
Thanks a lot! That's exactly how I wanted it to be. The remaining edits I wanted to make are as follows:
to change the H2 weight to bold (this is just for titles that need emphasis)
To change H5 to Garamond, for in-body copy headers that look similar to the body
Form labels (on contact form, blog subscription form) to smaller, lighter, all caps (Brandon). Currently it has defaulted to a super bold version of Brandon, and jumps right off the screen in a not-so-good way.
To change the overall point size of the body copy text (Gramond) to 18 or 20px (depending on how it looks on the site).
Once more, thank you for your prompt assistance with this!
Thanks for your response. Sorry I was mistaken there, the blog sub-heads are H3, not H2. Also, this really wasn't an issue..I can just use the bold function to embolden a heading. Thanks for the help with this in any case!
Two last (hopefully) questions, how do I change the blog post comment titles (currently "SHARE YOUR THOUGHTS" with the "Please do not use offensive vocabulary." byline under it?
Also, to keep the layout consistent with the desktop version of the header, is there a way the logo can be centered in the mobile header also?
Your site is loading extremely slow so it was really an annoying process to try these changes.
Question 1 — If you want to bold inside the blog post use this in your Custom CSS:
.blog h3 {
font-weight: 400;
}
Question 2 — To translate or rename theme strings, you can do this via Loco Translateplugin. If you don't have it, please install and activate the plugin in your WordPress site.
Click "New Language" for the current active theme (if you didn't created it yet, otherwise ignore this step). On the new language page, choose these options – Screenshot
After that you will be redirected to the editing screen for theme translations. Before you continue with your translations make sure the current language of your site is selected – Screenshot
Follow these instructions to learn how to translate strings – Screenshot
The changes will be applied immediately – Screenshot
Note: Translation files will be saved to wp-content/themes/{theme-name}/languages folder or global directory of theme translations: wp-content/languages/themes/ (based on your choice).
If you have saved your translations inside theme folder, always save a backup of languages/ folder (inside the theme) when there is new theme update. After you update the theme (languages folder will be replaced with an empty folder), just move the backup files you previously saved to the same languages directory and your changes will still be applied.
Question 3 — I have added this CSS to your Custom CSS > Responsive in XS - Extra Small Screen:
Hi,
Thank you for your theme. I just bought and installed it a few hours ago and was able to get up and running quite quickly.
I've currently loaded two fonts via Typekit, Adobe Garamond (adobe-garamond-pro) and Brandon Grotesque (brandon-grotesque). Both these fonts seems to have loaded successfully, but the assignments seem to be faulty. My questions are as follows:
Once again, thanks a lot for this theme, I'm really happy with how quick it was do deploy and get the hang of.
Hi there,
1. This can be managed through TypeKit directly, go to typekit site and go to Kits then click on the Kit Editor button, follow the instructions below or watch this video I recorded.
2. We don't have a typography manager where you can set the sizes for the site but we can help you out with custom CSS on this, I couldn't get which part of the body text you want to change, the links or the whole body text?
3. The answer for this is the one above, unfortunately this theme does not have more control on font sizes
.
Best regards,
Laborator Team
Hi Art,
Thanks a lot for your reply. I'll give the suggestion of editing via the kit editor a shot. I think the .wrapper instruction should help fix it, because I mentioned all the tags that I wanted with that particular font. I'll update as soon as I do this.
The x-height of Garamond is a little small, which is why it renders small in the same point size compared to other fonts. The text I mainly want to increase the size of is the body text, especially that of each blog post, since it is essential for it to render clear and large.
I'm not sure how the increase in point size would affect the line spacing, but just in case, I need to increase it, could you also show me how I could do that?
Once again, thank you for your detailed response, I appreciate it greatly!
A
Update: I tried updating the kit, but it doesn't seem to have fixed the issue.
So then I changed the 'Primary Font' to Brandon, and the headings show in the correct font now, but all body text (in blogs and even on the FAQ page) is also being set in Brandon, instead of Garamond.
The body text now looks exceedingly tiny (because Brandon has an even lower x-height), so I would need to increase the point size of the body text significantly.
The site also seems to be rendering with the same weight of the font throughout, so could you please show me how I can change the:
Thank you.
Hi qfactor,
I think I will need to have a closer look at it, could you include your site login credentials and your TypeKit account so I can see how you have implemented the fonts?
Best regards,
Laborator Team
Hi there,
I have managed to fix some of your problems using Custom CSS, as I could see from the screenshots the Kit is set up right but I don't know why it is not including the font on the body.
Please see the Custom CSS area and there you can change anything you want, which headings you want to make bolder/lighter?
Best regards,
Laborator Team
Thanks a lot! That's exactly how I wanted it to be. The remaining edits I wanted to make are as follows:
Once more, thank you for your prompt assistance with this!
Just an update. I figured the last one (body copy point size, weight, colour) by working with your custom CSS. That helped a lot, thank you.
The mobile nav menu still seems to be rendering in Garamond. Is there a way I could switch that back to Brandon?
Hi again,
Best regards,
Laborator Team
Hi,
Thanks for your response. Sorry I was mistaken there, the blog sub-heads are H3, not H2. Also, this really wasn't an issue..I can just use the bold function to embolden a heading. Thanks for the help with this in any case!
Two last (hopefully) questions, how do I change the blog post comment titles (currently "SHARE YOUR THOUGHTS" with the "Please do not use offensive vocabulary." byline under it?
Also, to keep the layout consistent with the desktop version of the header, is there a way the logo can be centered in the mobile header also?
Hi again,
Your site is loading extremely slow so it was really an annoying process to try these changes.
Question 1 — If you want to bold inside the blog post use this in your Custom CSS:
.blog h3 { font-weight: 400; }Question 2 — To translate or rename theme strings, you can do this via Loco Translate plugin. If you don't have it, please install and activate the plugin in your WordPress site.
Note: Translation files will be saved to wp-content/themes/{theme-name}/languages folder or global directory of theme translations: wp-content/languages/themes/ (based on your choice).
If you have saved your translations inside theme folder, always save a backup of languages/ folder (inside the theme) when there is new theme update. After you update the theme (languages folder will be replaced with an empty folder), just move the backup files you previously saved to the same languages directory and your changes will still be applied.
Question 3 — I have added this CSS to your Custom CSS > Responsive in XS - Extra Small Screen:
header.mobile-menu .mobile-logo .logo { width: 100%; display: block; margin: 0 auto !important; text-align: center; position: absolute; }Best regards,
Laborator Team