Rendering problem in text

HTML & CSS
1

Good morning,

I would like to have the same result in my <p> tag and I don’t see where I forgot something, although I indicated “Roboto”

Do you have an idea?

result I would like to obtain
Sans titre

my rendering

Sans titre2
Sans titre2730×448 59.1 KB

my css

* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}

body {
    font-family: 'Roboto', sans-serif;
}

nav li {
    list-style: none;
    margin-right: 40px;
    font-size: 18px;
}

h1 {
    margin-left: 40px;
}

header a {
    text-decoration: none;
    color: #383838;
}

header a:hover {
    color: #6ab5d0;
}

header {
    display: flex;
    justify-content: space-between;
    background-color: gray;
    padding: 20px;
    align-items: center;
    position: fixed;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.75);
}

nav ul {
    display: flex;
}

.landing {
    background-color: #383838;
    padding: 130px 60px 60px 20px;
}

.half {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
}

.part1 p {
    color: white;
    font-size: 3rem;
    font-weight: 100;
    margin: 25px;
}

.part1 img {
    float: left;
    padding: 0px 20px;
}

.part1 {
    display: flex;
    flex-direction: column;
}

.part2 {
    padding-top: 50px;
    text-align: right;
}

.part2 img {
    margin: 5px;
}
2

Does your computer have a font called “Roboto” on it?

Does it have the same one as the result? Is it styled the same (At a guess, that looks like a Roboto Thin or Roboto Light, more than Roboto)

(Thin is generally font-weight 100, Light font-weight 300)

1 Like
3

What he said.

Roboto is a Google font, so unless you’re running a chromebook, it’s not going to be installed by default. You’ll need to link to the font in the html OR import it in the css. Go to the roboto page under google fonts and select the roboto font. On the right hand side will be the generated css/html you’ll need to get access to the font on your page (pick one or the other, don’t need both).

4

Note: If you do it with CSS, @import entries must go at the top of the CSS file.

2 Likes
5

I did it in my index.html

<link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link rel="https://fonts.googleapis.com/css2?family=Roboto:wght@100;500&display=swap" rel="stylesheet">
1 Like
6

Try editing the body CSS to:

body {
    font-family: 'Roboto', sans-serif;
    font-weight: 100;
}
1 Like
7

I tested my it does not change

1 Like
8

Is your screenshot from some other web page, not your home page?

1 Like
9

I’m following a tutorial and I don’t get the same character sets in the

tags
https://www.youtube.com/watch?v=ndsGGSLZ1S4

10

As has been said, this can be done with an import at the top of your CSS.

Example

2 Likes
11

In fact it works now.

Many thanks to you

2 Likes