Andy_Fang
asked on
Is it Possible to Have Someone View Font on Page Without it Having Been Installed?
Just wondering if there was any way to do this, with CSS or otherwise. How would I use an external font (currently viewable using Google CDN and font installed on my comp) on another computer with the font not installed?
ASKER
Alright, I guess I will just use Helvetica Neue then, and Arial as a backup. I will wait a day or 2 and see if anyone else has some input before giving best answer.
The thing is I want to use Source Sans Pro or Lucida Grande, the problem is I'm afraid it will create compatibility issues since Source Sans Pro gives a smaller font size than Helvetica Neue.
The thing is I want to use Source Sans Pro or Lucida Grande, the problem is I'm afraid it will create compatibility issues since Source Sans Pro gives a smaller font size than Helvetica Neue.
You can create images with the correct font on them. This is the only way I know how to make your fonts universal without the end-user having to install them.
Tribus brings up a good solution :o)
If you are designing with a particular font then what is wrong with using it and having your viewers download it.
You say a smaller font, but haven't you countered for this in your design?
If you are designing with a particular font then what is wrong with using it and having your viewers download it.
You say a smaller font, but haven't you countered for this in your design?
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Let's clarify... You can store the font on your server, the user downloads it only for displaying the page. It does not have to be installed. You use @font-face
Yes, of course :)
You can save your own font file and put it somewhere in a public place on your website (can be in the same folder as your html/php/css/images file).
Then create a CSS class that uses that font file, like this:
in your CSS file:
Then use it in your HTML code:
This way the browser will locally download and use the custom font file needed for your webpage, but the font will not be installed on the client's machine! I want to emphasize that because any client will correctly see your page without needing to install the font file onto their system.
P.S. Don't forget to correctly reference your CSS file in your HTML <head> section:
You can save your own font file and put it somewhere in a public place on your website (can be in the same folder as your html/php/css/images file).
Then create a CSS class that uses that font file, like this:
in your CSS file:
@font-face {
font-family: my_font;
src: url('my_special_font_file.TTF');
}
.fancy {
color: #brown;
box-shadow: 0px 0px 20px #FFFFB8;
font-family : my_font;
font-size: 20;
line-height: 100%;
}Then use it in your HTML code:
<body>
<div class="fancy">Here is my special fancy font sample</div>
...This way the browser will locally download and use the custom font file needed for your webpage, but the font will not be installed on the client's machine! I want to emphasize that because any client will correctly see your page without needing to install the font file onto their system.
P.S. Don't forget to correctly reference your CSS file in your HTML <head> section:
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="my_own_styles.css" ></link>
...
</head>
FontSquirrel provide a service where you can upload a font (providing you are legally allowed to) and it will give you back a font-kit - a font-face declaration that you include in your CSS, along with various formats of the font you uploaded. You can then display the font on your web page for all to see.
The webpage for this is here -> http://www.fontsquirrel.co
There are also various other font services available that will give your webpage access to lots of different fonts - Google Fonts for example. You simply include a link in the HEAD of your document and then use the font in your CSS, as you would for 'normal' fonts.
http://www.google.com/font
At no point do any of the fonts need to be installed.
The webpage for this is here -> http://www.fontsquirrel.co
There are also various other font services available that will give your webpage access to lots of different fonts - Google Fonts for example. You simply include a link in the HEAD of your document and then use the font in your CSS, as you would for 'normal' fonts.
http://www.google.com/font
At no point do any of the fonts need to be installed.
+1 @Chris, I'd forgotten about that tool, very very useful
Hmmm, maybe I misunderstood, but I took it as meaning not downloading it...
We would obviously need confirmation from @andy_fang but I think this is to do with CSS3 @font-face and being able to serve whatever font you want where the user doesn't have to have it on their computer (other than a downloaded, cached copy of it).
Though I think it's still a valid point to consider whether it is used as it is still downloaded, which leads to overhead due to filesize as well as how they're rendered by each browser. Now most fonts are small when you strip back just what you want as you have to regarding Bold, Italics etc so it wouldn't be an issue but the page would have to fail gracefully.
Though I think it's still a valid point to consider whether it is used as it is still downloaded, which leads to overhead due to filesize as well as how they're rendered by each browser. Now most fonts are small when you strip back just what you want as you have to regarding Bold, Italics etc so it wouldn't be an issue but the page would have to fail gracefully.
The question seemed to me to be about using a font that the user didn't have installed locally.
There were a couple of keywords in the question and I know @andy_fang is currently working on a fairly detailed website.
To quote the question, this is what led me to believe it was CSS3 Fonts:
To quote the question, this is what led me to believe it was CSS3 Fonts:
Is it Possible to Have Someone View Font on Page Without it Having Been Installed?
Just wondering if there was any way to do this, with CSS or otherwise. How would I use an external font (currently viewable using Google CDN and font installed on my comp) on another computer with the font not installed?
Simple as that, to view the font they have to download it.