Good Morning,
Today my Google chrome browser updated to 42 (42.0.2311.90), I have noticed alot of things going wrong with the site I'm working on, text will go through divs, padding being ignored.
The interesting thing is if you inspect the element and untick anything and tick it back again it starts working fine. No issues in any other browser or previous version of chrome (colleague still has 41). If you refresh the page a number of times the site appears correctly. If I delete the #font-face, the site works correctly.
It would appear that chrome seems to have either changed the way it draws/renders the external font or, it loads this last after drawing all the other elements.
Does anyone know any possible fixes or smooth way to use #font-face to make it (new version) chrome friendly?
#font-face {
font-family: 'MyFontFile';
src: url("../css/fonts/MyFontFile.eot") format("embedded-opentype"),
url("../css/fonts/MyFontFile.ttf") format("truetype"),
url("../css/fonts/MyFontFile.svg") format("svg"),
url("../css/fonts/MyFontFile.woff") format("woff");
font-style: normal;
font-weight: normal;
}
In order to fix this, I had to force the browser to redraw. Putting the following jquery in, this forces the browser to redraw.
$('body').hide().show(0);
Related
I am working on a website based on a series of old video games called Quest for Glory, which involves using original fonts from the games. One such font is called gloryquest, and I notice it displays just fine on browsers such as Chrome, Brave and Opera but does not display on Firefox. Whenever I look at this site in Firefox, it only shows the fallback font.
Here is a link to screenshots showing the difference.
The issue is evident on these pages:
https://bdferr.github.io/quest-for-glory1.html
https://bdferr.github.io/quest-for-glory4.html
https://bdferr.github.io/qfg-book.html
The font is a TTF which I have uploaded into a fonts folder in the same directory as the other website files on Github. Another font in the same folder, called Sierra-SCI-Menu-Font, displays with no problems, as seen here:
https://bdferr.github.io/quest-for-glory3.html
The only difference I can see between the two is that the one with the problem (gloryquest) has a fallback font, Pixelar Regular W01 Regular, which is linked to from a tag in the head like so:
<link rel="stylesheet" href="https://fast.fonts.net/cssapi/35bb4fcb-e728-4a43-9ecf-79aafffd52cb.css"/>
Another TTF font called cardinal-regular has a similar problem. It always displays in Chrome and other browsers, but never in Firefox. It is specified in the relevant stylesheet like so:
#font-face {
font-family: cardinal;
font-style: normal;
src: url("/fonts/cardinal-regular.ttf") format("ttf");
}
Gloryquest is specified in the relevant stylesheets like so:
#font-face {
font-family: gloryquest;
font-style: normal;
src: url("/fonts/gloryquest.ttf") format("ttf");
}
The one that always works is specified like so:
#font-face {
font-family: SierraSCImenu;
font-style: normal;
src: url("/fonts/Sierra-SCI-Menu-Font.ttf");
}
That is, I do not specify "format("ttf")" there, but if I leave that out for the other pages I get error messages like this:
Failed to decode downloaded font: http://localhost:8000/fonts/gloryquest.ttf
OTS parsing error: cmap: Failed to parse table
I do not get any error messages from Firefox. I do not see any problems using the fonts on my own machine, such as in Word.
Please advise!
I am using the following font-face rule:
#font-face {
font-family: aiCustomFont;
src: url('../fonts/myriadpro-regular.otf') format('opentype'),
url('../fonts/myriad pro regular.ttf') format('truetype');
}
This works exactly as expected for Safari, Chrome, and Firefox. It does not work at all for IE11 and Edge. I am not seeing any errors logging to the console or anywhere else. I have found many articles on font issues in IE but most of them are several years old.
Do I still need different font formats outside of TTF/OTF for the font to display in IE11/Edge?
If anyone stumbles across this post, I ended up just using a more web-friendly font.
Make sure your #font-face rules are NOT contained in media queries. #font-face rules contained in media queries do not work in IE, Edge, but work in every other modern browser I tested on.
I have been trying to get the ttf files rendered in Chrome and Firefox but it just doesn't seem to work. While rendering the .woff file is working fine.
I downloaded the collection from http://www.google.com/webfonts#UsePlace:use/Collection:Philosopher and then renamed the Philosopher-Regular.ttf to fancyfont.ttf and then tried:
#font-face {
font-family: 'Fancyfont';
src: url('fonts/fancyfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
But the font just doesnt seem to add on to the webpage. However if i rename the woff file to fancyfont.woff and try :
#font-face {
font-family: 'Fancyfont';
src: url('fonts/fancyfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
then it all works fine for Chrome and Firefox.
Any solutions to this problem as i have seen the ttf files being rendered onto the browser?
Do not download a TTF from the Google Font API website. It is not intended for you to download the fonts. Instead, you link to a stylesheet which contains #font-face definitions for the font(s) you want to use.
<link href='http://fonts.googleapis.com/css?family=Philosopher' rel='stylesheet' type='text/css'>
(Do not include multiple <link>s if you want several fonts; instead, use the tool to add all the fonts you want in your page to a collection, and it will generate the appropriate <link> tag.)
Letting Google host the fonts is just like using a well-known CDN for jQuery: there's a good chance that a significant portion of your users will already have the font cached before they even come to your site (by virtue of the fact that they may have browsed other sites that used the same font).
Note that the CSS you link to from the API is actually generated for each individual request by Google's server, tailoring it to the user's browser. Based on the user agent, the most appropriate formats (WOFF, EOT, TTF, etc) are selected and only those are listed in the stylesheet.
Because formats like WOFF are much more efficient size-wise than TTF, most browsers will never see a TTF version. Don't worry though – your font will be rendered correctly in all browsers.
I had some issues rendering a TTF font inside Chrome. convert it into Woff solved it. There is some good onlines services for that. You can find them easily. Also, the size of my font got smaller : 29 Ko to 6 Ko, I don't see anymore reasons to use TTF
Actually the issue was that the TTF files can not be renamed or that they should not be renamed. As I did the same they were not being rendered by the browser. While the renaming of the WOFF is just fine as they are compressed files.
The issue was definitely renaming as when i used the Philosopher-Regular.ttf in font face as :
#font-face {
font-family: 'Fancyfont';
src: url('fonts/Philosopher-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
it worked just fine.
When using Google Web Fonts on Chrome under windows 7, the fonts seem to render incorrectly, while on a Mac OSX (on Chrome, Safari and Firefox) it looks fine. Is there a way to prevent this via CSS or HTML?
The site introducing this behavior can be found here (it might take a while until it loads).
Here's a snapshot showing this:
Alright so this has to do with the way Chrome renders fonts in windows. There is a tool you can use called MacType which changes the rendering engine that windows uses to render fonts.
You can download it here: https://code.google.com/p/mactype/
From everything that i have researched, with google web fonts on windows there currently does not exist a way to fix this issue.
Its simply by design how it works.
You can follow the issue on Chromiums Google Code site..
https://code.google.com/p/chromium/issues/detail?id=137692
heres a snip from the above link that goes in to more detail
As I understand it: the main problem is the fact that Chrome continues
to use the old Windows GDI for rendering fonts, and it looks poor. All
other modern browsers (except Opera) have switched to using
DirectWrite on Windows, resulting in much better font rendering,
leaving Chrome lagging.
If you look back at older versions of IE and Firefox you'll see their
font rendering a few years ago looked exactly the same as Chrome's
does today on Windows. People just didn't notice as much back then as
nobody was using web fonts; when you're using Arial, Verdana etc they
look OK because those fonts have been carefully designed and hinted to
work well with the GDI engine. Most web fonts have not.
for developers, one work around is to put SVG first, doubt this is proper though
-before--------------
#font-face {
font-family: 'chunk-webfont';
src: url('../../includes/fonts/chunk-webfont.eot');
src: url('../../includes/fonts/chunk-webfont.eot?#iefix') format('eot'),
url('../../includes/fonts/chunk-webfont.woff') format('woff'),
url('../../includes/fonts/chunk-webfont.ttf') format('truetype'),
url('../../includes/fonts/chunk-webfont.svg') format('svg');
font-weight: normal;
font-style: normal;
}
-after--------------
#font-face {
font-family: 'chunk-webfont';
src: url('../../includes/fonts/chunk-webfont.eot');
src: url('../../includes/fonts/chunk-webfont.eot?#iefix') format('eot'),
url('../../includes/fonts/chunk-webfont.svg') format('svg'),
url('../../includes/fonts/chunk-webfont.woff') format('woff'),
url('../../includes/fonts/chunk-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
I found some solution here and it works for me
Have added a temporary fix with the following code...
$('body')
.delay(500)
.queue(
function(next){
$(this).css('padding-right', '1px');
}
);
I am trying to use custom fonts on my website and in the css I have the following code:
#font-face {
font-family: 'Sketch';
src: url('../fonts/Sketch.eot');
src: url('../fonts/Sketch.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
ul#holder {font-family:'Sketch'}
The fonts do appear as they have to in Firefox. In chrome, the font do not seem to be rendering smoothly and do not appear as good as in firefox (Should I drop the idea of using fonts in my sidebar and use images which would show the smooth text instead? ;-/)
In IE, the fonts are not appearing at all. What should be done to get proper smoothening of these fonts in Chrome and get these working in IE?
Different browsers supports different font formats:
So you need to create your font in all formats. You can use Font Squirrel (thank you, effectica).
And then, you can import them like that:
#font-face {
font-family: 'Comfortaa Regular';
src: url('Comfortaa.eot');
src: local('Comfortaa Regular'),
local('Comfortaa'),
url('Comfortaa.ttf') format('truetype'),
url('Comfortaa.svg#font') format('svg');
}
That's not the only possible way. You can find more complete information on this question at Paul Irish's blog.
And, anyway, their appearance may differ a little in different browsers.
All the main browsers have slightly different font rendering engines / techniques and they have different quality of rendering output. So your fonts are unlikely to be 'pixel perfect' between the various browsers and some quality differences will appear. Which one ends up looking the best depends on the font. I have a glyph font that looks great on Chrome and IE but looks a little washed out in Firefox...
Anyway, there is a little hack that you helps you to get fonts to work on IE, see the second src line. This is needed because whilst adding extra font formats ensures support for every browser, unfortunately it causes problems in versions of IE before IE9. Those older browsers see everything between the first url(' and the last ') as a single URL request, so will fail to load the font. This hack tricks the browser into thinking that the rest of the src property are arguments of that query string, so it goes looking for the correct URL and loads the font:
#font-face {
font-family: 'Sketch';
src: url('../fonts/SketchRockwell.eot');
src: url('../fonts/SketchRockwell.eot?#iefix') format('embedded-opentype'),
url('../fonts/SketchRockwell.woff') format('woff'),
url('../fonts/SketchRockwell.ttf') format('truetype'),
url('../fonts/SketchRockwell.svg#countersoftfontRegular') format('svg');
font-weight: normal;
font-style: normal;
}
The above came from Font Squirrel’s #font-face Kit Generator which can be accessed at http://www.fontsquirrel.com/fontface/generator. There you can upload your font and convert it to whichever formats you wish. You can also control the CSS syntax it outputs, subset the characters to reduce file size, and use more options to fine-tune the fonts
Also if you are going to use Bold or Italic on you text then you need to include version of the rule that change the font-weight and font-style accordingly for each combination, so the browser knows what font to use when it encounters a CSS rule with bold in it.
Each font typically has a design purpose and was created for a specific job. Most commercial fonts were not designed to be viewed at small sizes on a screen, so in many cases it makes the most sense to reserve these #font-face for headings and continue to use web-safe fonts like Georgia and Lucida for body copy.
Another aspect of fonts that can affect legibility is how they are anti-aliased and hinted. Right now, web fonts are generally more jagged around the edges than traditional fonts, even when anti-aliased, usually because most were not designed to be viewed on screen. Higher quality fonts, as well as fonts that were designed for the web, have better hinting,
Here is a great URL for creating embeddable font packs:
http://fontface.codeandmore.com/
Upload your TTF or OTF font and it creates the entire font kit for you, complete with
implementation HTML and CSS examples.
Cheers!
Edward said it all. Chrome used to drive me insane for the way it displayed certain fonts.
If you have the font file you can use font squirrel to generate the code as well as all font files that you need for all browsers.