I have a website, which is a internet forum, and in my forum posts, I have the following font:
font-family: 'Segoe UI',Tahoma,Arial,Helvetica,sans-serif;
Now, here's how it looks like in different browsers: (from left: chrome, firefox, IE)
As you can see, chrome is displaying whole different font than the other two. Why? How do I fix that (I want this font to look like the other two)? Also, this is the link to the page I made screenshot of: https://scyk.pl/Forums/Thread/Na%20luzie/8 (look at the post contents)
What is happening is that Google Chrome most likely does not have that font, and is using the fall back fonts instead. To make sure this doesn't happen, you can explicitly load the font using
#font-face
in CSS3, which allows you to explicitly load the fonts by referencing it. You can learn more about using #font-face HERE, where you use src: and get the url of whatever font you are using.
If the font is not that important, however, I recommend not worrying about it and just letting Chrome use the fallback fonts instead.
To do #font-face, the code would be:
#font-face {
font-family:Segoe UI;
src:url(https://github.com/shawnphoffman/shawnphoffman.com/blob/master/Content/fonts/segoe-ui-semilight.woff);
}
You may have to go to the github link and download the raw version of the font, then reference it there.
You have several options but I think you'll find all of them unsatisfactory:
Render the page into an image on the server and send that to the client.
Get the source code for Chrome and replace the font rendering engine with the one used by Firefox.
Oh, btw, it will also look different on Safari (probably a lot different to the other three; Safari is a very sophisticated browser and it will try it's utmost to make a page look good; driving web designers insane in the process is a small price to pay for beauty ;-)).
Rendering text is something that you only have limited control over. Maybe Chrome doesn't find Segoe UI, maybe the font rendering engine can't use the hinting of your font. While not ideal, I suggest not to spend too much time on it.
Related
I'm trying to build a web page and need some kind of fairly distinct cursive font (not too crazy, but still distinguishable from standard print). However, when I look at this page in Firefox: https://www.w3.org/Style/Examples/007/fonts.en.html
My browser renders all of them in an approximately standard font--none of them look nearly cursive enough. Since this is just an out-of-the-box installation of Firefox, I imagine this is how it will render on most users' screen if they're using the same.
Is there any way to force render a more cursive font for someone using standard Firefox?
As was mentioned earlier, the font in that example varies depending on device, not browser.
When you set a non-specific font-family in your stylesheets, e.g. font-family:sans-serif; or font-family:cursive; what font that actually gets used will depend entirely on that visitors operating system and what fonts are installed there.
In that link it shows you various system fonts that may or may not be installed, with system defaults as a fallback, with a picture next to each showing what it should look like if your system has that font. This will differ from person to person. It gets quite complicated when you consider that sometimes the fallback fonts can even vary between OS versions.
So for more complete control, many developers turn to webfonts. I use a lot of Google fonts for my websites; https://fonts.google.com/
There are different ways of using a webfont, but I find this way simplest;
/*put imports at the top of your stylesheet*/
#import url('https://fonts.googleapis.com/css2?family=Lobster&display=swap');
h2 {font-family:"Lobster", cursive;}
<h2>I'm A Webfont</h2>
On my website, for some reason the Arial font is displayed differently on several devices.
It was fine and the complaints started to arrive approximately a month ago and I suspect that the root cause is somewhere locally (browser or OS).
All the problematic users sit on different versions of Windows and mostly use Chrome (but no everyone).
Tried to investigate this issue but did not find something in common.
Is anybody faced such a problem already?
Code:
<h1 style="font-family: Arial;">Title</h1>
I suggest you to put your fonts file in your website directory and set path from your directory.
(some times maybe that device has not your font.)
in top of your css file:
#font-face {
font-family: "BYekan";
src: url("../font/BYekan.eot?#") format("eot"), url("../font/BYekan.woff") format("woff"), url("../font/BYekan.ttf") format("truetype");
}
use it:
body{
font-family: "BYekan";
}
Yes, there is a reason for this. There's nothing to state that any given device, or browser for that matter, must adhere to any given standard for the rendering of fonts. Consequently, it's prudent to create overall website designs with the assumption that text will render inconsistently across browsers/devices. As soon as you assume rendered text will "fit in to this/that space" you're in trouble.
Instead create a design that deals with the issue of font rendering elegantly.
This should not be surprising, and what you call the "root problem" is actually not a problem, but simply how fonts work in the browser.
Without an explicit #font-face rule and real font sources, you're telling the browser that you don't really care what it loads, as long as the font that gets loaded matches, roughly, what you're asking for. If you ask for "Arial" then the browser will ask the OS for a font that claims to be in the Arial family, and different devices may (or rather, will) have different versions of Arial installed. So your content's going to look different for different devices.
However, and something a lot of people forget, it doesn't matter if that's the case. What matters is that your site content looks consistent. People are not going to look at your site on two computers at the same time and then notice that they don't look pixel-identical. Individual users are going to look at your content on one device at a time. So: is the look consistent on a single device? Great, you're done. Which version of Arial is actually being used is pretty much irrelevant in that case.
[Problem] -- I am having a problem with web fonts rendering on a specific computer, other computers in my house render the text fine (same OS and browser versions). They look really bad and pix-elated I know all about differences between how browsers render things differently but its not supposed to look this bad.
[What I've Tried] -- I tried prioritizing the .svg in my CSS first on my site to fix it on Google Chrome but it did not help. I installed Firefox and discovered it too does not render the Open Sans font correctly either. I also have tried clearing my cache (I have a cache clearing plugin) and opening in a incognito window thinking a chrome extension was causing a problem but no difference. From the screen shot it appears Chrome at least renders the larger "Open Sans Condensed" but the smaller text is pixelated. Its weird a fresh install of FF also has the same problem as Chrome. Also tried downloading the font files from Google Fonts and installing them locally, no difference.
IE 11 renders the text correctly. I need trouble shooting ideas..
The screen shot below is from the official Google Fonts website located here http://www.google.com/fonts/specimen/Open+Sans#pairings so it should rule out any bad coding on my own page. The open sans font on fontsquirrel loads correctly and its not pix-elated.
Here is what I see and I don't think the fonts should look that pixelated... http://imgur.com/hwvupBq sorry too low rep to post images :(
Each browser loads the fonts using different formats. Usually you would use font-face with the four different types, EOT, WOFF, SVG AND TTF. You can use the Font Squirrel site to load your font and spit out the four different versions. Also, take a look at Google font embedding which takes care of the the work (although they will look slightly different in different browsers)
The problem ended up being that my Windows 7 machine did not have cleartype enabled. See this post to see how to enable it http://www.howtogeek.com/howto/28790/tweak-cleartype-in-windows-7/
I'm running into an incredibly frustrating issue with webfonts on my employer's website. (screenshot here: http://imgur.com/Pvb5lrl)
I've added all the font files and, as best as I can tell, written the code correctly. However, the text is rendering incredibly jagged and ugly in Chrome and Firefox. What's bizarre is that a simple test I set up using the same font files, same #font-face code, and same CSS for the text itself is rendering just fine in the same browsers on the same machine. Any idea what might be causing the crappy rendering on the full website? URLs to both are below for reference.
Company website: http://staging.lmsonline.com/services/email-marketing/
Simple test: http://datafulfill.com/fonttest/demo.html
Screenshot (Windows 7, Chrome): http://imgur.com/Pvb5lrl
Not sure, what your font is supposed to look like. At my end it arrives sort of Arial, which is pretty much the same as a generic sans-serif anyway. Playing around with fonts in the past taught me to address the issue in this order:
#font-face {
font-family:"Delitsch Antiqua";
src:url("/path/to/fonts/DelitschAntiqua.eot");
}
#font-face {
font-family:"Delitsch Antiqua";
src:url("/path/to/fonts/DelitschAntiqua.ttf");
}
First serve IE, then the rest. For some reason it never quite worked the other way around.
I was searching the best-practice to implement a font inside a website and I still didn't found a real answer to this.
On forums and blogs many people say that using #font-face is the best way, other using Typekit or Cufon.
I don't like these 3 options.
Font-face render my fonts grainy.
Typekit is not freeware and do not have all the font that I'd like to use.
Cufon use canvas.
There are other way to implement fonts?
There is a way to render it with no grain?
Screenshots:
Mac
Windows
Font rendering depends on the Operation system, some of the font specific settings in the OS, the browser and the font itself. The better the font is prepared for screen usage (hinting,…) the better it looks. Their is no »do it like this and it is always fine way«, there are too many factors that play a role. In the images above you are trying to render very thin font, this is always problematic, especially if the font is badly hinted and/or set in a small size. The advantage of services like TypeKit and google webfonts are that they provide you with screen optimized fonts, so if you are not familiar with fonts themself you should prefer some prepared fonts, or optimize the font yourself if it is too bad. You should also keep in mind that not every font is suitable for screen usage and i think that can be one reason why google and typekit do not provide all fonts.
good luck…
EDIT:
once I forgot to enable some kind of font rendering option on windows, I think it was somewhere at: leftclick computer > properties > performance, but I am not sure where exactly, I do not use windows anymore to find it, but the start was at »leftclick computer > properties« and it was about the »antialiasing« of fonts. After ticking the box it looked much better. It was a thin font too in this case…
greetings…
What exactly do you mean by 'grainy'? I only ever see that in older versions of internet explorer, and there are CSS properties for font smoothing.
Using TypeKit uses #font-face, it's just loaded in a different way. Have you tried Google's webfonts too?
Here is a great article on the best method to use: http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/
#font-face {
font-family: 'Graublau Web';
src: url('GraublauWeb.eot?') format('eot'),
url('GraublauWeb.woff') format('woff'),
url('GraublauWeb.ttf') format('truetype');
}