Forcing Fonts on a User

Is there a way to FORCE my chosen Fonts on a user??

Let’s say I want to use some funky, obscure font to communicate something artistically, but I know the user likely won’t have that font on their computer/browser…

Can’t I just point my webpage to some source that has the Font so that it is displayed for them as it is for me?

(I know you can get into graphics, but that seems like a bad approach?!)

Debbie

The only thing you can force on people when they visit your web page is the content of the page. Anything else such as CSS etc can be easily overridden by them.

Also trying to force people to download fonts to view your page is likely to force them to leave your site more than it is likely to get them to view your font.

As felgall already mentioned, It is hard to force things on people, since they can be easily overridden. There are ways though. Google for @font-face. They have hundreds of fonts that you can include in your stylesheet.

Have a look here: @font-face

If you are talking about font embedding then you can find relevant information here.

Note that you can only embed fonts that are licensed for the purpose so the choice is very limited.

As Stephen said above you can’t really force visitors to do anything they don’t want to but you can make suggestions.

Seems we were had the same thought Paul O’B :slight_smile:

lol - at least we’re reading from the same book :slight_smile:

I was talking about providing a link in my HTML so if they don’t have my font then my webpage just downloads it (links to it) for them so they still can view things in my font.

Same concept as how your stylesheets work…

Debbie

Use a PDF and embed the font in it … that’s the only reliable way.

There are various ways of using your preferred font in web pages, such as @font-face, sIFR and others, but the problem is that you often run into licensing issues - and even then, it relies on the user’s browser supporting your chosen method, which isn’t 100% certain. You can’t usually throw your fonts around for other people to run willy-nilly. And while these methods are fine for headings and small items, they are likely to cause performance issues if used for body text.

Provided it actually is your font that you created yourself from scratch you could do that. If someone else created the font then they own the copyright on it and their licence almost certainly does not allow you to distribute it since they will want to get paid for every copy of their font.

Paul mentioned open-source fonts above.

(Although I didn’t understand ANYTHING that said website was offering since there are no instructions or “About Us”?!) :rolleyes:

But presumably there are a lot of “free” and open-source fonts out there in this day and age…

Debbie

@font-face can be a little daunting at first, even with FontSquirrel - however it’s well worth it. @font-face, used with a particular CSS trick promulgated by the Squirrel and others, accomplishes exactly what you want to do: It “serves” a special font to your users so they see the text the way you want even if they don’t happen to have a copy of “Super-Funky-Left-Handed-Goose-Tracks.ttf” on their computer.

Like most things in web development, there are some cons:

  • As felgall always faithfully mentions :slight_smile: you must make sure your font is open source, not just free! Use FontSquirrel fonts and you should be okay; if you use their generator with your own fonts, however, you are on your own.
  • Bandwidth suffers, though not horribly - the font files must be downloaded by each user and they can be sizeable.
  • @font-face requires a special CSS trick to work in all major browsers. The good news is that FontSquirrel gives you a CSS file already made up and ready to go.

Google also has a small font kit offering which you might check out at http://code.google.com/webfonts. The main advantage of using their rather narrow selection is that, with popularity of Google’s font service almost sure to grow, the bandwidth savings due to pre-cached font files could be substantial.

Hope this helps. I love @font-face myself, and use it frequently. FontSquirrel has made it quite easy once you understand the basics.

Aha… progress!!

So, if I take your advice, what are the chances that…

a.) The font wouldn’t load properly and render my site useless
b.) Blow up the user’s computer
c.) Create an explosion with body-parts everywhere?! :shifty:

Or is it as simple as if it doesn’t work, then a “default” font like Arial will load?

Do you have any examples where you have used this with success and that render your pages “graphic designer print quality”??

Thanks,

Debbie

a.) None, unless your site would be useless if the special font were replaced with something generic such as Times New Roman. I don’t know how familiar you are with CSS font stacks, but they work just the same with @font-face -attached fonts as they do with regular ones. For example, after attaching a special font with @font-face, I might create a rule similar to the following:


h1 {
font-family: goose-tracks, microsoft sans serif, arial, sans;
}

Now if for some reason “Goose Tracks” fails to load, h1 will fail over to the next chosen font. If no backup fonts are specified, it will devolve on the user’s default - usually Times New Roman or something similar.

b.) Blow up the user’s computer

Only if you use MS Comic Sans and the user is a graphic designer. :wink:

(Case in point though - you can’t legally embed MS Comic Sans, although most people do have it already.)

Do you have any examples where you have used this with success and that render your pages “graphic designer print quality”??

You can see all the live demos you could ever want on FontSquirrel - go to this page and click “View @ff demo” just above any font preview. The result, such as [url=http://www.fontsquirrel.com/fontfacedemo/Action-Man]this one, is a live attached font, not an image.

Or is it as simple as if it doesn’t work, then a “default” font like Arial will load?

Yes. See above explanation of font stacks.

If you want to know more about the guts of it check out Paul Irish’s awesome article here: http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/

Not to beat a dead horse, but if you stray from FontSquirrel or Google Fonts please PLEASE contact the author before you just paste it into your page. :slight_smile:

That’s a super article - just remember, you don’t have to understand how it works to use it. With FontSquirrel, it’s pretty much copy and paste.

Fabulous!!

I don’t know how familiar you are with CSS font stacks, but they work just the same with @font-face -attached fonts as they do with regular ones. For example, after attaching a special font with @font-face, I might create a rule similar to the following:


h1 {
font-family: goose-tracks, microsoft sans serif, arial, sans;
}

Yes, I understand this.

You can see all the live demos you could ever want on FontSquirrel - go to this page and click “View @ff demo” just above any font preview. The result, such as [url=http://www.fontsquirrel.com/fontfacedemo/Action-Man]this one, is a live attached font, not an image.

There website is POORLY laid out and is NOT very intuitive. (After looking at things for like 3-4 minutes and re-reading what you just said, I finally figured out how to view different fonts?!) :rolleyes:

Thanks for all of the comments and tips!! :tup:

It sounds like you are an expert in this area.

I’m glad there is a way to do what I originally inquired about. (I was skeptical when the first few posters made it sound impossible.)

So, I guess the next important question is…

WHERE and HOW does a person become well-versed in Fonts, Typography, and so on??

(I can see where it would be easy to go Comic Sans crazy with “pretty” fonts and end up with an unreadable and really crappy looking website!!) :eek:

Debbie

Yep, no worries.

Besides, there are more fonts there then I’d know what to do with?!

Thanks everyone!!! :cheer:

Debbie

Can’t help you much on this one - I am stilling learning by experience myself :slight_smile: A great starting point is just not to go crazy - stick to legible fonts, and use just 1 or 2 different ones per page.

Think about what you just said… How would you like it if someone forced you to do something you didn’t want?

Ever think it might be funky/obscure for a reason?

If the text itself is not communicating your meaning, you’ve got the wrong text. “communicate artistically” is a bit like abundant poverty or recycling dump.

From an accessibility and bandwidth point of view there’s a reason no two browser makers on the same page on doing this, and why it’s just a REALLY BAD IDEA. Sometimes it just really helps to say “no” to your inner art-***.

Though if you are going to do it, you could do worse than fontsquirrel’s approach of mixing all the different formats… even if it does end up a bandwidth chewing mess.

That’s the part that loses visitors to the page - the extra time it takes to download the font.Extra time to decide to hit the back button before the page finishes loading.