How to change font weight?

  • Hi

    I’m using Roboto Font for my website. I downloaded the Roboto-Regular and Roboto-Bold fonts from the Google Fonts site and uploaded them to my website.

    Here is the CSS for roboto fonts in style.css in my child theme. Right now, I’m testing on my localhost WordPress website.

    /* Roboto Font */
@font-face {
    font-family: 'Roboto';
    src: url('https://192.168.1.10/wp-content/uploads/fonts/Roboto-Regular.woff2') format('woff2'),
        url('https://192.168.1.10/wp-content/uploads/fonts/Roboto-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('https://192.168.1.10/wp-content/uploads/fonts/Roboto-Bold.woff2') format('woff2'),
        url('https://192.168.1.10/wp-content/uploads/fonts/Roboto-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

    I wanted the titles and headings in bold to have 700 points in weight. So I changed it in Typography -> Headings -> Font Weight = 700. Headings are working fine.

    But, with the Gutenberg editor, how can I adjust the font weight for the bold text? For example, in paragraph block, when I select some words and on ‘Bold’ button (Ctrl+B), the font weight is 600 points. I want it to be 700 points by default.

    How do I do that?

    Thanks

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)

  • Hello,

    Please try to replace the previous code with this one and check.

    /* Roboto Font */
@font-face {
    font-family: 'Roboto-Regular';
    src: url('https://192.168.1.10/wp-content/uploads/fonts/Roboto-Regular.woff2') format('woff2'),
        url('https://192.168.1.10/wp-content/uploads/fonts/Roboto-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto-Bold';
    src: url('https://192.168.1.10/wp-content/uploads/fonts/Roboto-Bold.woff2') format('woff2'),
        url('https://192.168.1.10/wp-content/uploads/fonts/Roboto-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

    Please try and let us know if it is working well or facing the same issue.

    Thread Starter sysguides

    (@sysguides)

    Hi,

    Pasting it exactly did not work. I did some testing (I’m not good at CSS) and came up with the following. 

    /* Roboto Font */
@font-face {
    font-family: 'Roboto';
    src: url('https://192.168.1.10/wp-content/uploads/fonts/Roboto-Regular.woff2') format('woff2'),
        url('https://192.168.1.10/wp-content/uploads/fonts/Roboto-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto-Bold';
    src: url('https://192.168.1.10/wp-content/uploads/fonts/Roboto-Bold.woff2') format('woff2'),
        url('https://192.168.1.10/wp-content/uploads/fonts/Roboto-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

.blog-entry.post .blog-entry-header .entry-title a,
h1, h2, h3, h4,
b, strong {
        font-family: Roboto-Bold, Helvetica, Arial, sans-serif;
        font-weight: 700;
}

    Everything seems to work now.

    Is this the correct method for changing the font?, or is there a better way?

    Thanks

    • This reply was modified 2 years, 7 months ago by sysguides.

    Hello,

    CSS looks good and If it is working well then no issue with it, you can proceed with it.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘How to change font weight?’ is closed to new replies.