-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathteting fonts.html
44 lines (42 loc) · 1.92 KB
/
teting fonts.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>font and display</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Bruno+Ace+SC&family=Montserrat:wght@300&family=Roboto+Condensed:wght@300&display=swap" rel="stylesheet">
<style>
#box1{
background-color: blanchedalmond;
width: 500px;
height: 200px;
text-align: center;
/*visibilty: hidden;*/
display: inline-block;
font-family: 'Bruno Ace SC', cursive;
font-family: 'Montserrat', sans-serif;
font-family: 'Roboto Condensed', sans-serif;
margin: 20px;
}
#box2{
background-color: aquamarine;width: 50px;
height: 200px;
width: 500px;
display: inline-block;
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
</style>
</head>
<body>
<div id="box1">
hey Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid, sit sed. Modi quidem ipsa illo eligendi. Neque eaque, nihil, assumenda ipsa voluptatibus minima quaerat officia inventore minus expedita quibusdam vero officiis a cupiditate omnis.
</div>
<div id="box2">
hey Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque, aspernatur quia nobis quae in pariatur dolores similique dignissimos ipsam soluta nesciunt deleniti repudiandae numquam maxime et at itaque? Aut, possimus?
</div>
<!--linked google font otday and learned about display:inline,block,inline-block;-->
</body>
</html>