/    Sign up×
Community /Pin to ProfileBookmark

Font embedding for PC and Firefox/Safari??

Copy linkTweet thisAlerts:
Aug 13.2007

I am building a site on a PowerBook G4. I am wondering if there is any way I can embed text on my site so that I can use fancy fonts from Photoshop without using image files. I have tried searching this online and everyone says it can only be done for IE, but I know I’ve been able to view rich embedded text with my Mac before. Plus, a lot of the information i found online was very old. Is there any way to do this so that it will work on 95%+ computers? Thanks.

to post a comment
CSS

5 Comments(s) ↴

Copy linkTweet thisAlerts:
@felgallAug 13.2007 — It can be done with IE.

It can be done with PDF (on any browser).

It can be done with SIFR (on modern browsers that have Flash enabled).

The only solution that works for most browsers is to include a list of several different fonts so that if the first on the list isn't installed that a similar font that is installed will be used instead.
Copy linkTweet thisAlerts:
@gizmoAug 13.2007 — I don't know where I got it from, but this worked in Firefox:
[CODE]
#sign {
font-family: "King Richard";
color: #a66;
}

@font-face {
font-family: "King Richard";
src: url(/fonts/kingrich.ttf);
}[/CODE]
Obviously the font file kingrich.ttf has to be in the fonts folder in this example.

Experiment with a font of your choice and examine the result.
Copy linkTweet thisAlerts:
@Major_PayneAug 13.2007 — I don't know where I got it from, but this worked in Firefox:
[CODE]
#sign {
font-family: "King Richard";
color: #a66;
}

@font-face {
font-family: "King Richard";
src: url(/fonts/kingrich.ttf);
}[/CODE]
Obviously the font file kingrich.ttf has to be in the fonts folder in this example.

Experiment with a font of your choice and examine the result.[/QUOTE]I would think you got the results you did because the font is also installed on your PC. Did you try viewing the page calling for the font using a PC that absolutely does not have that font to see if your code is actually working for others? The code looks correct and seems to be a good solution if it truly works.

Ron
Copy linkTweet thisAlerts:
@gizmoAug 13.2007 — You have a valid point there, but as I recall the font is in a folder of the website and is therefore uploaded to the server with the site and thus viewable by all. I should point out, however, that I suspect there may be copyright issues in so doing as many TTFs are copyright of the designers. Also since the file has to be downloaded as part of the site, some TTF files can be rather large.
Copy linkTweet thisAlerts:
@grimmylinaSep 14.2007 — So is there a way to embed fonts that actually works across all browsers? I tried a php/javascript method but it didn't seem to work and I also tried the above method but I don't think it's working.

http://www.southbeachgroup.com/

The "SOUTH BEACH GROUP" text on top should display in a Europa Light font but I saw it on my sister's computer and it looks like my second-coice Verdana came up.
×

Success!

Help @Agent_007 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...