Using a google webfont, I can't get the font-weight to yield results. The three weights do have names but aren't specified in the href link so I'm not sure if the name needs to be added.
Here's that portion of the code:
<link href='http://fonts.googleapis.com/css?family=Quicksand:400,300,700' rel='stylesheet' type='text/css'><style type="text/css">
body{
background-color: white;
margin-left: 20%;
margin-right: 20%;
border: none;
padding: 10px 10px 10px 10px;
font-family: Quicksand, sans-serif;
font-weight: 300;
}
<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=Quicksand:wght#300;400;500&display=swap" rel="stylesheet">
:- Use preconnect in relation before link any type of extronal font now it is work if any problem then told me
I was able to get this working in a fiddle which leads me to believe you have another font-weight overriding the font-weight you are trying to set. Use either chrome or Firefox's developer tools and you can easily locate the style that is overriding the one you are trying to set.
Keep in mind:
More specific styles win (ID vs class for example)
Styles found later in the style sheet will override identical styles earlier in the sheet.
Related
I am trying to change the font of my website but I am not able to access the 'bootstrap.css' file since I am using Bootstrap CDN. Is there any way to access 'bootstrap.css' while still using Bootstrap CDN or do I have to install the complied Bootstrap files?
I've tried changing the 'font-family' in my 'main.css' file but that did not seem to do anything.
body {
background: #fafafa;
color: #333333;
margin-top: 5rem;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
}
Make sure when you include the stylesheets, main.css comes AFTER bootstrap like so:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="main.css">
In main.css, create a rule for the selectors you wish to overwrite
body {
font-family: "Times New Roman";
}
If I have trouble verifying that the fonts are working, I will often pick out an obviously different font so the changes are easy to see and to ensure that there is not a problem with specificity or something else. After problems are figured out, I'll switch back to the real font I wanted to use.
When I change the index.php file to index.html, it runs main.css file on local. But when I run it with php, it does not see main.css. Bootstrap sees the css files.
Note:The index.html code works when I run on local. There is no problem with the code.
Edit:The problem is not in PHP
<!DOCTYPE HTML>
<html>
<head>
<title>Hi</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
<button type="button" class="btn btn-primary btn-outline-danger">Danger</button>
</body>
</html>
main.css:
.btn-primary{
font-size: 20px;
padding: 15px 60px;
background-color: #fed136;
text-transform: uppercase;
}
This is not really a PHP problem. This is happening because Bootstrap is overwriting your main CSS. In fact, using the main CSS, give your button an ID name and change it to the main cass. I think this will work
bootstrap default css btn-primary
<a href="" class="btn-primary class_name" ></a>
use css
.class_name.btn-primary{
font-size: 20px;
padding: 15px 60px;
background-color: #fed136;
text-transform: uppercase;
}
Please do not overwrite the bootstrap classes,instead use custom class say .btnDelete.
.btnDelete{
font-size: 20px;
padding: 15px 60px;
background-color: #fed136;
text-transform: uppercase;
}
And also remove asterisk btn-primary.Bootstrap uses snake case notation for naming classes.why don't you use camelCase notation in order to distinguish between user-defined classes and bootstrap classes.
It is actually not a PHP problem. It is happening because Bootstrap is overwriting your main CSS. To actually use main CSS give your button a id name then change it in main.css. I think that will work. ;-)
I've searched around a bit and can't find a clean solution.
Bootstrap is overriding my custom css. I have ensured that my custom script file is below the bootstrap css file, but this still doesn't solve the issue.
If i tack the !important tag on to a font-size, that works. I just feel like going through and putting !important after everything is sloppy and time consuming. Thoughts?
I am running a rails app, if that is germane to my issue.
Script
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href='//fonts.googleapis.com/css?family=Poppins' rel='stylesheet' type="text/css">
<link rel="stylesheet" type="text/css" href="style.scss">
CSS
h1 {
font-weight: 600;
color: #fff;
font-size: 5.5em !important;
}
You need to use CSS specificity to override the default Bootstrap CSS without using !important. So your h1 tag could be defined using the following:
CSS
body h1 {
color: #fff;
font-size: 5.5em;
font-weight: 600;
}
Just adding body before any of your CSS declarations should override the Bootstrap CSS. See this Code Pen to see an example with your code.
I'm having some trouble with a font I found on Google Web Fonts.
As you can see in the image posted below, the capital V in 'Versus' overlaps with the 'e' when i'm using Firefox. Though when i'm using Chrome (or IE) it does not overlap and leaves me with an ugly space between the two characters.
Is there any way to fix this and make it look like the one in Firefox? Or should I start looking for another font?
My HTML:
<html>
<head>
<meta charset="utf-8">
<title>Versus</title>
<link rel="stylesheet" type="text/css" href="css/reset.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link href='http://fonts.googleapis.com/css?family=Marck+Script' rel='stylesheet' type='text/css'>
</head>
<body>
<div>
<h1>Versus</h1>
</div>
</body>
My CSS:
h1 {
font-family: 'Marck Script', cursive;
font-size: 100px;
color:#444;
text-align:center;
padding:0 50px;
text-shadow: 2px 2px 3px #777;
}
Thanks in advance!
In order to fix the spacing in a font you should use:
letter-spacing: 10px /* How ever much you need */
Without knowing the specifics on the HTML and the CSS you already have in place, you can fix the problem area by using something like this:
style
span { letter-spacing: -4px }
html
<span>V</span>ersus
It's hokie, but it should work.
Firefox nowadays supports kerning when using a font with kerning pairs. Other browsers haven’t caught up. There are several proposed CSS features that would affect kerning, and Firefox has some support to them, but the other browsers don’t.
So you should look for another font. Manually tuning spacing by letter-spacing or margin properties is troublesome and risky; you easily end up with breaking things on Firefox.
If you keep using the Marck Script font, it is better to download it and install it on your server and use it from there. There are problems with many Google fonts when used on the Google server. In this case, IE 9 in Standards Mode does not use the font; the error code CSS3117 appears in the console, so there is apparently something wrong in Google settings.
I am using bootstrap for my site, I think the black header is not good and the font is too small. How to customize the header of bootstrap ? Is there any example ?
It's better to just override the class/id.
Declare the bootstrap first then your own css
<link href="assets/css/bootstrap.css" rel="stylesheet">
<link href="assets/css/mystyle.css" rel="stylesheet">
in your mystyle.css you can:
header,.header,#header{
background: red;
color: white;
font-size: 15px;
}