There is a question posed here at work whether if we use a CDN-based font, such as Font Awesome, if the entire font is downloaded right away, or if the glyphs are only fetched if actually used.
I have people who want to create custom "sub-sets" of font awesome to reduce page weight, and I'd like to know if this is really an issue.
yes, it downloads the entire set. But the entire set is incredibly small compared to bitmap images. Since fonts are just vector images
**edit to answer your comment
Does anyone have an idea about the weight of Font Awesome, in K?
It depends on the browser there are 4 different formats for the different browsers.
OTF 62kb
eot 38kb
svg 198kb
ttf 79kb
woff 44kb
It uses in its CSS this:
#font-face {
font-family: 'FontAwesome';
src: url('../../../fonts/fontawesome/fontawesome-webfont.eot?v=4.0.3');
src: url('../../../fonts/fontawesome/fontawesome-webfont.eot?#iefix&v=4.0.3') format('embedded-opentype'), url('../../../fonts/fontawesome/fontawesome-webfont.woff?v=4.0.3') format('woff'), url('../../../fonts/fontawesome/fontawesome-webfont.ttf?v=4.0.3') format('truetype'), url('../../../fonts/fontawesome/fontawesome-webfont.svg?v=4.0.3#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
}
And the browser will pickup on whatever format it understands and download that one. It will not download all of them. It will only download the first file it understands
While file size is not a concern in most Western font sets, it does become cumbersome with Asian font sets which include some 7000 glyphs. Google Noto Sans CJK for example, is a nice looking web font, but weighs in between 1MB and 2MB for each font-weight. Wondering how this is best approached.
Related
I'm using for a website the font Oxygen via GoogleFont. However, for webdesign purpose, I downloaded in my computer the Oxygen font via FontSquirrel.
Apparently it's the same, but it looks different and I have size issues. So I was thinking:
Is there a way to declare "I want to use the GoogleFont font and not the font stored in the computer even if it has the same name"?
Because if someone has a totally different font with the same name, there could be a lot of display problems.
EDIT: What about downloading the font on Google's server and hosting it on my website? (The font is 100% free for commercial use.) But why do a lot of websites use Google Fonts if it could be that simple?
If you have the web fonts you could host yourself and give them any name you want in the css and avoid the potential of the local font loading.
For example:
#font-face {
font-family: 'myspecialfont';
src: url('oxygen-webfont.eot');
src: url('oxygen-webfont.eot?#iefix') format('embedded-opentype'),
url('oxygen-webfont.woff2') format('woff2'),
url('oxygen-webfont.woff') format('woff'),
url('oxygen-webfont.ttf') format('truetype'),
url('oxygen-webfont.svg#oxygenregular') format('svg');
font-weight: normal;
font-style: normal;
}
h1 {font-family: "myspecialfont", sans-serif;}
Just make sure you're pointing the CSS to the correct path for those files (e.g. if you put them in a fonts folder it'd could be "../fonts/oxygen-webfont")
The main reason people use google is they've optimized it for serving fonts, it takes load off your server, and potentially people have the font cached from google making it load faster. If it's an uncommon font and your server is decent these may negligible.
I have the following CSS:
font-family: 'HelveticaNeue-UltraLight', 'Helvetica Neue UltraLight', 'Helvetica Neue', Arial, Helvetica, sans-serif; font-weight: 100; letter-spacing: 1px; }
It works on all Mac browsers (Chrome, Safari) But I opened my project on Chrome and Internet explorer on Windows, it displays the font as bold rather than light. I'm not sure how to fix this but I need the design to work cross platform with the design that appears on mac.
Thanks in advance.
Edit: I've tried using arial but arial doesn't become light on both mac and windows.
The font you see on Windows is not bold, it is just regular Arial.
In almost all Windows systems, the first available font family among those listed in the font-family value is Arial. Since Arial has no typeface of weight 100, or of any weight less than 400, the normal (400) weight typeface is used instead, by the font matching algorithm.
Fonts in standard distributions of Windows generally lack typefaces with weight less than normal. So to use lighter typefaces, you would need to use downloadable fonts (web fonts) via #font-face. See e.g. Is #font-face usable now?
(SO has many specific questions on using #font-face, check them if you run into specific problems with it).
The font-family property inform the browser that it's needed to use that font. If there is no path for it, it will check if the system have that one.
In order to be able to have a font that will work on all systems, you need to use the #font-face property.
This last one will allow you to specify path for all the format font, that most of the browsers will download to display it correctly. (For your information all recent browser support it)
#font-face {
font-family: 'myFont';
src: url('myFont.eot');
src: url('myFont.eot?#iefix') format('embedded-opentype'),
url('myFont.woff') format('woff'),
url('myFont.ttf') format('truetype'),
url('myFont.svg#myFont') format('svg');
font-weight: normal;
font-style: normal;
}
If you want more information about that property you can check the reference here:
http://www.w3schools.com/cssref/css3_pr_font-face_rule.asp
Unfortunetly in your case the font HelveticaNeue is copyrighted, you need to buy the rights to be able to use it as a webfont.
You can take a look here about pricing:
http://www.fonts.com/search/all-fonts?searchtext=HelveticaNeue#product_top
Also, if you have already the right and have one of the format that you wish to convert to a webfont, you can accomplish that here:
http://www.fontsquirrel.com/
Finally, if you prefer you can use Google Fonts that will host the files for you, and you will just have a small script to insert inside your pages:
http://www.google.com/fonts
You can use web fonts (free or paid) as suggested by others, or just use a nice font stack that is likely to cover all bases. CSS Tricks has a nice set of them: http://css-tricks.com/snippets/css/font-stacks/
In terms of font weight, your CSS specifies a very light font weight:
font-weight: 100;
So if you want to use bold Arial instead, you need to change that.
I'm trying to use androids roboto font on a website it works fine until I get a german letter in a text then it looks like the font-weight is changed.
Its imported like this:
#font-face {
font-family: 'RobotoLight';
src: url('Roboto-Light-webfont.eot');
src: url('Roboto-Light-webfont.eot?#iefix') format('embedded-opentype'),
url('Roboto-Light-webfont.woff') format('woff'),
url('Roboto-Light-webfont.ttf') format('truetype'),
url('Roboto-Light-webfont.svg#RobotoLight') format('svg');
font-weight: normal;
font-style: normal;
}
and then it looks like bellow.
Would this be of a faulty font or because of a css setting? Any suggestions of how this could be fixed?
Answer: the font is faulty. If you want to use non-english characters and the Roboto-font dont download the web-prepared one. It seems to be reduced to be quicker to load and is there for missing some characters. Download the original and convert the fonts yourself.
Something is wrong with the font, but without more information (where did you get the font from, what did you do with it?), it is impossible to say what went wrong. But assuming you mean the Roboto font distributed at developer.android.com (which is distinct from the Google font with the same name, by a different designer), just download their font package, unzip it, process it with Fontsquirrel #font-face generator, and use the CSS provided by the generator. I just tested, and German characters appear OK.
The characters that look bolder might be from a normal (weight 400) typeface of the font, or from a different font, presumably because the light typeface does not contain them.
I made a website using webfont, in Fontsquirrel.
#font-face
{
font-family: 'Univers57Condensed';
src: url('/resources/fonts/univers-condensed-webfont.eot');
src: url('/resources/fonts/univers-condensed-webfont.eot?#iefix')
format('embedded-opentype'),
url('/resources/fonts/univers-condensed-webfont.woff') format('woff'),
url('http://hcil.snu.ac.kr/~muclipse/resources/fonts/univers-condensed-webfont.ttf')
format('truetype'),
url('/resources/fonts/univers-condensed-webfont.svg#Univers57Condensed')
format('svg');
font-weight: normal;
font-style: normal;
}
I imported eot, woff, svg, ttf files like above.
Actually, it works fine, but I see some problems.
IE seems to load eot file always, but Google Chrome seems to load random files unpredictably.
Chrome, in MasOS, ordinary condition, but sometimes texts are rendered fatter.
I guess the difference in rendering font is caused by loading different font file, isn't it?
How can I solve this problem, importing only eot and another format?
The real reason for this difference, I suspect, is simply that different operating systems render fonts differently. The same font will look slightly different on Windows, OS X and Linux - and even within an OS, will change depending on settings (on Windows, you can see this if you enable / disable ClearType).
Basically, pixel-perfect similarity is impossible across different platforms.
i am currently building a website which i am using a custom font for. The font is not avaible # google webfonts, so i had to download the font and load it through #fontface.
I used the markup from the examples from the site where i downloaded the font.
Link to the font - http://www.fontsquirrel.com/fonts/Colaborate
heres the css markup
#font-face {
font-family: 'ColaborateRegular';
src: url('ColabReg-webfont.eot');
src: url('ColabReg-webfont.eot?#iefix') format('embedded-opentype'),
url('ColabReg-webfont.woff') format('woff'),
url('ColabReg-webfont.ttf') format('truetype'),
url('ColabReg-webfont.svg#ColaborateRegular') format('svg');
font-weight: normal;
font-style: normal;
}
The font works fine on the webpage , but to get to the problem.
I need to use swedish special characters Å Ä Ö - and they just get super weird on the webpage.
heres a image
http://oi44.tinypic.com/2r4tmo0.jpg
What could possibly be the problem? In the photoshop i've recieved from the designer they all look allright with the font.
Thanks!
The special characters aren't the characters of the font Colaborate, they are from the fallback font I suppose.
You need to make sure the package from fontsquirrel contains those special chars.
I see that your font set doesn't include those special chars and for this the browser uses your default font family. You should pick a set that supports them.