i'm walking into this weird thing where my footer is showing different font weights with the same CSS code.
It is built in wordpress.
The footer is the exact same code on all pages but only shows propperly on the homepage. The font-weight cannot go below 400 on all the pages beside the homepage, also changing the propperty in chrome dev tool does not work below 400?
Homepage: fixed
screenshots: https://imgur.com/a/nlk9p5o
CSS :
.footer-widgets {
color: #333;
font-weight: 300;
}
font-face :
<link href="https://fonts.googleapis.com/css?family=Oswald|Work+Sans&display=swap" rel="stylesheet">
Font-family code on the different pages are also not striped through or anything in the dev tool! So this means they are not being overwritten somewhere else
Try to put this link for your font :)
<link href="https://fonts.googleapis.com/css?family=Oswald:200,300,400,500,600,700|Work+Sans:100,200,300,400,500,600,700,800,900&display=swap" rel="stylesheet">
https://fonts.googleapis.com/css?family=Oswald|Work+Sans:300&display=swap use this it will work. If you have to use different font weight you have to choose from google font which weight you need as per screenshot.
You probobly have some other css overrideing , this works however ( tested in chrome devtools)
font-weight: 100 !important;
Related
On page load in IE, the page is displayed for a fraction of second with no custom font, then it renders fine. But this behavior is not in Chrome. Any suggestion how to prevent it.
Thanks
Use always google fonts for websites in this way.
Add in Html
<head>
<title>Website Name</title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
</head>
Add in CSS
body{
font-family: 'Open Sans', sans-serif;
}
font loading speed depend on the size of the font, your browser cache, and the bandwidth of your network.
that aside, why there is no problem in chrome? it might be because of the way the browser was designed. IE is old, and I bet that your chrome is brand new. so it might be that chrome has a better thread management than IE.
what to do to minimize the effect? you can try to reduce the size of your font. for example, if you use the font for icons, then you can remove the icons that you are not using.
another way is to use windows build in fonts for display in IE, that way, the browser does not need to download fonts. for example, you can use century gothic, impact, or calibri
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 used Google web fonts for my H1 text and the text looks very pixelated on my screen.
<link href='http://fonts.googleapis.com/css?family=Forum&v2' rel='stylesheet' type='text/css'>
<style media="screen" type="text/css">
h1 {
color:#544E4F;
font-family: 'Forum', cursive;
text-align:center;
margin: auto;
font-size:210%;
}
</style>
Thanks in advance!
After suffering the same problem for a long time, and after doing a lot of research about it, I finally did the following:
I found http://www.fontsquirrel.com
I downloaded the (pixellated) font I was using (Exo family)
I uploaded it to my site
I referenced it locally to avoid using Google Fonts (you can achieve this by downloading a #font-face Kit that is available at fontsquirrel.com also).
It looks OK to me. However note that h1 receives the style:
font-weight: bold;
in most browsers' default style sheets. Since you only have a normal-weight variant of the font available, the browser has to synthesise the bold weight automatically from the normal. There are various different methods of auto-bolding of varying levels of quality, but it's never going to look as good as a real designed bold. Maybe you are getting a poorly-synthesised font variant.
If you want to use Forum for headings I suggest adding the rule:
font-weight: normal;
which will allow the browser to use the regular, unmolested font. Alternatively if you really do want that bold, best choose a different font that does actually have a bold weight.
Another possibility is that you've got anti-aliasing turned off at a system level, and it's being overridden for your normal browser font but not for web fonts. If that's the problem then you could try to override for everything else using eg:
font-smooth: always;
-webkit-font-smoothing: antialiased;
although it's questionable whether it's really a good idea to be ignoring the user's preferences, and also arguable whether it should be subpixel-antialiased instead for WebKit...
Well I'm just throwing these out there, but..
My best guess is to use em rather than % for your font size. Such as, font-size:4.5em.
Maybe try using a div instead of h1, though I doubt that would do much of anything.
Try adding this:
h1 {
text-shadow:0 0 1px transparent;
}