I have simple static page and I want to import a font. But the font displays very strange on Windows with Google Chrome browser. This font displays properly in other operating systems and browsers.
I imported font by using #font-face like this:
#font-face {
font-family: NoyhGeometric;
src: url("../fonts/Typesketchbook - Noyh Geometric Regular.ttf") format("truetype"),
url("../fonts/Typesketchbook - NoyhGeometric-Regular.otf") format("opentype");
}
I use Google Chrome browser in both images.
On Ubuntu (displays properly):
On Windows (displays strange):
Try adding font smoothing property in you css
body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
Ref: https://davidwalsh.name/font-smoothing
Most of the browsers support woff/woff2 format for fonts.
Go to SquirrelFonts to convert one font format with all the others. The website also provides a pre-made CSS for your convenience.
You should add a .woff or woff2 format to fix your problem.
The issue could be related to "Clear Type" not be "enabled" and Chrome on Windows apparently needs it to better render fonts. This does not resolve the issue as it cannot be controlled through css and javascript.
Try this page in Chrome on Windows: https://fonts.google.com/specimen/Old+Standard+TT
Observer the font not rendering.
Then try going to Start -> Settings -> Type in "Adjust ClearType text" and in the window that opens up check "Turn on Clear Type".
Then restart Chrome, navigate to the same page and observe that the font issue is resolved.
Related
I want one simple thing...my font to work on chrome.
#font-face{
font-family: "Iosevka";
src: url("http://www.some_url/iosevka-regular.woff2") format(woff2),
url('http://www.some_url/iosevka-regular.otf') format(opentype),
url('http://www.some_url/iosevka-regular.ttf') format(truetype);
url('http://www.some_url/iosevka-regular.eot) format(embedded-opentype);
}
This works on safari and firefox but not chrome. I am not exactly sure why
I have looked at several posts saying I need to add more font support so I have ttf, woff2, eot, and otf but this still doesn't work.
Does anyone know what is going on?
Simplest supported loading of a font on the web today. Only need one font file and it needs to be used.
Two CSS rules and a HTML tag.
Microsoft was the holdout for TTF although they were part of building the TTF. All systems have the license to use TTF and caniuse reports all browsers supporting it.
Note this does not mean you can use anybodies licenced font. It means you can use TTF to display the font.
OTF is open license so no license is required and supported by all systems including Microsoft edge.
Not sure of the status of Woff and SVG is not supported by Chrome.
#font-face {
font-family: "Logo";
src: url("/fonts/logo.ttf"); /* or url("/fonts/logo.otf") */
}
.logo {
font-family: Logo;
font-size: 80px;
font-weight: normal;
}
<h1 class="logo">
Browsers don't download the font until they need to use the font. But the font can be downloaded with Javascript if one does not like the normal behavior.
I'm beginner in HTML.
In browser not supported the all kind of fonts. Like old version of the mozila not supported the some kind of fonts. what are the fonts are supported in all kinds of browser.
I know in this case uses the font-family. For example I used the font family is:
{
font-family:cambria,Helvetica,monospace;
}
I create the pages and visual effect is done in my browser. In my browser support the first font is the cambria. Perhaps i display the page in the other system which support the Helvetica fonts.
My problem is I design the page for cambria fonts like font-size , line-height and etc
But in other system it will changes for Helvetica font family, so i don't get what i expect.
How can i manage the this kind of problem and what are fonts are supported in all kind of browser include the very old version browser also.?
#font-face CSS will bring in fonts for you have a look Google Fonts
#font-face {
font-family: TheFontName;
src: url(www.googletheFont.woff);
}
use generic fonts that work in all browsers/os like times, open sans etc.
or better use solutions like webfonts, font-face, google fonts, adobe typekit for custom fonts
I am using google webfonts and have come accross an issue with jagged and choppy font rendering in FF and chrome (IE11 renders them better).
Example can be found here: http://jsfiddle.net/PNYfR/
<link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Exo:300,400,700&subset=latin">
<p style="font-family: 'Exo', serif; font-weight: 400; font-style:normal; font-size:31px; color:white; background-color: #0085B2; line-heigth:1.42857; padding:100px">
Open Sans is a humanist sans serif typeface designed by Steve Matteson, Type Director of Ascender Corp. This version contains the complete 897
</p>
I've read related questions, but any of them don't offer simple solutions for quick projects:
Google webfonts render choppy in Chrome on Windows
Well rendered webfont solution
Google webfonts and windows xp
To complicate a bit more, our designer is using Mac, which renders fonts correctly.
Questions:
Is there a list of google webfonts which render OK?
Or is there a quick step by step solution on how to get fonts render correctly?
And last, is there an alternative free webfont provider, which serves fonts OK?
I've found that downloading the fonts I want to use, converting them to .svg using font squirrel (web application, google it) and hosting them on the web server seems to solve the issue. In the code, place the .svg font link above the others and Chrome will/should grab that first.
These are the defaults for font smoothing (with google fonts too) I use that seem to do the trick. Hope this helps
*{
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-shadow:none;
text-rendering: optimizeLegibility;
}
Known issue for years (first mentions from 2010). Developers promissed to introduce fix maybe this year. Problem (as I understand) is with enabling directwrite (for for font smoothing) within sandbox.
More here
http://www.reddit.com/r/web_design/comments/23cuif/yet_another_chrome_webfont_aliasing_post_why_is/cgvs5j2
or here: https://code.google.com/p/chromium/issues/detail?id=331115
Edit: Using SVG font can help for someone, but SVG is too blured for me (compared with antialiased woff in Firefox).
Specifying the font-weight to 400 fixed the issue completely for me. I think it is intially 700, at least for h2 and h1...
h2 {
font-family: 'Lobster', cursive;
font-size: 23px;
color:#fff;
font-weight: 400;
}
Firefox still wins, but it is not jagged anymore
Just go reset all flags in Chrome. Type in chrome://flags in the URL address bar and click on the Reset All Flags to default button. That should be on the right hand side of the settings page. It worked for me. If it does not for you, you may try enabling the Aero visual settings of your computer (only if disabled) then reset the flags. If resolved, you may then switch off the aero visuals.
To access the aero visual settings in Win7, go to My Computer properties > Advanced system settings > System Properties > Advanced tab > Performance (Settings). From there, toggle the current setting back to 'Adjust for best appearance (it should check all boxes under it). After resetting all flags and the fonts are back to normal, you may choose to toggle it back to Adjust for best performance. That essentially unchecks all visual options.
Thanks,
Dong
I have used Google font called http://fonts.googleapis.com/css?family=Merriweather:400,700,700italic on my website it looks good on Firefox and IE but not at the safari and Google chrome..... Please view the Image....
Image
I want it to be working on each of the browser without any pixelate issue
Requesting your best suggestion...........
Thanks
Just try this:
{
-webkit-text-stroke: 0.6px;
}
You cannot possibly control how a browser like Chrome renders fonts. You just have control over choosing the best font at best font-size.(Some fonts looks good only at certain font sizes - the font you are using looks good from 50px onward it seems. EDIT:Ah that is a different issue)
If you / your client is so specific you can even get help from some custom rendering like
Typeface.js
Cufon
which uses canvas/flash to render fonts. Using it extensively can cause performance issues or slowness.
There used to a font-smoothening, but I guess no longer supported, you can try it though -webkit-font-smoothing property has no effect in Chrome
you can smooth fonts by using
body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
read more: https://developer.mozilla.org/en-US/docs/Web/CSS/font-smooth
Can't seem to get my font working in firefox, seems to work fine in IE, chrome and Safari
<style type="text/css">
#font-face {
font-family: MyCustomFont;
src: url("http://www.brightonorient.com/MTCORSVA.eot") /* EOT file for IE */
}
#font-face {
font-family: MyCustomFont;
src: url("http://www.brightonorient.com/MTCORSVA.TTF") /* TTF file for CSS3 browsers */
}
</style>
This is the website here, http://www.brightonorient.com - the front page text Brighton Orient should be Monotype corsiva.
Thanks for any help
I typically use Font Squirrel for my #font-face needs and have never had an issue. Check this link to see if the trouble shooting tips provide any help. If it is any consolation, in Firefox on my machine I can see the font load just fine and render properly. Throwing FireBug on it shows the font loaded properly as well. Not sure why you're not seeing it work unless your Firefox is not up-to-date.
Technically, it works for me on WinXP SP3 with Fx 6.0.2 but not with Fx 11.0
Though, on the legal side (IANAL), it seems you don't have the rights to use Monotype Corsiva with #font-face: only Monotype does. See http://www.fonts.com/findfonts/detail.htm?productid=172339 and their service http://webfonts.fonts.com for maybe a solution.
Using it on your computer and distributing it to every visitor via your server are often two very different licences!
http://blog.themeforest.net/tutorials/how-to-achieve-cross-browser-font-face-support/
go to this link http://www.fontsquirrel.com/fontface/generator
upload your font
then download all files have different font formats which is supported for different browsers
and use in your project. now it will work accurately in all browsers