This is related to question 7910391, but I don't see it as a duplicate, since the other question is about CSS. I want to know why the browser is failing here.
Try this out:
Open IE9
Open IE9 dev tools (F12)
Select a text element
Change the font-family on it to "Goudy Old Style"
If you're like me, you'll find the text is suddenly in italics. Why?
I'm on Win7...don't know if this is specific to this OS, but I do have normal Goudy font on the system.
It is possible that IE is using it's own fonts library separate from that of Windows, and it doesn't contain the non-italicized version of the font.
You can try to make a font face (they will override system & browser fonts.)
Start here:
http://www.fontsquirrel.com
Related
I'm using Safari for Mac on OSX El Capitan (my Mac is early 2009 so doesn't allow any ore updating).
When I visite www.mediamarkt.nl I often see question mark icons where the fonts should be. Like this:
I went inside the console and figured out it had something to do with the Geomanist font. Cause when I switch if of on various elements that show those question marks, the texts is readable again. The same when I change Geonamist to for example Arial.
On Chrome it works normally and also on Safari on OSX Sierra (which I can't install cause my Mac is old). I suspect it has something to do with the way the Geomanist font is begin coded into the website. Can someone figure out what is done wrong in this font css coding? Something that isn't quite compatible with older Safari versions?
I assume it has to do with the format of the font file Mediamarkt is serving. Their custom fonts are served in woff2 format, which all modern (evergreen) browsers support. However your older version of Safari might not, as you can see in this support table on caniuse.com, https://caniuse.com/#search=woff2.
Hope this helps.
I'm having a problem with a Wordpress based site I'm building on: In Chrome, on Windows 7, the body text on the sites' homepage is set to display as a Google Font. However the last line of the text is displaying as the default sans-serif font.
I have thought about asking about this on Wordpress.org but as the problem is confined to one browser on one OS (albeit the most commonly used browser on the most commonly used OS, natch) thought better to ask here. Have been looking all day and not seen anyone else have the same problem.
It's the latest version of Chrome and there is no problem in IE, Firefox, Opera etc. No problems (as yet...) on any other platforms at all.
There don't appear to be any problems with any other Google Fonts used in the site.
The site is currently hosted at http://best.videofeet.com
Upon inspection of the source there is no apparent reason why it would render like this.
I'm stumped.
Here's a link to an image of the problem (From VirtualBox on Mac - the only means I have available to me to replicate the bug as described by the client): http://imgur.com/XdJlCbc
OK, I'll take a stab at answering this now I've had a tinker. It looks like Josefin Sans does not have a glyph for ellipsis (…), so Chrome is swapping out that line. There are other people experiencing this with other Google fonts:
https://code.google.com/p/googlefontdirectory/issues/detail?id=204
http://wordpress.org/support/topic/a-problem-with-ellipsis-the-google-font-story
The lack of ellipsis can be tested here
Either swap the ellipsis for three periods and risk the wrath of typophiles, or change the font I'm afraid.
Before and after image showing the paragraph tag with the ellipsis removed in developer tools here:
http://i.imgur.com/RmQwlaa.jpg
This question already has answers here:
How can I determine what font a browser is actually using to render some text?
(5 answers)
Closed 8 years ago.
Imagine I have the following CSS
font-family: 'Non-existant Sans', Arial, sans-serif;
Assuming 'Non-existant Sans' is not installed on the system, Arial will be used by the browser. Using Chrome, is there any way of finding out which font is being rendered?
Edit: Dave (in the comments to the question) has pointed out a similar question. I'm specifically asking about Chrome here. Many of the answers in the other question suggest extensions which are okay, however; is there a native way of determining this information using the Dev Tools alone?
Edit Sept 2013: The Chrome team have just announced that font-family inspection is now available in the latest builds of Chrome Canary (Twitter link contains an image with more info). This should trickle down through dev > beta > stable over the next few weeks – great news!
In Google Chrome devtools in the 'Elements' tab, under 'Computed':
I'm a bit late to the party but I've just discovered a very simple way to debug which font your browser is using.
In the Chrome Web Inspector, go to the font stack in the CSS pane of the Elements Panel. Then, starting with the top of the stack, change the name of the font (I add random letters) while keeping an eye on the text in question. When you change the one in use you will see the text change font as it falls back to the next one in the stack.
I assume something similar is possible in most dev tools
Voilá
If you don't want to use a plugin there is a bookmarklet that will tell you this (once activated and you hover over said text):
http://chengyinliu.com/whatfont.html
Your 'Non-existant Sans' can be rendered with #font-face in your css.
http://www.w3schools.com/cssref/css3_pr_font-face_rule.asp
I don't know of a way to detect font rendering, so I don't technically answer your question. I did find this: http://webdesignerwall.com/tutorials/css3-font-face-design-guide
it's a javascript called Modernizr that ensures if a browser doesn't support #font-face then it will load fallback fonts such as Arial and Helvetica.
I found an open font I liked (Crete Round) and designed some screens in Photoshop with it. When it came time to set up the CSS, I tried using both Google Fonts and fontsquirrel.com's downloadable "kit" (a zip file with four different types of fonts and a ready-made stylesheet), but both gave me strange results on Mac.
Photoshop — What I want it to look like:
Yuck — Chrome (and Safari) on Mac using an #font-face kit from fontsquirrel.com:
Chrome (and Safari) on Mac using Google Fonts (basically identical):
GOOD —Chrome on Windows (fontsquirrel):
GOOD — Hack. I found out that with any opacity (not text color alpha) less than 1.0, Chrome gave me good results (but Safari was still bad.)
Chrome on Mac using fontsquirrel, with opacity:0.999;:
Does anyone have any ideas on what is going on here, or what I might be doing wrong?
I don't think you are doing anything wrong. I also don't think there is a way around it, other than to use images instead of text where the style is absolutely crucial.
I found THIS LINK which discusses rendering engines on different operating systems (also taking different browsers into consideration).
I hope this helps!
try
html { -webkit-font-smoothing: antialiased; }
This question already has answers here:
How can I determine what font a browser is actually using to render some text?
(5 answers)
Closed 8 years ago.
Imagine I have the following CSS
font-family: 'Non-existant Sans', Arial, sans-serif;
Assuming 'Non-existant Sans' is not installed on the system, Arial will be used by the browser. Using Chrome, is there any way of finding out which font is being rendered?
Edit: Dave (in the comments to the question) has pointed out a similar question. I'm specifically asking about Chrome here. Many of the answers in the other question suggest extensions which are okay, however; is there a native way of determining this information using the Dev Tools alone?
Edit Sept 2013: The Chrome team have just announced that font-family inspection is now available in the latest builds of Chrome Canary (Twitter link contains an image with more info). This should trickle down through dev > beta > stable over the next few weeks – great news!
In Google Chrome devtools in the 'Elements' tab, under 'Computed':
I'm a bit late to the party but I've just discovered a very simple way to debug which font your browser is using.
In the Chrome Web Inspector, go to the font stack in the CSS pane of the Elements Panel. Then, starting with the top of the stack, change the name of the font (I add random letters) while keeping an eye on the text in question. When you change the one in use you will see the text change font as it falls back to the next one in the stack.
I assume something similar is possible in most dev tools
Voilá
If you don't want to use a plugin there is a bookmarklet that will tell you this (once activated and you hover over said text):
http://chengyinliu.com/whatfont.html
Your 'Non-existant Sans' can be rendered with #font-face in your css.
http://www.w3schools.com/cssref/css3_pr_font-face_rule.asp
I don't know of a way to detect font rendering, so I don't technically answer your question. I did find this: http://webdesignerwall.com/tutorials/css3-font-face-design-guide
it's a javascript called Modernizr that ensures if a browser doesn't support #font-face then it will load fallback fonts such as Arial and Helvetica.