Member Avatar for Pro2000

Hello, I want to add some fonts in my web-site,but there are some fonts does not exists in the visitors computers:
so,How can I add linked fonts?
=====
Thanks

  • 4 Contributors
  • 10 Replies
  • 121 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by Designer_101

Dani AI

Generated

Short answer: modern browsers can download web fonts for a page using CSS; sIFR is obsolete and you no longer need users to install fonts manually. For a chat UI keep body text on a readable system stack and use a webfont only for branding or headings — that preserves legibility (as warned) while giving you the look you want. Also follow ’s fallback idea: always provide sensible fallbacks.

If you want to self-host a font, do this:

  1. Confirm the font license allows web hosting.
  2. Generate WOFF/WOFF2 (and a WOFF fallback) — a webfont generator helps.
  3. Upload the files to your server and declare them with @font-face. Example:
@font-face {
  font-family: 'MyChatFont';
  src: url('/fonts/MyChatFont.woff2') format('woff2'),
       url('/fonts/MyChatFont.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

Use font-display: swap to avoid long invisible-text delays, and keep a system fallback in your font-family for users who don’t get the webfont.

If you prefer a hosted provider, Google Fonts is the fastest route: they serve optimized formats and handle licensing/subsetting for you. An example import looks like:

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">

Troubleshooting notes: if fonts come from a different domain, enable CORS (Access-Control-Allow-Origin). Make sure your server sends correct MIME types and use preload for critical fonts:

<link rel="preload" href="/fonts/MyChatFont.woff2" as="font" type="font/woff2" crossorigin>

Further reading: the MDN guide to @font-face (MDN @font-face), Google Fonts (Google Fonts), and a font-kit generator like Font Squirrel (Font Squirrel Webfont Generator). Respect licenses — not every desktop font can legally be served as a webfont.

Recommended Answers

All 10 Replies

Member Avatar for stymiee

The only effective way to do this is to use sIFR but that isn't good solution for an entire page. It's designed more for headers and maybe a small snippet of text.

In general you shouldn't be using fonts that aren't standard on all computers. If you do, you should be sure to make a list of several fonts to be used so if one is not available the browser can try another.

Member Avatar for Pro2000

OK, Thanks Stymiee you're always the best, but I really want to add those fonts... I wrote a chat program and I said: those fonts should make that program better and more beautiful... anyway... ThAnK YoU.

Member Avatar for MidiMagic

There are several ways to procede:

- The best way is to define a style with the font you want, and a font-family to use if the font isn't there.

- Another way is to tell the users where they can download your font.

- If the font is to be used for a title, you can make a jpg file of the title, and upload the picture to your site.

But remember this: Not everyone is going to like your font. Some fonts are quite hard to read, especially on a higher-resolution monitor.

I, for instance, have trouble reading fonts with serifs. So I specify a font-family of sans-serif. I also hid all the serif fonts from my browser.

Member Avatar for Pro2000

There are several ways to procede:

- The best way is to define a style with the font you want, and a font-family to use if the font isn't there.

Thanks MidiMagic I thought about that, but I see that the automatic download is better,so I want to know how can I make the page download the fonts automatically when the users open that page?
thanks again.

Member Avatar for stymiee

You can't. That would be a security issue if it was possible.

Member Avatar for Pro2000

Sorry Stymiee,but I did not understand, can you explaine,please?

Member Avatar for Pro2000

Ok, I decided to set the standard fonts,but.....:) :?:
Which fonts from these are standard fonts?:
Colonna MT
Comic Sans MS
Consolas
Odessa LET
OK PLEASE ANSWER

Member Avatar for stymiee

It doesn't really matter as long as one of them is. Then you can tell the user's browser which order you wish it to try them. It will go down the list until it finds a font the user has on their system. To make sure you don't get the default font make sure specify a standard font like 'arial' or a font family like 'sans-serif' so you know they are getting a decent font if none of the fonts you specify are available.

font-family: Colonna MT, Comic Sans MS, Consolas, Odessa LET, arial, helvetica, sans-serif;

FYI, I don't think any of the fonts you want to use are standard fonts.

Member Avatar for MidiMagic

Sorry Stymiee,but I did not understand, can you explaine,please?

Other than in the temporary Internet storage area, you do not have any right to put files on someone else's hard disk without their permission. Fonts go in a permanent area of a hard disk.

It is against the law to alter hard drives on other computers without permission.

Member Avatar for Designer_101

There are two ways that are effective to this

1) Make the font as an image using photoshop or other stuff like firefox.
2) use the:

<style>
*tag*  {
font-family:Colonna MT, Comic Sans MS, Consolas, Odessa LET, arial, helvetica, sans-serif;
          }

and replace the *tag* with the tags that are on you words
ex.
<html>
<head>
<title>example</title>

<style>
b  {
font-family:Colonna MT, Comic Sans MS, Consolas, Odessa LET, arial, helvetica, sans-serif;
    }
</style>

</head>

<body>

<b>example</b>

</body>
</html>

ok?

Edited by mike_2000_17 because: Fixed formatting
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.