Force Font

Hi, there is a specific font that i have used in a certain section of my website design. I know that this font will NOT be on 99.9% of my users computers... so is there a way to apply this font to certain text, without having to use images for the text...

If you can suggest away, can you confirm that it is compatible across all browsers...
Who is Participating?
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Depending on the font, there is licensing issues to consider.  Even though you may have to pay a small fee, it is worth it.  You can embed special fonts with:

For free, you can use google fonts.  You will not see your exact font, but maybe something close enough for free.

Otherwise, you can use fonts you already own and are licensed to use on the web using css3 @font-face.
1) Upload your ttf font to your site.  Assume the folder is called fonts and the font is myfont.ttf.

2) Add css @font-face
@font-face {
    font-family: myfont;
    src:  url('fonts/myfont.ttf') format('opentype');

3) Determine which tags get the font with a fall back
h1 { font-family: myfont, sans-serif; }

4) test
I have found sometimes the pc does not render fonts like this as well as the mac and IE does not render as well as chrome/firefox.
Lee SavidgeCommented:
You can't.

If the font isn't available on their machine you cannot force them to download it.
Loganathan NatarajanLAMP DeveloperCommented:
try with face-face,

Introducing Cloud Class® training courses

Tech changes fast. You can learn faster. That’s why we’re bringing professional training courses to Experts Exchange. With a subscription, you can access all the Cloud Class® courses to expand your education, prep for certifications, and get top-notch instructions.

Chris StanyonCommented:
If you're allowed to use the font freely, then you can use the FontSquirrel Generator. Basically, you upload your font, and it converts it and spits back a proper @font-face declaration, along with the relevant files (i.e. your font converted to TTF, SVG, WOFF, OTF) which are all needed because different browsers support different formats.

You then include the CSS they provide in your CSS file, upload the fonts to your server and use your new font the way you always have (don't forget to include a falback, just in case).

{ font-family: "My Shiny New Font", Arial, Verdana; }
Just an aside.  Force feeding fonts that user don't like can hurt you, but I have yet to see the font so special that users returned to see it again.  So you risk losing with absolutely zero upside; never a good bet. What you think is cool, others may think is ugly.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.