What tab in chrome inspector shows the font files you're loading via font-face? I can't find it under resources. I'm having an issue where one group of font-family files are loading, but another font-family is not. I have checked everything from going directly to the URL and seeing they are indeed present, but I would like to look in the inspector and see it loading the one font-family but not the other. Is this possible with chrome?
You can also select any text node in the elements panel, then look at the bottom of the computed styles tab to see what fonts are rendered for that element
You can view the downloaded web fonts using the Network tab:
The best way so far
You can actaully do rightclick: inspect > Application (on the top tabs) > Frames (scroll on the left tabs) Then you can find a Font section where all loaded fonts are listed. It also has a preview for the fonts. It lists all fonts that are loaded in any possible way.
The best part is that, It also previews them on the right, to make it even easier to find the one
Then you can right-click on the one you chose and click open in a new tab, and it downloads it. Then you can add a .woff at the end of the filename and use it anywhere you like. (you can get its extension on the bottom of the preview too)
Related
While in dev-mode in my application, I would like to be able to have links on the page that automatically take me to a specific file in the Chrome Dev Tools.
Is there any way to generate a URL that when clicked in Chrome, opens the Dev Tools at the Sources tab and at the desired file ?
You are able to "inspect the inspector": How do you inspect the web inspector in Chrome?
Simply undock it, then inspect DevTools itself with ctrl+shift+i. Then head on over to the sources tab in original (first DevTools), inspect it, and get its URI from Elements.
Or use chrome://inspect/#other
Example URI (first part only):
devtools://devtools/bundled/toolbox.html?remoteBase=https://chrome-devtools-frontend.appspot.com/ser…
Your requirement is somewhat specific, so I don't think it is possible (at least not natively).
You probably can achieve what you want extending DevTools with an Extension (see the documentation). This way, you can make your page interact with the extension to make it open a specific panel in Chrome Dev Tools.
I built a PDF in Illustrator, and am linking to it from a web page. It looks fine in SumatraPDF and in the Windows preview pane, but the browser renders this (just so you know, this is not how I want it to look)
Is this because I have font embedded? The only thing that I want to have happen with this is for a couple links on it to be clickable; otherwise, I'd convert it all to outlines. Is there something I need to do here that I haven't done?
EDIT: Here's a weird update about this. The browser follows the link embedded in the pdf when I click it. So it has the right data, but the wrong presentation apparently.
I'm assuming you are/were using either the Dev or Canary channel of Chrome. There was an experiment running in both channels that was causing this, which has since been reverted in Canary but is still affecting Dev 59.0.3053.X. For the more technical; this experiment enabled the PDFium code to use Skia to render paths instead of Anti-Grain Geometry and caused this font gibberish.
Here is the link to the bug report:
https://bugs.chromium.org/p/chromium/issues/detail?id=705039
UPDATE: This was fixed in the Dev Channel with update 59.0.3071.X
I have a page that displays the incorrect favicon when I view its source.
In the following image, you can see in the first tab (which is viewing the page) using the correct favicon - favicon-tenaya.ico.
However, when you go to view the page's source via Ctrl + U, it seems to display the default favicon - favico.ico, which is in the website's root folder:
Is there a way to get around this? We don't want the favicon changing when they view the source. How does the view source page in Chrome decide which favicon to use?
Viewing the source of a page is browser-dependent. There nothing you can do to force it to display a specific icon. For example, Firefox doesn't display any icon at all for a "View source" tab.
However, you can influence browsers to achieve this. For Chrome and your particular web site, replace the existing favicon.ico at the root of your web site with your favicon. This is what Chrome displays and yours is the black and white icon you don't want. Even better: rename favicon-tenaya.ico to favicon.ico (thus replacing the existing favicon.ico) and change the HTML accordingly.
As an aside, you don't need two declarations. Just keep the shortcut icon one, although the other one should do just as well.
Since Chrome does not parse the html it uses default file "/images/favicon.ico" to show as favicon in view-source. If it doesnt find it it look into different other locations too. for example if you use wordpress it uses http://[domain]/wp-content/themes/[theme]/images/favicon.ico
In Website, you can mention the favicon like below
<link rel="shortcut icon" href="/favicon-tenaya.ico"/>
and its working fine.
Where as in view source of chrome, they automattically find the favicon on below path
https://www.tenayalodge.com/favicon.ico
Favicon to be fetched from added favicon.ico after your website.
A very simple way:
put your favicon.ico file on the root of the website.
That should be accessed like: http://www.[domain].com/favicon.ico
When I click on an image link right now, Chrome downloads the image instead of opening it.
Even if I right-click and select Open link in new tab Chrome still downloads the image, and I have to go through the extra steps of opening the file for viewing manually.
This feels like a mime-type issue to me, but why would Chrome not recognize "image/png" as a valid mime-type for viewing? All PNG images display just fine in an HTML page.
NOTE: This only happens for PNG images.
The web server is probably serving the image using the image/x-png MIME type. Chrome does not recognise this as an image (as of August 2012 February 2013), hence offers the file as a download.
image/x-png is a legacy MIME type from the days before it got its official name, image/png, in 1996. However, when Internet Explorer uploads an image it does so using image/x-png "for backward compatibility". I believe this was the case up to IE8, and was "fixed" in IE9. If the web server does not correctly handle this (the web server should detect this non-standard MIME type and treat it as image/png), then it may serve up the client-provided MIME type to other users, including to Google Chrome. Additionally, some web sites will serve up all PNGs as image/x-png.
If you're the web developer you should detect incoming image/x-png and treat it as image-png (never serve up image/x-png).
If you're the user report it as a bug and see #kriegaex's answer for a workaround.
#Tom Clift is right, and here is my workaround for it: use Chrome extension Redirector and add a rule replacing the Content-Type header. That's it. :-)
You can use the Chrome extension Undisposition to achieve this.
When you right click on the image you need to select then 'Open image in new Tab' from the drop down and NOT 'Open link in new tab' this will then open the image in a new tab.
It's been a while since I did serious web development. Now I meet a host of brand new problems I'm no longer familiar with..
I have some .png images for various icons in my web page. What I find is that whenever I edit these images, they stop working inside a page in IE8. That is, they (usually) display OK when I first open the page, then are replaced by the placeholder icon on refresh. Sometimes, some of the icons display and others, with the same src, don't.
My image tags are nothing fancy, typically:
<img src="images/misc/smallreport.png" alt="Report" />
When I right-click an icon in the page and select "properties", protocol, type, address and size are shown as "Not Available", and dimensions are incorrect (size of the placeholder, I bet).
If I open the images directly in IE (ie. not within the page), they work just fine.
I have used Paint.NET to edit the images, but have also tried saving them with Paint.
Right now, I am working right off the hard disk (ie. not through a web server). And, oh yes, none of this happens in Google Chrome.
What's going on here?
check the path to the file is correct - can we see the tag please.
Well, we learn something new every day..
I mentioned that I'm running this directly off the harddisk? Now, it turns out the html page (which I had gotten off a coworker) was blocked "to help protect my computer", as Windows does.
This is no big surprise, lots of files I'm working with originate on other computers, and I usually don't worry much about it (except with executables, which won't run until unblocked).
It seems, however, that when IE8 loads such a blocked HTML file, its security settings adjust somehow, and - well, I can only guess at the details, but as soon as I right-clicked the HTML file, selected Properties and clicked the "unblock" button, the problem went away.
Something similar happened to me once, I tried hard to find what was wrong, then I realized I was saving (from Photoshop) the file as PSD but with extension .png. Make sure you're not doing the same.
Also:
Clear temporary Internet files
Verify that the Show Pictures option has not been turned off
Make sure that the Toggle Images.exe Web accessory is not present and disabling images
Make sure that a third-party Internet security, firewall, or cookie-blocking program is not causing the problem
Enable the Auto-Select encoding option
Source
It might be that the website you have browse has a lack of support
for an IE browser. IE is a nightmare for all web developers & Web designers.
It might be the developer of that website didn't care for an IE display because
of IE issues. Perhaps IE is trying to create a web standard to increase their
sales and marketing strategy. That's why don't care the modern Web development standard.
Why Chrome or Firefox or Safari, it's a free anyway.