I'm using in my website roboto font family with bootstrap-4 roboto font doesn't working. It's working this case: I am write like this "font-family:"roboto-bold"; It's not working this case when I write with "sans-serif" font "font-family: 'roboto-bold',sans-serif;"
#import url('https://fonts.googleapis.com/css2?family=Roboto:wght#400;500&display=swap');
#font-face {
font-family: 'roboto-bold',sans-serif;
src: url('./fonts/roboto/Roboto-Bold.woff') format('woff2'),
url('./fonts/roboto/Roboto-Bold.woff') format('woff');
font-weight: bold;
font-display: swap;
unicode-range: U+000-5FF;
}
body {
font-family: 'roboto-bold',sans-serif;
}
h2 {
/* font-family: 'Roboto'; */
font-family: 'roboto-bold',sans-serif;
font-size: 47;
color: red;
}
.tab-title{
font-size: 30px;
text-align: center;
font-family: 'roboto-bold',sans-serif ;
color: aqua;
}
<!doctype html>
<html lang="en">
<head>
<title>Doora Invoice</title>
<meta charset="UTF-8">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="demostyle.css">
</head>
<body>
<main>
<h2>hello</h2>
<h3 class="tab-title"> overview</h3>
<p>Hello</p>
</main>
</body>
</html>
see this if you want to change weight in font you have to specify in & select from google fonts family.and want to change font family name visit this link
#import url('https://fonts.googleapis.com/css2?family=Roboto:wght#400;700&display=swap');
/*#font-face {
font-family: 'Roboto',sans-serif;
src: url('https://fonts.googleapis.com/css2?family=Roboto:wght#400;500&display=swap');
font-weight: bold;
font-display: swap;
unicode-range: U+000-5FF;
} */
body {
font-family: 'Roboto',sans-serif;
}
h2 {
/* font-family: 'Roboto'; */
font-family: 'Roboto',sans-serif;
font-size: 47;
color: red;
font-weight: 400;
}
.tab-title{
font-size: 30px;
text-align: center;
font-family: 'Roboto',sans-serif;
color: aqua;
font-weight: 700;
}
<!doctype html>
<html lang="en">
<head>
<title>Doora Invoice</title>
<meta charset="UTF-8">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="demostyle.css">
</head>
<body>
<main>
<h2>hello</h2>
<h3 class="tab-title"> overview</h3>
<p>Hello</p>
</main>
</body>
</html>
Related
I developed a site for a project with a few videos etc. The web browser based version is fine but mobile is zoomed in and needs pinched and zoomed out to get it correct. Whats the method to get that correct on load? I'm guessing some #media query.
I have this in my head
<meta content='width=device-width, initial-scale=1, maximum-scale=1' <!DOCTYPE html>
<html lang="en">
<head>
<meta charset='utf-8'>
<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport' />
<title>ReBreak News</title>
<link rel='icon' type='image/png' href='/favicon.png'>
<link rel='stylesheet' href='/global.css'>
<link rel='stylesheet' href='/build/bundle.css'>
<link rel="stylesheet" href="/bootstrap.min.css"></script>
<link rel="stylesheet" href="/fontawesome/css/fontawesome.min.css"></script>
<script src="jquery.js"></script>
<script src="fontawesome.js"></script>
<script defer src='/build/bundle.js'></script>
<script src="bootstrap.js"></script>
</head>
and my global.css
:root {
--gradient: linear-gradient(90deg, #ff0000 0%, #ff0000 100%);
--light: #fff;
--grey: #f8f9fa;
}
html,
body {
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
scroll-behavior: smooth;
}
.main-bgcolor {
background-image: var(--gradient);
}
.main-bgcolor2 {
background-color: #ffffff;
}
.light-color {
color: var(--light) !important;
}
.grey-bgcolor {
background: var(--grey);
}
.company_brand {
font-size: x-large;
font-family: cursive;
}
.section {
padding: 50px 0;
}
.section-body {
padding: 20px 0;
}
.h1{
color: blueviolet;
}
Thanks
This question already has answers here:
Why aren't my absolutely/fixed-positioned elements located where I expect?
(3 answers)
Closed 3 years ago.
I'm having some issues with a blank space (or bar) on the top of my website.
I have tried playing with different values of padding and position as some other posts suggests but nothing seems to work.
h1 {
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
position: relative;
top: 150px;
left: 300px;
z-index: 2;
position: absolute;
color: white;
margin: 0;
}
h2 {
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
position: relative;
top: 230px;
left: 300px;
z-index: 2;
color: white;
font-weight: 100;
font-style: italic;
}
img {
z-index: 1;
position: absolute;
padding-top: 0;
}
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Hayao Miyazaki Tribute Page</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="miyazaki.css">
</head>
<div id="main" class="image">
<h1>Hayao Miyazaki</h1>
<h2> “They say that the best blaze burns brightest when circumstances are at their worst.”</h2>
<img alt="Miyazaki Black and White" src="https://wallpaperaccess.com/full/244942.jpg">
</div>
<body>
<script src="" async defer></script>
</body>
</html>
Since you have givenposition: absolute to the img, you should specify the position of the image.
h1 {
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
position: relative;
top: 150px;
left: 300px;
z-index: 2;
position: absolute;
color: white;
margin: 0;
}
h2 {
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
position: relative;
top: 230px;
left: 300px;
z-index: 2;
color: white;
font-weight: 100;
font-style: italic;
}
img {
z-index: 1;
position: absolute;
padding-top: 0;
top: 0; /* added position */
}
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Hayao Miyazaki Tribute Page</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="miyazaki.css">
</head>
<div id="main" class="image">
<h1>Hayao Miyazaki</h1>
<h2> “They say that the best blaze burns brightest when circumstances are at their worst.”</h2>
<img alt="Miyazaki Black and White" src="https://wallpaperaccess.com/full/244942.jpg">
</div>
<body>
<script src="" async defer></script>
</body>
</html>
You should add margin 0 to body class
css
body{
background: #fff;
margin: 0;
}
Just add top:0; to img tag.
h1 {
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
position: relative;
top: 150px;
left: 300px;
z-index: 2;
position: absolute;
color: white;
margin: 0;
}
h2 {
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
position: relative;
top: 230px;
left: 300px;
z-index: 2;
color: white;
font-weight: 100;
font-style: italic;
}
img {
z-index: 1;
position: absolute;
padding-top: 0;
top: 0;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Hayao Miyazaki Tribute Page</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="miyazaki.css">
</head>
<div id="main" class="image">
<h1>Hayao Miyazaki</h1>
<h2> “They say that the best blaze burns brightest when circumstances are at their worst.”</h2>
<img alt="Miyazaki Black and White" src="https://wallpaperaccess.com/full/244942.jpg">
</div>
<body>
<script src="" async defer></script>
</body>
</html>
Avoid using position:absolute;. Absolutely positioned elements have no awareness of what's happening around them. When a page changes size, the elements don't move in relation to each other but rather in relation to their container and the values you've set for top, left etc.
To know more:https://www.tyssendesign.com.au/articles/css/absolute-positioning-pitfalls/
In your case just put that image as background to the division and place the text h1,h2 inside the division and add padding(if required) to the h1,h2 to align them.
I am building a simple webpage. The text is displaying correctly but the icon is not displaying. The icon is from ionicons framework.
I checked ionicons.min.css path and icon name in this css file
My html file:
<!--DOCHtml5-->
<html lang="en">
<head>
<meta charset="utf-8">
<link href="style.css" type="text/css" rel="stylesheet">
<title>webpage</title>
<link href="https://fonts.googleapis.com/css?family=Euphoria+Script" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Montez" rel="stylesheet">
<link href="icons/ionicons.min.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class = "name">
Name
<ul class = "social-icons">
<li><i class="ion-arrow-right-a"></i></li>
</ul>
</div>
</body>
</html>
My css file:
*{
margin:0;
padding:0;
font-family: 'Euphoria Script', cursive;
font-size: 100px;
}
body{
height:100vh;
margin: 0;
padding: 0;
background-color: #ef6758;
}
.name{
position:absolute;
top:35%;
left:31%;
font-family: 'Montez', cursive;
color: #4be214;
}
.social-icons li{
list-style: none;
}
Icon should be visible
Go through it. it will work for you, because there is font-family files not found in your css
*{
margin:0;
padding:0;
font-family: 'Euphoria Script', cursive;
font-size: 100px;
}
body{
height:100vh;
margin: 0;
padding: 0;
background-color: #ef6758;
}
.name{
position:absolute;
top:35%;
left:31%;
font-family: 'Montez', cursive;
color: #4be214;
}
.social-icons li{
list-style: none;
}
<!--DOCHtml5-->
<html lang="en">
<head>
<meta charset="utf-8">
<link href="style.css" type="text/css" rel="stylesheet">
<title>webpage</title>
<link href="https://fonts.googleapis.com/css?family=Euphoria+Script" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Montez" rel="stylesheet">
<link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class = "name">
Name
<ul class = "social-icons">
<li><i class="ion-arrow-right-a"></i></li>
</ul>
</div>
</body>
</html>
So I have the meta tag:
meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"
Yet whenever I resize the elements, it's not working. I'm using percentages in the width, but nothing's changing.
html, body {
background-color: #fff;
color: #555;
font-family: 'lato', 'arial', sans-serif;
font-weight: 300;
font-size: 20px;
text-rendering: optimizeLegibility;
overflow-x: hidden;
}
Am I missing something?
I'm trying to add Google API fonts to my webpage to learn more about HTML and I can't get any of the API fonts to load. I've been trying with the Santina font, but it always reverts back to my "default" Courier New font. The code worked when I added an #import statement to the top of the CSS document, so I believe the link is correct, but the HTML doc doesn't seem to link the API font to the CSS page. Am I overriding the CSS doc somehow?
My HTML doc:
<!DOCTYPE html>
<html>
<head>
<title>Generic Website Name</title>
<meta charset="utf-8">
<link href="https://fonts.googleapis.com/css?family=Sansita:400"
ref="stylesheet" type="text/css">
<link rel="stylesheet" href="styles.css">
</head>
<body style="background-color:hsl(189,58%,71%);">
<h1 id="title">Title</h1>
<hr>
<h3 class="headermain">Salutations!</h3>
<p class="paramain">Welcome to the Website</p>
Google!
</body>
</html>
The CSS Doc:
#title {
font-family:"Sansita", Courier New;
font-style: normal;
color: #f0f0f0;
text-align: center;
font-size: 5vw;
letter-spacing: 3px;
}
.headermain {
color: #020202;
text-align: left;
font-size: 26px;
font-family: Calibri;
}
.paramain {
color: #010101;
text-align: left;
font-size: 26px;
font-family: Calibri;
}
Edit: added better spacing for code
You've got ref="stylesheet" instead of rel="stylesheet"
Doh.
#title {
font-family:'Sansita', times, sans-serif;
font-style: normal;
color: #f0f0f0;
text-align: center;
font-size: 5vw;
letter-spacing: 3px;
}
.headermain {
color: #020202;
text-align: left;
font-size: 26px;
font-family: Calibri;
}
.paramain {
color: #010101;
text-align: left;
font-size: 26px;
font-family: Calibri;
}
<!DOCTYPE html>
<html>
<head>
<title>Generic Website Name</title>
<meta charset="utf-8">
<link href="https://fonts.googleapis.com/css?family=Sansita:400" rel="stylesheet">
<link rel="stylesheet" href="styles.css">
</head>
<body style="background-color:hsl(189,58%,71%);">
<h1 id="title">Title</h1>
<hr>
<h3 class="headermain">Salutations!</h3>
<p class="paramain">Welcome to the Website</p>
Google!
</body>
</html>