Why is my font-family not working in css? [closed] - html

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 9 months ago.
Improve this question
I can't seem to get any font to work. It was working originally, but I did something and now can't get it back. The error I get in JSFiddle is "Unexpected missing generic font family".
body {
background-color: #ffffff;
font-family: Aldhabi;
}

You need to import it first to your css by using #import then you can use it.
#import url('http://fonts.cdnfonts.com/css/aldhabi');
body{
background-color: #ffffff;
font-family: 'Aldhabi', sans-serif;
}

Whenever you want to use a new font-family, you have to import it from Google-fonts.
For example, if you want to import Poppins you have to include this line
`#import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght#0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Pacifico&family=Poppins:ital,wght#0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto+Slab:wght#100;200;300;400;500;600;700;900&display=swap');`
in the top of your CSS file.
And then use it where ever you want, Like this:
body{
font-family: 'Poppins', sans-serif;
}

Related

My fonts work different on button and input tag [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 3 years ago.
Improve this question
This question is pure for designers.
On my html page I call fonts in header like this:
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=BioRhyme&display=swap">
<link rel="stylesheet" type="text/css" href="css/fonts.css">
My fonts.css file look like this:
* {
font-family: 'BioRhyme', serif;
}
But my fonts look different on <button> and on <input> is there a way to bypass that and make it look like rest of the page and how?
If elements aren't using the font-family you've set it means they're being overridden by something, this could be another CSS file or a browser default.
Your browser's dev tools can show you what styles are being applied to an element and which CSS file they come from.
You could also use the !important modifier to override other style sheets.
* {
font-family: 'BioRhyme', serif !important;
}

Everything is Aligned left [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 3 years ago.
Improve this question
So I’ve tried the content-fluid tag as well as the meta tag <meta name=“viewport” content=“width=device-width, initial-scale=1, maximum-scale=1” />
You can check it out here: emotesheaven.com/dev1987 for a live example of the issue occurring as I can’t post images. I find it strange as the website on desktop looks fine, but only on my iPhone 7 it appears weird. Thanks!
To fix the title text add this to your code.
#media screen and (max-width: 780px){
.intro .intro-title {
color: #fff;
font-weight: 600;
font-size: 2rem;
}
}

Div class does not style like the css [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
My css
.title {
font-size:20pt;
font-weight:700;
}
My html
<div class="title">Some word</div>
But "Some word" won't style like I put in css (size 20pt, weight 700)
If I style right in the div
<div style="font-size:20pt;font-weight:700">Some word</div>
And it actually style it, but using css it won't style, so what is the problem?
Here is some image
CSS
i.stack.imgur.com/FG9C9.png
index.php link the correct my-app.css directory
i.stack.imgur.com/LaUSj.jpg
Div class "iostitle" like in css
i.stack.imgur.com/jp3oW.jpg
But no style
i.stack.imgur.com/V3n02.png
I have checked your images. I also wondered why the class .iostitle not recognized while the class below it .iosdesc is working correctly.
Maybe you need to force the div selector in front of the class like
div.iostitle {
font-size: 20pt;
font-weight: 700;
margin-bottom: -20px;
}
See if that's help

Change color of icon Font Awesome [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
I downloaded a theme that has font awesome icons on the navbar section. When I try to change the color of that icons it remains the same.
I tried
.fa-home {
color:black;
}
But it doesn't work.
Try to apply the style to the :before element, where the icon is.
.navbarClass li [class^="fa-"]:before,
.navbarClass [class*=" fa-"]:before {
...
color: #COLOR;
}
The problem is with theme, it may have defined the color somewhere in the css file. Search for that and follow the classes of icon so you can find where the color of icon is defined. Or put the css class at the top of the file and add an "!important".
Like:
Color: black !important;

Fonts so big in mobile <p> and other tags [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
my fonts in mobile is so bigger than desktop! (iphone 5c). I'm test EM font size and nothing... and others pages H2, h4... some diferents sizes in mobile but my css is same...
I used reset.css and i never can this problem...
sorry my english! rsrs
Example:
<h4 class="sub-titulo">texto</h4>
(http://visibilita.com.br/teste01/missao-visao-valores.php)
You must use this css properties:
text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
The webkit browser adjusts the text of certaint tags to what it thinks is best. This can have the effect that you expenrience.
Keep the browser from adjusting the text by adding this to the style of your body:
-webkit-text-size-adjust: 100%;
Thats because your reset.css use font-size:100% property for your elements like p, h1, h2 etc.
Try to replace it and declare your own properties. For example:
p {
font-size:15px;
}
h2 {
font-size:21px;
}