Okay, I'm not going to post the entire css code for your own sake lol, but it's here http://pattersoncode.ca/incls/style.css
Anyway, I don't know whether it's a problem with my browser (Safari 7) but whenever the page fully loads, all the writing turns bold, and it looks out of place.
As you can see, I've set font-weight: normal !IMPORTANT on many areas of my code to see if that would solve it, but it didn't.
I guarantee you have a LABEL or H2 that isn't closed properly. You have only have only 2 elements with a bold definition: LABEL and H2 If you have closing tags missing or out of sequence, the style will cascade in the document, making everything bold.
Looks like Google's #font-face declaration is overwriting your own font-weight. That may be because Google's Font CSS comes right AFTER your style.css. Try placing Google's font-face css BEFORE your style.css, like this:
<link href="http://fonts.googleapis.com/css?family=Muli:300" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="http://pattersoncode.ca/incls/style.css">
Then reset overwrite font-weight again in your style.css
Related
This question has been asked quite a number of times, but none of them works for me. For example:
Google fonts font-weight of 100 is not working. (I don't have the font I want to use already in my system.)
Why is google font weight not working?. (I'm not using it in a heading, just a regular paragraph.)
I used Google Fonts with the #import like so:
#import url('https://fonts.googleapis.com/css?family=Rubik');
body {
font-family: 'Rubik', sans-serif;
}
The typeface shows up, but I can't do anything with the weight. The <strong> tags aren't displayed bold. The font-weight property in the CSS isn't working. Not even overriding it in browser's inspector changes anything.
Update
The thing seems to only work on Gecko-based browsers, like Firefox.
The answer is that the Google font isn't calibrated to carry all of the weights you want with it.
Some of the browsers may display 'thicker' or 'thinner' type, but they are tricking you. They are doubling up the normal font to simulate what you are asking for when there is no actual weight of that type available. The ones that do that are trying to be nice, but these days it is more confusing than helpful. According to your code snippet, you have:
#import url('https://fonts.googleapis.com/css?family=Rubik');
vs
#import url('https://fonts.googleapis.com/css?family=Rubik:300,400,500i,900,900i');
(Google Fonts UI 2017 - may look different in the future but the concept is the same for any font service)
Many fonts only have 1 weight.
Here's a list of all of the possible names for font-weights;
Thin 100
Extra Light 200
Light 300
Regular 400
Medium 500
Semi-Bold 600
Bold 700
Black 900
I have had also issues to get the weights working, even though I had properly copied the HTML code from google and put into my head.
Solution:
I used the #import function by adding it my CSS and now everything works without issues. Seems that #import is more robust or less conflicting with wp themes.
I had the same issue.
For me the problem was that my link to bootstrap was placed after my link to styles.css in my html, and thus bootstrap overrode the style for h1.
The solution was simply to put the link to styles.css after the link to bootstrap in my html. :)
I had the same problem until I found out that you can not change the font weight of the body.
you have to target the exact tag you want to change the weight
eg.
Check this code out
I had the same problem: i noticed that it occurred when you import the font on the css file like:
#import url('https://fonts.googleapis.com/css2?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&display=swap');
So in order to solve i just imported all the font weight from the html file and then use the font weight and the font family as usual in the css file:
<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=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&display=swap" rel="stylesheet">
Doing like this i was able to solve my problem. Noticed that you can't specify the font weight in the body tag but you have to do in the single html tag like h1 h2 h3 p ecc
The no. of fonts weights you require select them all.This will look like this:
#import url('https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght#0,400;0,700;1,300&display=swap');
Now you can use all this font-weights.
Today, font-style:italic in css is rendering my fonts in bold, only on Chrome and Firefox - not on Safari.
For instance, using this css:
em {
font-style: italic;
}
and this HTML:
<p><em>Hi, I'm showing up in bold.</em></p>
displays in italics AND bold.
I've tried restoring CSS from two days ago before I noticed the bug, to no effect, so it seems like it's something other than the CSS causing this. I've tried validating the HTML and CSS, nothing shows up that seems to be the source.
An example of this shows on this page: https://critter.co/home/orgs/
Actual link/code: https://fonts.googleapis.com/css?family=Open+Sans:800italic,400
on your page...
You have just font-weight:800, for italic.
Change it with:
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,800italic,400italic,300,300italic,600,600italic,700,700italic,800' rel='stylesheet' type='text/css'>
so you have all possible variations... P.S. Specify then font-weight in CSS, and rendering can be more consistent, in all browsers.
This has me completely stumped. I have a website that used a serif font for the header and a sans-serif font for the body text. The index page loads fine in IE9. However, when navigating to other pages and returning to the index page, text is rendered in a serif font. Navigation styles are not affected.
When the page is refreshed, it displays properly. Only the index page is affected.
This does not happen in any other browser.
The HTML and CSS have been validated with no errors.
I have tried adding !important to the sans-serif font in the CSS with no change.
I have tried adding the font declaration to each element with no change.
The CSS looks like this:
#header {
font-family:"Times New Roman", Georgia, serif;
}
#section {
font-family: "Open Sans", Helvetica, Arial, sans-serif !important;
}
What makes this more mysterious, is that occassionally, the page performs as expected.
Help would be greatly appreciated!
could possibly be #imports not downloading sequentially...although they should already be cashed. easy fix would be to generate open sans #font-face rule declaration via font squirrel, place that in your style sheet. or change your initial import to a link element, as well as pulling the google font import statement out and making it a link element as well, placing it above the other style sheet. you can read more here: http://www.stevesouders.com/blog/2009/04/09/dont-use-import/
The problem was caused by the way the CSS sheet was linked within the head.
Original code:
<style>
#import url(css/stylesheet.css);
</style>
New declaration:
<link rel="stylesheet" href="css/stylesheet.css">
What made this mysterious was that pages would load correctly and only a couple pages were affected. The problem appeared only after a page was visited and only with Internet Explorer. Thank you Albert, for giving me a clue to solve this.
I'm using twitter bootstrap. My problem is that font-sizes in tables are wrong. For some reason the User Agent stylesheet is overriding the bootstrap table styles.
On the twitter bootstrap page (http://twitter.github.com/bootstrap/base-css.html) everything is of course working correctly.
In my inspector I see the following difference:
My page:
The twitter bootstrap page:
So definitely the problem is that the user agent stylesheet is overriding the bootstrap styles.
I haven't been able to figure out why this is different on my page and the twitter bootstrap page.
Most of the other CSS is working fine.
My css import:
<link href="/media/bootstrap/css/bootstrap.css" rel= "stylesheet">
CSS import on twitter bootstrap page:
<link href="assets/css/bootstrap.css" rel="stylesheet">
I actually figured this out myself. I had the <!DOCTYPE html> tag wrongly written. So if you have this problem make sure the doctype declaration is correct!
Please import the docs.css into your application as well. If I must say so, you must have realized that the Twitter Bootstrap Docs are using bootstrap.css and a custom docs.css. Try doing, which you can download from the github package. Then, try playing around with the table classes in docs. css without messing with the master css. Or try adding DOCTYPE in headers.
<link href="/media/bootstrap/css/docs.css" rel= "stylesheet">
If declaring <!DOCTYPE html> in the very beginning doesn't work, then it's probably not your user-agent style sheet casuing it. It may be Bootstrap's style sheet overriding your styles (I've had this problem). Make sure your style sheet is linked to after Bootstrap's style sheet in your HTML.
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/mystylesheet.css" rel="stylesheet"> <!-- Your custom style sheet goes after Bootstrap's -->
I had the same issue as the OP. I wanted lovely small text and some user stylesheet was overiding it and putting:
font-size: medium;
When I wanted:
font-size:8pt;
I placed the following at the top of my HTML page:
<!DOCTYPE html>
All was good then, a bad habit to get into to not declare doctype at the top. All user stylesheets have now gone.
To discover what is overriding what on your CSS it is always a good idea to inspect element (F12) and you can modify and untick attributes on the fly until you get to right, then update your CSS file with it!
However if you do have a user stylesheet issue, these values will be locked.
Check whether your CSS is called or not in browser dev tools (press F12) under network column.
If it is not called, use your style sheets with1 rel="stylesheet" type="text/css".
It worked for me.
I have a set of Styles that were first created inside the style attribute on a page.
I want to move it from being on the page itself into a stylesheet.
however, when I move it to a .css file, the page breaks, move the code back to the html doc and it works fine again.
This makes absolutely no sense, moving styles from a style to a css file shouldnt break the code should it?
Am I missing something? I am not changing any of the code, its simply a copy and paste.
This is just a shot in the dark as (at the time of this post) you haven't provided source code.
Make sure you're linking to your stylesheet using a link tag in the head of the HTML document.
If you had:
<style type="text/css">
/* <![CDATA[ */
#someid
{
margin: 0;
padding: 3px 12px;
}
/* ]]> */
</style>
You'll need to have
#someid
{
margin: 0;
padding: 3px 12px;
}
in your CSS file with:
<link rel="stylesheet" type="text/css" href="path/to/style.css" />
to link to the stylesheet.
Some common newbie mistakes include:
<style type="text/css" src="path/to/style.css">: because it's a similar syntax to the <script> tag, which would make sense, but is invalid
<link rel="stylesheet" src="path/to/style.css">: but link elements use href not src
placing link elements within the body: although browsers will tend to manage link elements in the body, there are likely going to be some errors, and it's not a defined behavior
not specifying a doctype declaration: allows the browser to go into quirks mode, which is never a good idea.
You should make sure the stylesheet is properly imported.
Sometimes the #import doesn't work well if not used accordingly, so always reference your stylesheet:
<link rel="stylesheet" type="text/css" href="name-of-stylesheet.css" />
Always remember to close the <link> tag as it's a self-close tag. I think #zzzzBov forgot to mention that.
Finally, if that doesn't work, try to override some of the styles by physically writing (above the </head> section) something like:
<style type="text/css">
body { background: blue; }
* { color: red; }
</style>
and see if that gives you a blue background and red colored text. It should. After that, try to implement the referencing method and make sure you reference the stylesheet file to the right directory.
Good luck!
I had the same problem, but the cause was not some mistake in the code but the fact that the .css file was loaded with some delay after making the modifications in it. The server needed 5 - 10 minutes to update the changes.
I had this problem as well, and the reason was that the path had to be updated for some url() references since the css file was in another folder than the html file it previously was called from.
So basically
background-image: url('patterns/debut_dark.png');
had to be changed to
background-image: url('../patterns/debut_dark.png');
Don't include <style type="text/css"></style> in your .css file.
I had the same issue and was quite frustrating. I had a css file that was properly referenced, however not all the elements were being loaded from it. As it turns out, it was a cache problem in Chrome. After clearing it and restarting the window, the css elements were working correctly.
Ran across same problem. Found there were lines in my css file that should have been commented out (a block of colour palette information that I had cut and paste to the top of the file for quick reference).
If all your syntax seems fine, then its most likely a browser cache problem that we can easily fix. In your html/php file, reference your new .css style sheet (e.g. styles.css) by adding an extra random parameter. This will force browsers visiting your page to fetch your latest styles.css.
In the of your html/php file, you should have something like this to load your new styles.css file:
<link rel="stylesheet" type="text/css" href="styles.css" />
simply change it to be like this:
<link rel="stylesheet" type="text/css" href="styles.css?ref=v1" />
that extra "?ref=v1" will prevent browsers from re-using the styles.css file they have cached, and will force browsers to get your very latest styles.css file. As you make updates to the styles.css file and upload them to your web server, just change the "v1" to "v2" etc. or whatever naming system you like so that browsers are forced to reload the latest styles.css. Note adding this "?ref=v1" to the link does not need you to change the name of your styles.css file (you can change the file name but i find that gets messy). This is a simple and clean way to force browsers into re-fetching your very latest .css file.