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
Related
This morning my webpage and whole website looked totally different.
Although I didn't even touched anything. I found other people on the Google product forum who complain about the same thing. But I want a solid solution.
I use a css file from where I import the font
#import url(https://fonts.googleapis.com/css?family=Josefin+Sans);
This is used on every page.
Now it seems that Google changed the font this night into a, for me, horrible looking font.
Now I found another font, which I want to download and use on my server, so this kind of google jokes never effect me anymore.
But I can't if I can do this and how.
My question is: can I download a font store it on my server and use it in my CSS?
Sure, you just need to define the font in your CSS and where it is located
You can define a font with
#font-face { font-family: 'myfont';
src: url('path/to/yourfont.ttf') format('truetype'); }
and then use it like this (with a Fallback to a default font):
.classname {
font-family: 'myfont', Arial, Helvetica, sans-serif;
}
I found a 'fast' solution for this
The 'thin' version was used here, but was not specified. Google changed the options and you need to specify with specific font version you want. In my case it was
#import url(https://fonts.googleapis.com/css?family=Josefin+Sans:300);
My website looks 'normal' again :)
The Google blog forum discribes some other solution
Google blog
I'm going mad with an issue and I wonder if anyone can help. I'm currently using http://font-combinator.com to see what different style of fonts look like together. This website simply loads fonts in from Google Fonts and displays them onscreen.
Now I choose a font, think it looks ok, and head over to Google and download it. I then paste that font into my local font directory so I can see what it looks like locally, and add it's name in my css like so:
font: 100%/1.6 "Font name here";
color: #bbb;
font-weight: 400; (for example)
Problem is when I look at it in the same browser as I did the Font Combinator, it looks rougher and more jagged. No settings have been changed. The font on both sites is 16px. For reference I am using Windows XP with cleartype turned off (I don't like it).
Now if I link to Google Fonts directly through my website, then it displays the same as on the Font Combinator. I don't understand how installing the same font that Google uses produces a different result? Ideally I would like to host the font on my website myself, but can't see a way around this? Am I doing something wrong, or is there something I've missed? Thanks!
For reference I am using the following reset:
html,body,etc.... {
margin: 0;
padding: 0;
border: 0;
outline: 0;
list-style-type: none;
font-size: 100%;
}
Edit: #Fontface code that I've used, that does seem to look the same!
#font-face {
font-family: 'Molengo';
src: url('./fonts/Molengo-Regular.ttf')
format('truetype');
}
(just picked this font as an example)
I had same problem and it's a mess and hard to solve. The main problem is that the font you've downloaded is not actually the "same" that google webfonts provides.
The font family is the same, but Google can provide it in different formats. The font that you've installed on your system is probably a .ttf file, that's a truetype font and Windows can use it. But, if you look the css that Google serves you when you includes a font, it's something like this:
For this:
http://fonts.googleapis.com/css?family=Open+Sans
you get this:
#font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: local('Open Sans'), local('OpenSans'), url(http://themes.googleusercontent.com/static/fonts/opensans/v8/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}
As you can see, if there is no local matching, it requests the font BUT in woff format, it's the same font but in another font format. In fact, I've done this example using chrome, but the css that google provides choose the best font format depending on browser and SO that made the request.
That's the reason why you see same font family rendering so different, the local one is .ttf, the another could be woff, svg (I think for IE), and there is other posibilities. And same font on different formats looks different, sometimes too much different.
I think the best choice is to create that css by yourself, not asking it to Google, and remove the local part, but it's important to add the other formats, other way it will not work on all supported browser.
This is potentially a duplicate of this question but this was my answer to that:
Fonts render differently based on:
Screen/Monitor resolution
Browser
Operating System
Size of use and hinting
Without seeing your code the only things I can recommend are:
Making sure you are using decent reset css (something like this: http://meyerweb.com/eric/tools/css/reset/).
Try adding font-weight: normal; to fonts to see if this makes a difference; sometimes browsers and frameworks try adding a fake bold to things.
Assuring you are using the actual versions of the fonts and not just applying CSS styles.
If all else fails then try bumping the font-size up/down a small amount and see if the font hints better at these sizes.
Some people also recommend not using the #import or direct link from google. Perhaps try downloading the file and using #font-face in your css.
Hope this helps!
EDIT:
If you’re hosting the font yourself — double check the #font-face call. Make sure you are calling all versions possible of the typeface. Also, Some browsers prefer certain formats being called earlier.
I have recently struggled with achieving smooth Google Web Fonts, primarily on Windows Google Chrome.
I had previously been using the direct stylesheet code, ripped from the URL that Google Web Fonts supplies, eg., Google supplies:
<link href='http://fonts.googleapis.com/css?family=Titillium+Web:200' rel='stylesheet' type='text/css'>
So I go to the URL and use the following code
#font-face {
font-family: 'Titillium Web';
font-style: normal;
font-weight: 200;
src: local('Titillium WebThin'), local('TitilliumWeb-Thin'), url(http://themes.googleusercontent.com/static/fonts/titilliumweb/v1/anMUvcNT0H1YN4FII8wpr-K9kSItTeDn2USN0q77Oh4.woff) format('woff');
}
I figured this was a cheeky way to save a little more speed rather than making a request to Google, which then appears to make another request to source the font.
I recently discovered that this was the cause of the rendering issues (see the following example for how the Windows Chrome browser renders on the Web Font page, compared to a test page I created using the process: http://imgur.com/OV2U1,ema2B)
My question is, why does the <link /> version make the font smooth, when it is sourcing the same font with my shorthand method? And also, is there any reason why I should be using this approach, which I figured would cut request times?
There are a few issues that may answer your question. The main one is that the linked URL actually displays different CSS for different browsers. So if you open it in Chrome and copy that CSS then it may not work in Internet Explorer (particularly pre version 9).
Also, you are using a font weight of 200, which is a "light" weight. The default of regular text is 400. So there is a small chance that certain browsers simply don't show the font unless you specify a font weight of 200. Something like this should help:
body {
font-family: "Titillium Web", sans-serif;
font-weight: 200;
}
Add this to your CSS-file:
#import url('http://fonts.googleapis.com/css?family=Titillium+Web:200');
I have a problem with Arial (maybe other fonts too) in Chrome/Chromium.
It looks good when I use font-family: Arial;
But when I include Arial font-file via #font-face it looks different!
Why could it be? What can I do to make them look the same? Where exactly Chrome takes its fonts?
Here is my css
#font-face {
font-family: 'My Arial';
src: url(Arial.ttf) format('truetype');
font-weight: normal;
font-style: normal;
}
body {
padding: 20px;
font-size: 16px;
}
body#native {
font-family: Arial;
}
body#fontface {
font-family: 'My Arial';
}
Here is the rendered text:
.
Sorry for my English, it's not my native language.
I use #font-face a lot, and there's always a difference in how different browsers render it. With some fonts it gets really ugly, in your particular case, I'd say difference is insignificant, and everything else just as Sparky672 already commented.
If you absolutely must have pixel-precise identical rendering on all systems, maybe some javascript based solution may help, check this:
https://stackoverflow.com/a/692994/525445
Again, if this was my site on your screenshots, I'd be perfectly happy with how it looks.
It's just the nature of the web that not everyone will see the identical thing, there are different monitors with different color settings, different resolutions, some people zoom in the text etc.
Just to mention the option, you can detect Chrome with JavaScript and then apply some specific CSS to tweak it.
Is the Arial file you're including with #font-face the same exact file from your system or did you get it from somewhere else? There could be difference in the files that's causing the difference. If not, then as #Sparky672 said in his last comment, there's not much you can do, it's just a browser rendering issue.
Also, out of curiosity, why are you including Arial with #font-face, since it's available on virtually every system?
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;
}