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.
Related
I have the following problem: I'm using the variable font from the family inter (https://rsms.me/inter/) and implemented it the following way:
#font-face {
font-family: 'Inter var';
font-weight: 100 900;
font-display: swap;
font-style: normal;
font-named-instance: 'Regular';
src: url("Inter-roman.var.woff2?v=3.15") format("woff2");
}
html { font-family: 'Inter var', sans-serif; }
When styling a font, I only want to change the font-weight, therefore I declare it like this:
p { font-variation-settings: 'wght' 200; }
The browser renders the font in the correct family and weight, but unfortunately on page load, the font always "flickers" shortly. It seems to me, that the browser first renders the font in the normal font-weight and then re-renders it with my wanted weight. This issue is happening on all fonts I use with the variable font-variation-settings.
The behaviour happens on every page load, also on reloads. You can have a look at the issue during page-reload here:
Thanks for a hint!
As we have found there are many causes for font flickering.
The solution for the problem that promted this post was found by the post creator:
"I have fixed it somehow: I have asked the creator of the font and this was his answer: "Probably because you are using font-display:swap (it intentionally causes "flicker" for requests to fonts that are not cached in the client, which should be rare.) See developer.mozilla.org/en-US/docs/Web/CSS/#font-face/…" If I change the font-display to block, it does not flicker anymore but there is a longer period of time, where the font doesnt get rendered. I have decided to change the project and work with an standard not variable font. – Mista K."
Loading on a server:
While I am certainly not an expert on this. Loading the file on a server fixes the problem. This is likely due to the style sheet being cached when loaded on a server.
Changing font:
This is not so much a fix, but errors may be caused by the font itself infortunately.
Another quick fix:
Adding a loading screen may be required for a project and thus the font can be loaded within this.
Sorry this is not the most definitive post, this is just what we have found to be solutions over discussing this problem. Feel free to comment on this to add to this or even to tell me I'm wrong.
This seems to be a problem with the font it's self the best solution I can give is to simply use another font. I would recommend using google fonts
HTML:
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans">
</head>
CSS:
p {
font-family: 'Open Sans';
}
----------Original Post----------
Why not just simply use p {font-weight: 200;} instead, this might solve the problem and would probaly be easier to read (at least from an external persective)
Also try adding your font-family to body instead of html if this doesn't work
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;
I am trying to add some custom font in my site but unable to do. I am not sure if I am using a right or wrong path. Kindly help.
#font-face {
font-family: XfinityStandard
src: url('landingpage/fonts/XfinityStandard-Light.woff2') format("woff2");
where landingpage is folder name.
There are two main ways to check:
Is the font actually working (i.e. can you see it rendering properly), and
Inspect your page (e.g. in Chrome, right-click the text you expect the font to render on, and select Inspect from the drop-down menu. In your Styles tab, at the right-hand bottom of the page, there should be a section called Rendered Fonts. If you have implemented your font correctly, it should show here (in addition to the css hierarchy applied, where your font should be listed).
If your font is not showing here, make sure you follow the following:
The #font-face rule should be added to your css before any styles
Use your rule in your css by specifying the font as XfinityStandard and provide a fall-back like sans-serif, e.g. body { font-family: 'XfinityStandard', sans-serif; }
Make sure you have wide support, so when you specify your font, add an additional source for format('woff')
As Devansh J mentioned, make sure your font is relative to the css file
If you are still having issues, maybe consider a hosted font like Google Fonts, as follows: #import url(///fonts.googleapis.com/css?family=Montserrat which you can use as body { font-family: 'Montserrat', sans-serif; }
I'm trying to use Google Font on a page. In my html I used:
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,600' rel='stylesheet' type='text/css'>
And in my CSS:
#import url('http://fonts.googleapis.com/css?family=Open+Sans');
Still whenI use "Open Sans" with the font-family attribute it stays on Arial.
body
{
background-color: #F1F1F2;
font-family: "Open Sans", Arial;
}
Using google font on any webpage is very easy and you can load the fonts asynchronously.
If you don't use the direct code that Google font delivers and you simply load the following url:
http://fonts.googleapis.com/css?family=Open+Sans:400,600
You'd be represented the source code (CSS).
Now, copy and paste the displayed code in the CSS source of your website.
You can then use your selected google font(s) on your webpages using the following:
body
{
background-color: #F1F1F2;
font-family: 'Open Sans', Arial;
}
That's enough and it will work.
I have a hunch that your bootstrap is being loaded after the CSS for your Google font. Find the point that you are importing this CSS:
#import "bootstrap-sprockets";
#import "bootstrap";
Then add your Google code AFTER that to make sure that it is not being overwritten by the bootstrap.
Good Luck!
First of all, you dont need to do it twice! any one kind of FONT ASSOCIATION is enough !!
Warning that overuse of #import may cause a overhead!
Bootstrap(if you have used it) usually overrides the font with -> font-family:"Helvetica Neue",Helvetica,Arial,sans-serif
Working Demo -> Click here
Note : I have added the font as external resources. It seems to be working properly !
just do !important after the font style you want to use
I'm using the Google Web font "Buenard" and having a difficult time getting it to display on Chrome. I know there are issues with font rendering and hinting across the various browers, but this is something else altogether. Instead of the intended font, Chrome is displaying some other dingbat font on my system. It looks great in Safari.
I can't share a link, because the site in question is behind a protected login. However, check out this screenshot to see what I'm looking at:
http://bit.ly/ImiiDM
In the CSS, I am using a font stack of '"Buenard", Georgia, "Times New Roman", serif;' I tried also just using '"Buenard", serif;' No effect.
Any ideas?
Instead of using stylesheets to attach the font just search the web for your desired font and download it and attach it like so:
#font-face {
font-family: buenard;
src: url('buenard.ttf');
}
After that you can use it just like a normal CSS declaration:
p.custom_font{
font-family: buenard; /* no .ttf */
}