Where does the web page search for font's specified in the CSS. Does it look in more than one place? Can it look in the same directory as the external css or nested css/html file on a server, or only on the clients computer? What is the steps or order of events?
If there is a #font-face declaration for a given font, and the browser understands it, it'll parse it and download the font from the URL(s) specified. Otherwise (or if the first location to look in is local()), the browser checks the computer's database of installed fonts, and if it's installed it uses the font for rendering.
If the font still can't be found, and there are other fonts in the font stack (a list of fonts as defined in font-family), this will be repeated for each font in the stack until a font is found that can be used. The last fallback font will be the browser's default and/or an inherited font.
You can use fonts on the client's computer or font's on the server accessed with CSS font embedding.
Related
I have seen a couple of projects where they just mention the name of the fonts they want to use in the CSS file without any mention of the source or the TTF or other font files.
eg
code {
font-family: source-code-pro,Menlo,Monaco,Consolas,"Courier New",monospace
}
When I remove those fonts via CSS in inspect element I can see the fonts are changed. So the code works. But I don't understand how the browser figures from where the fonts should be downloaded.
The code works even in incognito so not sure if the browser caching the font is a valid explanation.
Notice that the last setting in the font-family list is sans-serif.
If the local system has absolutely none of the other fonts loaded locally then the system will use whatever it has set as its default sans-serif font.
That is why it looks as though 'it works' when you say this:
#Fabrizio Calderan loves trees I checked the system fonts with this css-tricks.com/snippets/css/system-font-stack link. But the mentioned font family is not matching any of the fonts in the system fonts. So the default font should be picked right?
You are right, it picks the default font, but the version that is sans-serif.
As you can see in the above picture,I created a sample.html file and used the font-family for the body tag. So the source provided does not mention in font-family section. in the result, fonts will load from "Fonts" folder in my windows folder. (Of course if you use Windows OS and website locally, mentioned process will be happen!)
There are several ways the browser decides what fonts are downloaded/used:
As user 'Fabrizio Calderan loves trees' stated (paraphrased):
If no sources are provided, they are loaded from the computer running the webpage in a browser.
The programmer uses external APIs or links that embed a font. An example of this is Google Fonts, which lets programmers choose fonts they want (and select them), and embed them using either a <link> tag (put into HTML code) or #import tag (put into CSS file).
The website you are looking at may contain #font-face statements in their CSS, which links a common name (i.e., 'Source Code Pro') to a font file. You can read more about #font-face here and here.
If you can't find evidence of any of these, could you possibly share a link to the webpage's source code?
EDIT
I took a look at the code in the website. It seems like the fonts styling in the display/textarea is:
.displayArea{
font-family:"Lucida Sans","Lucida Sans Regular","Lucida Grande","Lucida Sans Unicode",Geneva,Verdana,sans-serif;
}
And, there doesn't appear to be a source of these fonts, so it is part of the 1st category I listed above. Basically, the fonts in quotes are fonts that may be used if already preinstalled inside the client's computer, if not, the browser goes down the list and keeps checking whether the client has the font installed. The ending font is sans-serif, which is a default font that all computers have, so it serves as a backup in case all other fonts aren't available.
I'm having an issue with FontAwesome (v4) webfont icon rendering in Chrome when Chrome's caching is enabled. Intermittently, across multiple user machines, a page will load with our FontAwesome icons displayed incorrectly as below. This issue happens only occasionally and can't be reliably reproduced or narrowed down to a single page. The only common repro steps are using Chrome and not having "disable cache" enabled in dev tools or elsewhere.
Checking dev tools computed styles for the icon elements reveals that Chrome is correctly detecting the specified font-family as "FontAwesome", but the <i> tags for the icons are being rendered in Times New Roman, rather than the FontAwesome webfont. The "FontAwesome" #font-face declaration and the above rule assigning font-family: FontAwesome to the .fa class exist in the same stylesheet, site.css, which is causing the issues.
Checking the source below, we see that site.css is properly specified in the site's <head> tag. It isn't being added to the <head> through JavaScript; it's present in the in the initial page loaded by the browser. The href points to the correct stylesheet, which loads without issue when opened in a new tab. This isn't very surprising, since all of the styles specified in site.css are correctly being applied to the page (except for the webfont, of course). Even the .fa's font-family rule is being read correctly by Chrome, as shown in the computed styles in the screenshot above.
My suspicion is that Chrome is loading the stylesheet from cache in a weird way that's allowing all of the styles to load but is interfering with the creation of the FontAwesome webfont. Potential evidence for this below:
Above is a portion of the network tab from the dev tools session. Nothing has been filtered out, but site.css has no entry in the list of requests, even though other cached stylesheets are present and the styles from site.css are being applied to the page. There are entries for theme.css, jQuery, AdminLTE, and other stylesheets specified just after site.css in the same <head> block. It's not pictured, but the fontawesome.woff2 webfont file, specified in site.css's #font-face declaration for "FontAwesome", is also being successfully loaded.
Refreshing the page or navigating to another one sometimes fixes the issue. Refreshing with cache disabled always fixes the issue. Every page of our (quite large) web app loads this stylesheet using the same <link> tag, and while this issue pops up fairly rarely, it has happened across many of those pages. The site.css stylesheet is clearly being loaded by Chrome, as it sees the font-family: FontAwesome rule along with the rest of our site styles. But something seems to be happening during the loading of the stylesheet from cache that's causing Chrome to fall back to Times New Roman despite the webfont being both declared via #font-face and specified as the font-family for the affected elements.
We aren't using a service worker or any server-side caching. We do some cachebusting via a GET parameter as shown in the screenshots above (the ?[productName]Version=2.0.13292.0), that value is baked into the initial document loaded by ASP.NET and changes only when our backend server's version changes -- so that shouldn't be the cause of the issue here.
Has anyone experienced anything similar with Chrome webfonts?
I had the same problem. My compiled CSS file was missing #charset "UTF-8"; and as a result, the cached icons font was broken. Please check if this helps you.
If I have a custom font and I call it 'verdana', will that conflict with the browser's built-in verdana font? When I do:
font-family: 'verdana';
will the browser use my custom font or the built-in one?
Yes, you can use a custom font name that may coincide with the name of an installed font. It might be confusing, though, and might look suspicious (using a font illegally) to use a name like Verdana, if someone peeks at your code.
The CSS3 Fonts draft says: “If the font family name [in #font-face] is the same as a font family available in a given user's environment, it effectively hides the underlying font for documents that use the stylesheet. This permits a web author to freely choose font-family names without worrying about conflicts with font family names present in a given user's environment.”
You may find parts of this article interesting: http://www.practicalecommerce.com/articles/3080-How-Browsers-Manage-Fonts.
The short answer is that the browser should use whatever version of Verdana you have installed. The exception here is if you are using "src: url()", then it should load the font file from that URL. A good resource if that is the case: http://www.html5rocks.com/en/tutorials/webfonts/quick/.
If you're wanting to use your font and you worry that some browsers may just up and decide to use the local Verdana, you can rename the ttf or eot on your server and just use Verdana-Mine as the font-family and src as url('verdana-mine.ttf').
i am converting psd to html and font used in psd is moolboran, my tag font-family: MoolBoran;, which is not supported by browsers, how can i overcome this problem? is there any possible solution to as alternative?
Your options are to either save an image with your non-standard font, or use the CSS property font-face, and allow the site visitors to download the font file. For more details of this approach, see CSS 3: Custom Fonts Using #font-face.
Web safe fonts have been a bane to designers for a while, but you can check out Google Web Fonts to see if there's a font that's close (it doesn't look like they support MoolBoran unfortunately)
The only solutions are to
A) use an image rather than live text (which is generally a poor method)
B) See if a web font version of "MoolBoran" is available somewhere. And use the #font-family selector. I looked but can't find anything for it.
C) Change your design.
There is nothing wrong with that tag, it's certainly supported by all browsers.
The font does of course have to be installed on the visitors computer, which is probably where you have your problem.
If you want that exact font, you can make an image out of the text. That is the only sure way to get exactly the look that you want across all browsers.
You should supply fallback fonts in your tag, for example:
font-family: MoolBoran, Geneva, Arial, sans-serif;
I need to use multiple fonts in my Flex 4 application, so I compile them into swf and load at runtime. I have single .ttf file for each font. When I dont load font's swf file at runtime, flex uses copy of this font installed on my system, and it works fine - I can switch between regular, bold and italic faces of the font correctly.
However, when I load fonts from swfs, setting their style to bold or italic makes no effect. I tried different ways of compiling swfs (css using mxmlc compiler, fontswf utility, .as files with [embed] tags), but nothing worked. When compiling using css it sometimes throw errors that font face is not supported, and it seems that some fonts are available only in bold-italic style only or bold style only.
I use cff fonts, load them using etcs.ru.utils.FontLoader utility. Fonts are loaded correctly, I check this with Font.enumerate fonts.
So is there any way to embed these .ttf files with all styles available?
Here is example how to embed the same font with different font faces.
What about the difference between system and embed fonts, system fonts can differ on different computers of different OS and finally can be absent on a user computer. But embed fonts will display the same way in any configuration.