• 0

Custom Fonts not appearing on webpages on other computers?


Question

Hi there,

Just recently created a website in iWeb and made it live. I used mostly custom fonts downloaded from here there and everywhere, however when I access the site on another computer the fonts don't show up.

Is this because they need to have the fonts installed on their computers to view them?

Is there any workaround to this?

Medking

8 answers to this question

Recommended Posts

  • 0

Yes, this is because you're using a custom font where it isn't installed on the other computer that's trying to access it. The best workaround is to make the area of font you're trying to use (Say, navigation or header) a custom image rather than text.

If you're using a custom font as body text, I'd recommend falling back to fonts such as Verdana, Arial, Tahoma, Trebuchet MS, Helvetica or Georgia to name a few.

  • 0

Ok thanks a lot for the help.

And yes I'm probably going to have to change some of my main body text fonts.

I've changed my headings already, but since Google won't recognize image text I'm going to have to change the body text.

Also, any tips on making the website appear when you search in google? You can't embed metadata or anything like that in iWeb right?

  • 0

I would recommend sticking to "web based" fonts for anything in your body text (eg: paragraphs).

If you have a CSS stylesheet you can add/change:

 body {
  font-family: Helvetica, arial, verdana, sans-serif;
 }

The font stack I created will show all text in Helvetica but if that is not present on the computer it will then load arial, verdana or if none of those are available it will simply choose a sans-serif font.

If you do have some headings that you want to use a custom font with, I would recommend trying out Cufon: http://cufon.shoqolate.com/generate/. It will allow you to use an OTF or TTF font with CSS. So it will be compatible in all computers/browsers.

To see an example as well, you can check out the 2nd link in my profile. All of my heading text use Cufon. :)

  • 0

There are some javascript based solutions which enable you to use custom fonts even though they may not be available on the viewers computer. sIFR and cufon are the ones that I have tried and worked very well. I prefer cufon because it is a lot faster than sIFR and does not need flash to function like sIFR. However cufon does have a disadvantage that does not affect sIFR. Text generate by cufon can not be selected.

  • 0
  primexx said:
why use outdated hacks when you can embed the font directly? http://nicewebtype.com/notes/2009/10/30/ho...-css-font-face/

No one suggested any "hacks" nor did the OP actually use any hack. I'd prefer rendering with cufon or SIFR before just letting @font-face utilization. Unless you don't mind fonts look jagged..

This topic is now closed to further replies.
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Posts

    • Consumer Reports is flat out wrong. Wouldn't be the first time it's a fact that when you have more moving parts, you have more room for failure. Less points of failure when all you replace on an EV is the tires and the wipers.
    • WYSIWYG Web Builder 20.2.2 by Razvan Serea Web Buialder is a WYSIWYG (What-You-See-Is-What-You-Get) program used to create complete web sites. WYSIWYG means that the finished page will display exactly the way it was designed. The program generates HTML (HyperText Markup Language) tags while you point and click on desired functions; you can create a web page without learning HTML. Just drag and drop objects to the page position them "anywhere" you want and when youre finished publish it to your web server (using the build in Publish tool). Web Builder gives you full control over the content and layout of your web pages. One Web Builder project file can hold multiple web pages. Desktop publishing for the web, build web sites as easy as Drag & Drop "One Click Publishing" No FTP program needed. No special hosting required, use with any Hosting Service! Easily create forms using the built-in Form Wizard plus Form validation tools and built-in CAPTCHA. Advanced graphics tools like shapes, textart, rotation, shadows and many other image effects. Fully integrated jQuery UI (Accordion, Tabs etc), animations, effects and built-in ThemeRoller theme editor. Google compatible sitemap generator / PayPal eCommerce Tools Many navigation tools available: Navigation bars, tab menus, dropdown menus, sitetree, slidemenus. Built-in Slide Shows, Photo Galleries, Rollover images, Banners etc. Support for YouTube, Flash Video, Windows Media Player and many other video formats. Unique extension (add-on) system with already more than 250 extensions available! Create HTML5 / CSS3 websites today HTML5 document type (optimized HTML5 output). HTML5 audio/video and YouTube HTML5 support. HTML5 forms: native form validation, new input types and options, web storage. HTML5 canvas and svg support in shapes and other drawing tools. CSS3 @font-face. Use non web safe fonts in all modern browsers. CSS3 opacity, border radius, box shadow. CSS3 gradients. Add cool gradient effects using native CSS3 (no images). CSS3 navigation menu. Create awesome menus without using JavaScript or images. CSS3 animations and transitions. Including support for 2D and 3D transforms! Features for advanced users: Login Tools/Page Password Protection. Built-in Content Management System with many plug-ins (guestbook, faq, downloads, photo album etc). Add custom HTML code with the HTML tools. JavaScript Events: Show/hide objects (with animation), timers, move objects, change styles etc. Layers: Sticky layer, Docking layer, Floating layer, Modal layer, Anchored layer, Strechable layer and more! jQuery Theme Manager, create your own themes for the built-in jQuery UI widgets. Style Manager (global styling, H1, H2, H3 etc). Master Frames and Master Objects: reuse common element in your website. and much more! WYSIWYG Web Builder 20.2.2 changelog: Improved: Minor change in HTML formatting of the Overlay Menu. Fixed: Issue with aspect ratio of HTML Video. Download: WYSIWYG Web Builder 64-bit | 30.1 MB (Shareware) Download: WYSIWYG Web Builder 32-bit | 28.0 MB Screenshot: >> Click here << Link: Home Page | Templates | Free extras/addons | Changelog Get alerted to all of our Software updates on Twitter at @NeowinSoftware
    • You are like that narcissistic moron and his name is Paul Thurrott.
  • Recent Achievements

    • Collaborator
      Mighty Pen went up a rank
      Collaborator
    • Week One Done
      emptyother earned a badge
      Week One Done
    • Week One Done
      DarkWun earned a badge
      Week One Done
    • Very Popular
      valkyr09 earned a badge
      Very Popular
    • Week One Done
      suprememobiles earned a badge
      Week One Done
  • Popular Contributors

    1. 1
      +primortal
      568
    2. 2
      +FloatingFatMan
      188
    3. 3
      ATLien_0
      177
    4. 4
      Skyfrog
      111
    5. 5
      Xenon
      110
  • Tell a friend

    Love Neowin? Tell a friend!