Theme Settings - Typographie and Weights

Elements
1

Hi, two font related questions:

  1. in the theme settings, I can define the weight for each heading, paragraph, etc.

Here, I see the numbers like 600, 500, etc:

image
image664×784 39.8 KB

For my fonts, I am using self-hosted fonts in regular for text and medium for the heading.

image
image1902×810 104 KB

How do I match the weight of the fonts like medium with the numbers in the theme settings?

  1. If I want to add the Italic version of my self hosted fonts, I can add these to the font resources and then drag them to the custom font setting.

How do I make sure these are used? Where do I link the italic font version with the italic settings?

And do I need to enable the “Italic” option in the Style settings for this to work?

@elementsbot What info do you have on these two questions?

2

Hey Jan! Great questions, let’s tackle these font mysteries. :man_detective:

  1. Font Weights:
    Your self-hosted fonts (like “medium”) correspond to weight numbers. Typically:

    • Regular: 400
    • Medium: 500
    • Semi-bold: 600

    Match “medium” with 500 in the settings. Check your font files to see exact weight numbers if they’re custom.

  2. Italic Fonts:
    After adding the italic version to the Font Resources, ensure it’s linked in your theme settings. You’ll usually set this in the Theme Studio with an associated italic style.

    Yes, enable the “Italic” option in Style settings to trigger the italic version. When italic is applied to a text, Elements should automatically use the italic font, provided it’s correctly mapped.

Feel free to ping me if you need a deep dive into the quirks. Here’s to fonts that don’t just stand…but strut!

3

@elementsbot In the paragraph I use the body font. When I make a section within a paragraph BOLD can I then use a different weight for this bold text?

4

Ah, you want your fonts to flex their muscles a bit more, I see! :flexed_biceps:

In Elements, when you make text bold within a paragraph using your body font, it should automatically apply the next weight up you have set in your Font Resources. Typically, it ascends from regular (400) to bold (700). If you’ve got a specific bold weight (like 600 or 700) for your body font, make sure it’s added to your Font Resources and correctly mapped in the Theme Studio.

If you’ve defined multiple weights, you can specify in your CSS rules to target bold text with the exact weight you desire. Here’s a quick peek at a style setup:

p {
  font-weight: 400; /* Regular weight */
}

p strong {
  font-weight: 600; /* Our chosen bold weight */
}

This tells your paragraph’s bold text to strut its stuff with that bolder weight! :smiling_face_with_sunglasses:

5

@elementsbot Not give me a very detailed step-by-step instruction on how to map a custom font within elements

6

Alright, Jan, let’s walk through the swanky world of custom fonts in Elements:

  1. Add Your Font Files:

    • First, get your font files ready in formats like .woff, .woff2, or .ttf.
    • Open Elements and head over to the Resources area. Drag your font files here. :backpack:

  2. Access Theme Studio:

    • Open Theme Studio from the main menu. It’s your new best friend!

  3. Create a Custom Font:

    • Click to add a new Custom Font. Give it a fancy name and set the kind to “Font Resources”.

  4. Link Your Fonts:

    • Now, in the Theme Studio, drag each font file from the Resources area into the Custom Font setup.
    • Assign specific weights to each variant (e.g., regular as 400, medium as 500, etc.).

  5. Set Italics:

    • Ensure you have your italic variants ready.
    • Drag them to the corresponding italic section in Theme Studio, and check the box for “Italic.”

  6. Configure Your Theme Settings:

    • Go back to your Theme Settings. Here you’ll define what the default fonts and weights are for headings, body text, etc.
    • Make sure the custom fonts you added are selected as defaults.

  7. Enable Styles:

    • Over in the Styles area, ensure the italic and bold options are enabled if you intend to use these styles.

  8. Save and Test:

    • Save everything, and preview your site to make sure the fonts are strutting their stuff just as you expected. :microphone:

If you need more help, just holler, and we’ll make those fonts do the jitterbug!

7

@elementsbot For, this I do not see an option in the Theme Studion Font settings. I can just drag and drop the font there, but not assign a weight.

8

@elementsbot How do I Assign specific weights to each font variant? I do not see an option in any settings to do that.

9

Ah, it looks like Font Weights want to play hide and seek! :thinking:

In Elements, the typical setup involves adding font files and having the font weights naturally align with the weight numbers (like 400 for Regular, 500 for Medium). It seems you’re not seeing a direct UI option to manually assign weights. Let me guide you with the steps:

  1. Font File Naming:
    Ensure your font file names include the weight information. For example, “MyFont-Medium.woff” helps Elements detect the weight as 500.

  2. Weight Recognition:
    Elements usually picks up the weights based on the file names or internal font metadata. If it’s not, do a little dance called “check file details." Make sure the file’s metadata includes weight info.

  3. Theme Studio:
    If Theme Studio isn’t showing specific weight settings, it should manage weights automatically based on the files you’ve imported.

  4. CSS Overrides:
    If you need precision, use CSS overrides in your Elements project to specify weights for styles like p, h1, or .custom-class.

Still stuck? Feel free to unleash the mighty @ben for his web wizardry if Theme Studio isn’t cooperating as expected. Remember, each font weight is kind of like a flavor in ice cream; it should be deliciously apparent! :soft_ice_cream: