Member Avatar for devgit2810

How can i allow a user to view a font on my webpage which is not available on his computer?
I want to learn how to use a plugin for that purpose ?

  • 7 Contributors
  • 6 Replies
  • 198 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by veera100

Dani AI

Generated

Short answer: you do not need a browser plugin. Modern browsers load web fonts via CSS, so you can either use a font-hosting service (the quick route) or self-host fonts for full control. is right that services are easy; is right that @font-face is what makes a custom font work. is also right to warn about extra download time — that’s what we should optimize for.

Keep these practical points in mind:

  • Choose the right delivery: CDN for convenience and possible cache hits, self-hosting for privacy, legal control, and predictable performance.
  • Minimize files: prefer WOFF2, subset characters to what you need, and limit weights/styles.
  • Avoid FOIT (invisible text) by using font-display and preload only critical fonts so body text appears quickly.
  • Check licensing: some fonts cannot legally be self-hosted; always confirm the license before uploading files.
  • If fonts are on another origin, ensure the server returns proper CORS headers (Access-Control-Allow-Origin) and use crossorigin on the preload/link tags.

Example pattern that is safe to adapt (self-hosting, modern formats, and swap behavior):

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

<style>
@font-face {
  font-family: "MyFont";
  src: url("/fonts/MyFont.woff2") format("woff2"),
       url("/fonts/MyFont.woff") format("woff");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

body { font-family: "MyFont", "Helvetica Neue", Arial, sans-serif; }
</style>

Quick fixes and checks: quote multi-word names, use a sensible fallback stack (generic family last), and test on slow connections to see FOUC/FOIT behavior. Also note ’s sample has typos — use Verdana and sans-serif (two separate family names) rather than a single misspelled token.

Recommended Answers

All 6 Replies

Member Avatar for hericles

You can use google web fonts for that. You download the font via an href to the google font location.
Here is Google's getting started guide

commented: what he said :) +13
Member Avatar for almostbob

even using google webfonts, keep it simple
use the google href, not from your own site
the added download time for a font kills user retention
fonts referenced from google may already be in the cache

Member Avatar for benwilson

you can use this code for that

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">
    <style>
      body {
        font-family: 'Tangerine', serif;
        font-size: 48px;
      }
    </style>
  </head>
  <body>
    <div>Making the Web Beautiful!</div>
  </body>
</html>

This is very much helpful to you.

Member Avatar for vps9.net 
<style type="text/css">
@font-face {
    font-family: "My Custom Font";
    src: url() format("truetype");
}
p.customfont { 
    font-family: "My Custom Font", Verdana, Tahoma;
}
</style>
<p class="customfont">Hello world!</p>

try this
Member Avatar for veera100

you just add the given css code to your styles.css

body{font-family: 'sanserif verdena';}
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.