[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 386
  • Last Modified:

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...
5 Solutions
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,

ref. http://www.miltonbayer.com/font-face/
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Scott Fell, EE MVEDeveloperCommented:
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.  http://www.google.com/webfonts

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


Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now