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.
Related
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
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.
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
This question already has answers here:
How can I determine what font a browser is actually using to render some text?
(5 answers)
Closed 10 years ago.
Yes, I know about addons such as Firebug or the Web Developer Toolbar that allow one
to see the font-family specification pertaining to a specific element, but how can I
find out which actual font is Firefox using to render the element?
To give you an example, suppose I declare, say font-family: "Georgia", "Verdana", serif;.
Now, the Georgia font is not installed in the system, and Firefox thus picks the next on
the list (Verdana). Is there some addon out there that will give me access to this info?
Note that I need this functionality for development, not for detection at runtime inside Javascript.
Nothing like this exists, as far as I know.
It would be easy to test fonts in turn by using something like this:
.myElement {
font-family:georgia, monospace;
}
In this case it's very clear whether Georgia is used or not, as it's not a monospace font.
You could use a modification of this script to add a bookmarklet in your browser for testing fonts: http://www.lalit.org/lab/javascript-css-font-detect