Important:
This support area is for Kalium 3 users only. Support for Kalium 4 has moved to our new platform at support.laborator.co. If you’re using Kalium 4, please create a new account there using your email and license key. A password will be sent to you automatically.

Okay
  Public Ticket #1217727
Typography issues
Closed

Comments

  •  1
    qfactor started the conversation
    June 24, 2017 at 9:50am

    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:

    1. 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.
    2. 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.
    3. 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,561
    Laborator replied
    June 27, 2017 at 8:22am

    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.

    • 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.


    Best regards,
    Laborator Team

      Documentation         Join Kalium Users Group

  •  1
    qfactor replied
    June 27, 2017 at 11:29am

    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

  •  1
    qfactor replied
    June 27, 2017 at 12:19pm

    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?

    Thank you.

  •  1,561
    Laborator replied
    June 28, 2017 at 7:23am

    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

      Documentation         Join Kalium Users Group

  •   qfactor replied privately
  •  1,561
    Laborator replied
    June 30, 2017 at 10:32am

    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

      Documentation         Join Kalium Users Group

  •  1
    qfactor replied
    June 30, 2017 at 11:18am

    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!

  •  1
    qfactor replied
    June 30, 2017 at 11:33am

    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?

  •  1,561
    Laborator replied
    July 3, 2017 at 1:16pm

    Hi again,

    1. Couldn't find the H2 headings on your site, can you please specify which H2 on your site you are referring to?
    2. The same as above, please specify where the H5 are located on your page.
    3. Added a Custom CSS code to fix the labels
    4. Mobile Menu converted to Brandon Font through CSS.

    Best regards,
    Laborator Team

      Documentation         Join Kalium Users Group

  •  1
    qfactor replied
    July 3, 2017 at 1:56pm

    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? 

  •  1,561
    Laborator replied
    July 3, 2017 at 3:03pm

    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.

    1. Then go to Loco Translate > Manage Translations
    2. 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
    3. 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
    4. Follow these instructions to learn how to translate strings – Screenshot
    5. 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:

    header.mobile-menu .mobile-logo .logo {
    width: 100%;
    display: block;
    margin: 0 auto !important;
    text-align: center;
    position: absolute;
}

    Best regards,
    Laborator Team

      Documentation         Join Kalium Users Group