I work on a system who always bug with the google font load, but i can't see when the font is not loaded because I have all these font in local (for Photoshop) so the font look like good on my computer.
So, I would like to disable all these font in chrome so I can see quickly if the google font is correctly load or not.
Do you think it's possible ??
Thank you
PS: Excuse my english, i'm French.
Rather than disabling the fonts on your side of things, why not use the font API in Chrome or Opera and have run through all the fonts that have been specified as follows?
document.fonts.ready.then(function(set) {
// Log that the fonts are loaded
console.log(set);
var t;
for(var t of set.entries()) {
console.log(t);
}
});
The FontFaceSet will tell you if the font has been loaded or not.
On Chrome/Brave you can now see where the font was loaded from. Go to view —> developer –> inspect elements –> make sure the elements tab is selected –> select the computed sub-tab –> scroll to the bottom and look for rendered fonts. If it's a local file it'll say YOUR_FONT – local file.
Bonus:
If using a Mac, then you can disable the local font in the Font Book application. Just open that app, then find the font you want to disable, right click, and select Disable "YOUR_FONT" Family. Then refresh the page and you should see what the user without that font will see.
Related
I'm having this annoying problem, when I visit certain sites, are displayed wrong fonts, it's like something is overwriting my fonts. Checking in the console, I see that in the displayed fonts section, there is a font that i have locally installed on my pc, but i'm sure that isn't the right font to display.
Screenshot of the problem
I've checked all default font options on chrome settings and also if is a plugin doing this... but I can't find a solution. I also tried to temporary disable local fonts with the dev-console and it solves the problem, I don't really know why uses this fonts instead the correct ones. Any ideas ?
Im working on a HTML/CSS start page for a linux program I'm running. All my font-families were set to Arial, Verdana, Sans-serif in the css. When opening the page in Chrome or Firefox, the fonts displayed properly. Even running the windows version of the app with the same start page displayed correctly. But for whatever reason, the linux version displays the start page with all fonts replaced with courier. Its a very jarring font and I cant seem to get Linux to not default to it on this program. Ive tried changing the fonts in the css doc to Helvetica, or adding single or double quotes around each font family name, but nothing seems to change this. Does linux have some weird font quirk with css that I don't know about? any info is helpful.
Try using the Google Fonts API to ensure font consistency across platforms.
Find the fonts that you are interested in on Google Fonts, if they are available. Here are the steps for how to import them into your HTML document (internet connection required):
Go to Google Fonts
Use the search bar in the top right corner to find one of your fonts
Press the Plus (+) button next to your font
Repeat steps 2 and 3 for all of the fonts that you need
Click the Families Selected toolbar at the bottom of your screen
Select Embed
Select Standard
Copy the code block (highlighted in grey) and paste it within the <head> tags of your HTML document.
Specify the fonts that you want to use as instructed by the site (under Specify in CSS)
I have modified the code of someone else who are trying to load three google fonts.
They have 3 css file. Every css file have used one css font from google web fonts. In chrome dev tool I have seen only one fonts work and other 2 not.
it's happen because only one can applied so chrome trying to download one. When they changed the font on dropdown's select change it's not worked because font is even not loaded in chrome.
Because I want to load the font when they changed the dropdown so I write this code:
<div id="hiddenFontLoader"></div>
CSS:
#hiddenFontLoader {
font-family: 'Quicksand', 'Cantarell';
display: none;
}
This code help me to load other 2 fonts that is used nowhere and will be used when dropdown changed.
Now I want to prove that it's working. For me I can just set the font 400% and can check that is working or not.
What is the proper way to test the font is loaded or not. I means if I use fallback fonts then I can't check if all fonts have very small difference and fallback font are very similar to the font I load from Google font.
Suppose I applied to the body{} then how to confirm it's work in chrome dev tool or firebug.
Anybody have trick for it.
You should consider using Google WebFont Loader.
The documentation is very thorough. Specifically, check out the Acting on Events.
https://developers.google.com/webfonts/docs/webfont_loader
I believe you are looking active event (Click Here!).
There is a small problem that might annoy me from time to time (idk if there are other people feel the same). Every time I use view page source from any browser, the text always turn out to be ugly and small (my computer's resolution is 1920x1080 with 17 inches in particular, which makes the letter extremely small and hard to see). Is there a way to change the font and the size in the view page source section from any browser? (Chrome, for example)
I know I could zoom in the page by mouse scrolling or by "ctrl" + "+", but that's not really the way I want to solve it.
Thanks
As of Chrome 32.0.1700.76 the custom.css doesn't work as outlined below.
Please see an updated answer here:
Custom.css has stopped working in 32.0.1700.76 m Google Chrome update
The old way is as follows:
Go to the following directory:
%LOCALAPPDATA%\Google\Chrome\User Data\Default\User StyleSheets\
Mac:
~/Library/Application Support/Google/Chrome/Default/User StyleSheets/Custom.css
and open the Custom.css file. If it doesn't exist, create one.
Add the following lines:
body.platform-windows .monospace,
body.platform-windows .source-code,
td.webkit-line-content {
font-size: 15px !important;
font-family: Consolas, Lucida Console, monospace !important;
tab-size: 2;
}
All you're doing is customizing classes used internally by Chrome. The .monospace class is pretty self evident. The .source-code class affects items in your developer tools (F12). The one that you are looking for is the td.webkit-line-content, it's the one that applies style to the line items when you choose to View page source.
You can also edit the line numbers as well by adding styles for td.webkit-line-number and can also edit the line number background by adjusting the style for div.webkit-line-gutter-backdrop.
Cheers.
As Jeff Johnson said - for Mac the Stylesheet is under:
~/Library/Application\ Support/Google/Chrome/Default/User\ StyleSheets/Custom.css
On linux platform (Ubuntu) the Custom.css file is in folder:
~/.config/google-chrome/Profile #/User Stylesheets/Custom.css
You could assign your favorite editor to view the source from IE and FireFox.
View Webpage Source Code in Your Favorite Text Editor – Firefox
Use an Alternate Source Viewer with IE
Every time I refresh the page I have to wait for a bunch of requests to return before I actually see the fonts appear. The fonts are cached and all these requests return a "Not Modified" header. Is it proper browser behavior to not display the font until it is made certain that the font hasn't been modified? Am I missing something?
I understand that I can use a generic fallback font until the proper fonts are loaded, but this will break my page.
I'm seeing this behavior in Chrome and Firefox, both on Ubuntu. My internet is really patchy, so sometimes I have to stare at a fully loaded page with invisible text, it's really frustrating.
You should always use a fall-back font, and design your page such that it will not break the page. Sometimes the Google font service may be unavailable; other times, your users could be behind firewalls that prevent downloading the fonts. And, as you've seen, your fonts won't display immediately until the browser is satisfied that the fonts have been downloaded properly.