@import url("+Sans");
@import url(":100,100i,300,300i,400,400i,700,700i,900,900i");
@import url("+Sans:wght@200;300;400;600;700;800;900&display=swap");
:root {
--font01: "Martel Sans", sans-serif;
}
html,
body {
margin: 0;
padding: 0;
font-family: var(--font01);
background: #f1f1f1;
}
* {
box-sizing: border-box;
}
.inset-layout {
margin: 40px;
}
.header {
display: flex;
justify-content: space-between;
flex-direction: column;
padding: 0px;
gap: 20px;
}
.footer {
display: flex;
justify-content: space-between;
padding: 40px 0px;
}
a {
text-decoration: none;
color: #4a4949;
}
h1,
h2,
h3,
h4,
h5,
h6,
ul,
span,
p {
margin: 0;
padding: 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: "Martel Sans", sans-serif;
}
p {
font-size: 1.2rem;
line-height: 1.551;
margin: 20px 0;
}
h1 {
font-size: 2.7rem;
font-weight: normal;
color: #4a4949;
line-height: 1.09em;
}
h2 {
font-size: 2.4rem;
font-weight: normal;
color: #4a4949;
line-height: 1.1;
}
h3 {
font-size: 2.3rem;
font-weight: normal;
color: #4a4949;
}
h4 {
font-size: 2.1rem;
font-weight: normal;
color: #4a4949;
}
h5 {
font-size: 1.9rem;
font-weight: normal;
color: #4a4949;
}
h6 {
font-size: 1.7rem;
font-weight: normal;
color: #4a4949;
}
ul {
list-style-type: none;
}
Above is an old school stle layout.css file from a Block theme. This kind of system is also used and may be used in future too—
:root {
--font01: "Martel Sans", sans-serif;
}
Question: If I foucs on H1, H2...H6 tags, for example can their font sizes or fint family be handled through theme.json? If yes, what will happen to layout.css code— That needs to be deleted and in block theme waht is prescribed way to Import Google Fonts?