Member Avatar for SKANK!!!!!

i want to use this font i made at this one website called fontstruct.
and i found the css code its:

<style>@font-face {
  font-family: "italic";
  src: url() format("truetype");
}
h1 { font-family: "italic", sans-serif;text-decoration:italic;}
</style>

it says it works but it doesnt. please help

  • 4 Contributors
  • 15 Replies
  • 129 Views
  • 3 Weeks Discussion Span
  • Latest Post Latest Post by Airshow

Dani AI

Generated

A few quick, practical updates that build on what , and started: custom fonts are now a standard technique when packaged and served correctly, but the two usual failure points are format/packaging and server headers. The easiest path today is to convert your TTF into modern web formats (WOFF/WOFF2), check the font’s internal name, and serve the files with the right MIME types and CORS headers. If the font is only for a single graphic (logo or heading) an image still makes sense, but for body or multiple headings a webfont is better for accessibility and SEO.

Troubleshooting checklist:

  • Convert/subset the TTF to WOFF/WOFF2 (use a reputable webfont generator) and verify the license allows embedding.
  • Open each font URL directly to confirm the file returns 200 and isn’t blocked.
  • Look at the browser console for 404 or CORS errors — they tell you what to fix.
  • Confirm the font’s internal family name (editors or fonttools can show it) and use that exact name in CSS.

Example server fixes (add to your site config or .htaccess to avoid common problems):

# Apache (.htaccess)
AddType font/woff2 .woff2
AddType font/woff  .woff
AddType font/ttf   .ttf
<IfModule mod_headers.c>
  <FilesMatch "\.(ttf|otf|woff|woff2)$">
    Header set Access-Control-Allow-Origin "*"
  </FilesMatch>
</IfModule>

Modern CSS approach (use WOFF2 first, include fallback, and avoid FOIT):

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

Extra tips: preload critical fonts with rel="preload" as="font" crossorigin, subset to cut kilobytes, and prefer hosting on the same domain or enable CORS when cross-hosting. These steps resolve the majority of “it works on my machine but not theirs” cases that started this thread.

Recommended Answers

All 15 Replies

Member Avatar for Airshow

Skank,

Suggestions:

  1. There's a reasonable chance that @font-face is not supported by your browser.
  2. Avoid naming your font "italic".
  3. text-decoration:italic; will have no effect. "italic is not a valid option for text-decoration".
  4. Are you sure that you created a truetype font?

Airshow

Member Avatar for SKANK!!!!!

yeah i took all that out im using firefox i dont know whats wrong with it. its a ttf font

Member Avatar for Airshow

Skank,

From what I read, supported from Firefox 3.1 (beta). Currently at release 3.0.10 .

Airshow

Member Avatar for SKANK!!!!!

oh so font is not world browser supps?

Member Avatar for itsjareds

Custom fonts are not supported currently by enough browsers to be a useable method. The only real way to create your own fonts is to either have a PHP script write an image with a font, or get an application like Flash to write your font.

Member Avatar for SKANK!!!!!

oh thats too bad. browsers should support this! noone likes it when their site doesnt look the same to someone else because they dont have a font installed and their default font on their browser is of horrible size compared to what the website is supposed to looks like. : [[[

Member Avatar for itsjareds

You could use a method like this to dynamically place PHP image fonts. However, beware that this will slow down page serve time for the server, and lengthen page rendering time for the end user. Only use it if you need to make a logo or header, or something that doesn't appear a million times.

http://www.marcofolio.net/webdesign/use_a_custom_font_on_your_website.html

Member Avatar for itsjareds

Hehe, I did something similar on another forum with greasemonkey and PHP so that when I submitted a post, GM would take my text and change it to an image script on my site, like this: <img src="" alt="MY_TEXT_HERE"/> All of my posts had a cool font :P

Member Avatar for Airshow

Sneaky or what!? Must have left a lot of people guessing.

Airshow

Member Avatar for SKANK!!!!!

cool im not going to do custom fonts anytime soon

Member Avatar for MidiMagic

Remember that the browser looks at the fonts installed on the USER'S computer, not your host. The user would have to voluntarily install your font for the browser to be able to use it.

Your best option, if you must use a nonstandard font, is to use MSPaint to stick it into an image file, and then display that.

Member Avatar for SKANK!!!!!

Remember that the browser looks at the fonts installed on the USER'S computer, not your host. The user would have to voluntarily install your font for the browser to be able to use it.

Your best option, if you must use a nonstandard font, is to use MSPaint to stick it into an image file, and then display that.

how do u stick fonts to image fies?

Member Avatar for itsjareds

He was saying to literally make each and every image with text that is in a certain font. Microsoft Paint should let you change the font by default when you use the Text Tool.

Member Avatar for Airshow

Remember that the browser looks at the fonts installed on the USER'S computer, not your host. The user would have to voluntarily install your font for the browser to be able to use it.

Your best option, if you must use a nonstandard font, is to use MSPaint to stick it into an image file, and then display that.

That's certainly true of CSS2 font but Skank was wanting to use a custom font (ie. one not necessarily installed on the client).

His hope was that CSS3 @font-face would do the trick but was advised that @font-face, whilst being functionally correct for the job, is not yet widely enough implemented to be considered mainstream. It should therefore not yet be used in general internet pages.

As you point out, you can indeed serve an image created in photoshop/paintshop/MSpaint, containing text in any font available to you as a designer (I've done it and I'm sure many other have before and since). The drawback here is that image creation is a manual process and therefore not particularly responsive to web pages in which the content changes.

Itsjareds provided a link to two very interesting techniques, which, whilst inefficient, will achieve a custom font effect by replacement of text (designated by standard HTML markup) with dynamically generated images.

I think those are all the important points and hope I haven't mis-represented anybody's good words.

Edited by happygeek 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.