Member Avatar for prashanth18

im using INKBURRO font after uploading my site the font doesn't appear on my webpages
how can i embed my font in my webpages

  • 8 Contributors
  • 7 Replies
  • 294 Views
  • 2 Years Discussion Span
  • Latest Post Latest Post by leakbali

Dani AI

Generated

A concise, modern addendum to the thread (references to earlier replies: , , , , , ).

Webfonts today: the standard solution is to declare the font with CSS @font-face and serve compressed web formats (WOFF/WOFF2). That replaces old text‑replacement and Flash-era techniques mentioned earlier and gives reliable cross-browser results when done properly. (developer.mozilla.org)

Practical example (use relative paths or host where license permits):

@font-face {
  font-family: 'Inkburro';
  src: url('/fonts/Inkburro.woff2') format('woff2'),
       url('/fonts/Inkburro.woff')  format('woff'),
       url('/fonts/Inkburro.ttf')   format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* use the font */
h1, .brand { font-family: 'Inkburro', system-ui, sans-serif; }

This pattern favors WOFF2 for best compression, falls back to WOFF/TTF, and uses font-display: swap to avoid long invisible-text periods. Generate or convert formats with a webfont tool if only a TTF/OTF is available. (caniuse.com)

Troubleshooting checklist:

  • Confirm the font files are uploaded to the path used in url() and that the server returns the correct MIME type (e.g., font/woff2, font/woff, font/ttf).
  • If fonts are on a different origin (CDN, subdomain), the font responses must include an appropriate Access-Control-Allow-Origin header; browsers will block cross-origin font loads without it.
  • Use <link rel="preload" as="font" crossorigin> for critical face fonts but match URL, crossorigin, and response headers exactly to avoid wasted downloads.
  • Verify the font license allows web embedding before hosting or converting. (developer.mozilla.org)

Bottom line: converting Inkburro to WOFF2, declaring a multi-format @font-face with font-display, checking CORS/mime and license, and optionally preloading will solve the “font not appearing after upload” problem while keeping performance and compatibility reasonable. (caniuse.com)

Recommended Answers

All 7 Replies

Member Avatar for sreein1986

do onething make one image with that font insert your image in that html or make one option download that font

Member Avatar for ShawnCplus

There are really only two ways until the CSS3 @fontface proposal makes it's way through. One is to pass it through a server-side language which will make an image to replace the text, the other is sIFR which uses Javascript and Flash to replace text

Member Avatar for FC Jamison

I found this article on embedding fonts in a web page

It only works in IE though.

Member Avatar for MelechM

As ShawnCplus said sIFR is a good way to add custom fonts to your site.

Member Avatar for secrets.top

how to embed other fonts in html

Edited by Ezzaral because: Remove unnecessary excessive bbcode formatting.
Member Avatar for leakbali

Trying this CSS,

@font-face
{
font-family: Font1;
src: url('http://www.yourdomain.com/fonts/INKBURRO.TTF');
}

@font-face
{
font-family: Font2;
src: url('http://www.yourdomain.com/fonts/SCRIPT.TTF');
}
#fontface1{font-family : Font1; padding : 10px; margin : 0 auto; text-align : center; font-size : 30px; line-height : 1.3em}

p{font-family : Font1;}
#fontface2{font-family : Font2; }
Edited by leakbali because: n/a
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.