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?
Andy_FangAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

GaryCommented:
You cannot!
Simple as that, to view the font they have to download it.
0
Andy_FangAuthor Commented:
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.
0
TribusCommented:
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.
0
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

GaryCommented:
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?
0
COBOLdinosaurCommented:
To define a font that is not installed, the browser must first download it using the CSS @font declaration.

@font-face
{
font-family: SomeCustomFont;
                  src: url('http://fontsource.com/somecustom.ttf'),
                        url('http://fontsource.com/somecustom.eot'); /* IE9 */
}

Not supporte by IE8 and lower

Use of the font can still prevented by user settings so there is never a guarantee that it will work.  The user controls the browser, not you.

Cd&
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
RobOwner (Aidellio)Commented:
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
0
ArgentiCommented:
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:
@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%;
}

Open in new window


Then use it in your HTML code:
<body>
        <div class="fancy">Here is my special fancy font sample</div> 
...

Open in new window


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>

Open in new window

0
Chris StanyonWebDevCommented:
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.com/tools/webfont-generator

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/fonts

At no point do any of the fonts need to be installed.
0
RobOwner (Aidellio)Commented:
+1 @Chris, I'd forgotten about that tool, very very useful
0
GaryCommented:
Hmmm, maybe I misunderstood, but I took it as meaning not downloading it...
0
RobOwner (Aidellio)Commented:
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.
0
Chris StanyonWebDevCommented:
The question seemed to me to be about using a font that the user didn't have installed locally.
0
RobOwner (Aidellio)Commented:
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:

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?
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.