Avatar of Andy_Fang
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?
CSS

Avatar of undefined
Last Comment
Rob

8/22/2022 - Mon
Gary

You cannot!
Simple as that, to view the font they have to download it.
ASKER
Andy_Fang

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.
Tribus

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.
Experts Exchange has (a) saved my job multiple times, (b) saved me hours, days, and even weeks of work, and often (c) makes me look like a superhero! This place is MAGIC!
Walt Forbes
Gary

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?
ASKER CERTIFIED SOLUTION
COBOLdinosaur

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
See how we're fighting big data
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
Rob

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
Argenti

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

Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
Chris Stanyon

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.
Rob

+1 @Chris, I'd forgotten about that tool, very very useful
Gary

Hmmm, maybe I misunderstood, but I took it as meaning not downloading it...
This is the best money I have ever spent. I cannot not tell you how many times these folks have saved my bacon. I learn so much from the contributors.
rwheeler23
Rob

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.
Chris Stanyon

The question seemed to me to be about using a font that the user didn't have installed locally.
Rob

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?
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.