I noticed that when my web page was loading, all of the CSS files loaded first, then the fonts after all of those were done. Is there a way to make the fonts start loading at the same time as the stylesheets?
I'm using #font-face with a url. Would encoding the font in the stylesheet solve this problem?
i haven't experienced this kind of scenario of yours..i'am fond of using embedded fonts on my webpages..i would like to share what i did as what i see to make them synch on web page load..i have a font.css where i embed all the fonts i needed like this:
#charset "utf-8";
/* CSS Document for Fonts :)*/
#font-face{
font-family: trajan;
src:url(../fonts/TrajanPro-Regular.otf);
}
and the url resides on the directory inside the web app..i just link this to the web page then use the defined font on other css directly..hope i got your point and explained the right thing..thank you
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 have issue to get a #font-face css custom URL working for my wordpress theme. This is my setting:
Did I do correct if yes why the font doesn't work?
If your site runs on HTTPS you must make sure the font does too. Otherwise it will be considered a security risk and then blocked (see the developer console (press F12) in your browser for such a message).
Add to the head section of web page
<link href="http://db.onlinewebfonts.com/c/73e731edac53f3db38b78336dff84fb2?family=Graphik+Web+Extralight" rel="stylesheet" type="text/css"/>
or, Using #import CSS directive, put the following line in add to your css file
#import url(http://db.onlinewebfonts.com/c/73e731edac53f3db38b78336dff84fb2?family=Graphik+Web+Extralight);
and write this font wherever you need it.
font-family: "Graphik Web Extralight";
I was browsing a website earlier with a family of fonts that I didn't recognise as being available for web.
You can view them on this page http://www.etq-amsterdam.com/collection/mid-1-white
According to inspect element, the fonts are:
#font-face {
font-family:AvenirNextLTPro-Demi;
src:url(fonts/28C41E_0_0.eot);
src:url(fonts/28C41E_0_0.eot?#iefix) format("embedded-opentype"),url(fonts/28C41E_0_0.woff)format("woff"),url(fonts/28C41E_0_0.ttf) format("truetype") }
#font-face {
font-family:AvenirNextLTPro-Regular;
src:url(fonts/28C41E_1_0.eot);
src:url(fonts/28C41E_1_0.eot?#iefix) format("embedded-opentype"),url(fonts/28C41E_1_0.woff) format("woff"),url(fonts/28C41E_1_0.ttf) format("truetype") }
I tried using the "font-family:AvenirNextLTPro-Regular;" line as I would do with other typefaces but it didn't work. Is this easily achievable or are they likely to have bought a license to use the font (if that's even possible)?
The font-face tag loads the fonts from files, in this case, from http://www.etq-amsterdam.com/css/fonts/28C41E_0_0.woff, so you would need to also have those fonts loaded on your server in order to access them from the CSS
For an email newsletter, I have to use the #import CSS syntax for custom web fonts. I own all the fonts in woff, eot and ttf.
I know I can define #font-face in CSS but how can I use #import?
Simple...you must set your import in your css file...you shoud write on the first line or above all your css styles.
#import "url";
Beware not all email clients support web fonts
Read more about it - Web Fonts in HTML Email
Basically you can't... Custom fonts do not work within emails unless you're on a mac.
You'd be better off just using default fonts as the time and effort to include these for such a small minority of users really isn't worth the effort.
I'm using the import thing in my CSS, like this
#import url(http://fonts.googleapis.com/css?family=Kite+One);
But the font doesn't load all the time. I'm still working on the CSS and refreshing periodically. Is it because of that? Is there any way to fix this?
Instead of #import, you should add a link to your page by..
<link href='http://fonts.googleapis.com/css?family=Kite+One' rel='stylesheet' type='text/css'>
Then, add the font under the body element in your stylesheet using font-family.
For Instance,
body{font-family: 'Kite One', sans-serif;}
For further doubts, refer here.
It should work now.
If you are having issues with Web fonts, you need to take a look at this
Web Font Loader
The Web Font Loader is a JavaScript library that gives you more control over font loading than the Google Fonts API provides. The Web Font Loader also lets you use multiple web font providers. It was co-developed by Google and Typekit.