How can I use the same font as the h1 tag with font shorthand without having to specify the font size again? - CSS

Flamingo
April 1, 2023
158 views
0 votes
2 Answers

I am trying to use font shorthand in my h1 tag. However, it’s not working when I don’t specify the font size in the shorthand. I want to use the same font as the h1 tag in my .title class.

This is my current HTML code:

   <div class="landing">
       <h1 class="title">
           Hello there
       </h1>
   </div>

And this is my current CSS code:

h1 {
    font-size: var(--font-size-lg);
}
.landing .title {
    font: bold var(--main-font), var(--fall-back-font);
    line-height: calc(var(--line-height)*2);
    letter-spacing: -1px;
}

I have tried setting the font shorthand property in my .title class to use the same font as the h1 tag, but it doesn’t work unless I also specify the font size in the shorthand.

I want to be able to use the same font without having to specify the font size again.

Answers

- OOdash
- April 1, 2023 at 9:58 am
- 0 votes
0
to achieve, there are ‘css selectors’ :
```
div, .title{} // div and also .title
div > .title{} // all childs of div with the class .title
div + .title{} // the first div neighbour with class .title
```
just add the selector of your choice with the div css part.

update :

shorthand need a value, you have to initialise the value before recall it
```
html{ // as global container
var(--header-color, blue); // setting the --header-color first with 'blue' value
}
```
then in your css statements :
```
h1{
color: var(--header-color);
}
```
Login or Signup to reply.

- Quentin
- April 1, 2023 at 10:05 am
- 0 votes
0
The specification (see also MDN) for the font property requires that you specify the font-family and the font-size. (The other properties it is a shorthand for are optional.) You can’t use it without specifying the font size as to do so would be a syntax error.

If you just want to set the font-family then use the font-family property instead of the font shorthand property.

Login or Signup to reply.