Karelia Community Forum

Geo

Member

Site Displaying different on PC's???

My site looks fine in Sandvox. It displays the published site correct for the most part with all browsers on my mac (Chrome, Safari, Firefox) apart from some minor font changes (Firefox/Safari) and some annoying shifting of the text placement of lists in all browsers.

However, when I view the page on a PC with Chrome or Firefox it shifts the "Site Title" and "Tagline"  to different locations and changes the font. Unfortunately for me this is completely unusable! My company logo/branding uses an image for one of the letters. Because I can't use the image as a banner and have it link back to the home page I got around it by filling the background header image with my banner, minus the text. This leaves just the background graphics and image that is used for a letter in the company name and the recreated the text as close as possible in Sandvox. (ie: Open with "O" being the image) When this is shifted on a PC's browser the O stays in place, since it's an image, and the text is shifted to the right in a different font! Making the main title look embarrassingly bad. Please help!!!

Geo

Member

Re: Site Displaying different on PC's???

The problem appears to just be with Zapfino fonts and Handwriting - Dako. Any ideas?

Geo

Member

Re: Site Displaying different on PC's???

Well... I suppose I found the answer. Can't use these fonts:( I sure wish Karelia would allow Sandvox to have an image in the Header that works as a hyperlink. I currently have no way to get the best of both worlds, keep my branding and have it display correctly for all users. 

"Some care must be taken when choosing fonts. If a font you specify is not installed on a visitor's computer, then their browser will not be able to display it. Instead it will use an alternative font of its own choosing, which may look nothing like your original choice.

One easy way to avoid problems like these is simply to stick to the font used by your site's design; the designs in Sandvox have been built with these concerns in mind. If a visitor does not have the font of a particular design installed, Sandvox will direct the visitor's computer to the best, closest match.

If you want to change the fonts from a design, however, and you also want to make sure that most visitors will see the same font you've specified, try to stick to the standard fonts installed on virtually every Mac/Windows computer:

Arial
Arial Black
Comic Sans MS
Courier New
Georgia
Helvetica
Impact
Times New Roman
Trebuchet MS
Verdana
Also note that even some of these fonts might not be available on Windows 95 computers, which might be a concern for some users. For a complete list of the fonts included in each revision of Windows, please see this article.

(Note: if you are creating a website with the iPhone in mind, keep in mind that from this list, only Arial, Courier New, Georgia, Helvetica, Times New Roman, Trebuchet MS, and Verdana are available.)

Italics

Some fonts do not have an italic version (for example, Lucida Grande). Thus, as in other applications such as TextEdit, in these fonts you won't be able to change a section of text to italic. To compensate, consider using another font (such as Helvetica) set as italic for that text."

macdafydd

Avenger

Re: Site Displaying different on PC's???

The problem is not only between PCs running OSX and Windows operating systems (or Linux, for that matter): the very same problem might arise between two PCs running OSX. As a web designer, you have very, very little control over fonts and if someone decides to remove certain fonts from their system, that is their choice and it might well be reflected in the display of a Web page. I used to know a graphics designer who would remove all the "common" fonts from his systems, so no Helvetica, no Times, and don't even dare to speak to him about Arial.

What's the URL of your site?

---

It says "Avenger," but I am just a Sandvox user who has been assigned the title of Avenger here in order to be able to delete spam messages. http://davidneale.eu/

Geo

Member

Re: Site Displaying different on PC's???

openirisbooths.com is the URL. I got around the banner issue for now by using a common Font and cheating the spacing to keep it close when changing between browsers and computers. Now my main issue is the text shifting in general from what it looks like on Sandvox and how I see it on the web with any browser and computer. Check out the "The Booth" and "Pricing" pages. Everything goes to hell with spacing for some reason with lists. Nothing I've tried so far stays consistent with lists.

JimK

Super Hero

Re: Site Displaying different on PC's???

Based on this text being done in a nonstandard font and the fact that none of this stuff is linked, I think I'd make an image of the text and use that instead...

macdafydd

Avenger

Re: Site Displaying different on PC's???

Geo, how do you get the text into your Sandvox pages? If you use Copy and Paste (coming from an external editor), do you use Paste With Matching Style? If you use some other way, please explain.

Edit: Oops, just looked at your site on the iMac, rather than the iPad and that is one wierd font for a website (doesn't show at all on an iPad, of course). Definitely not Matching Styles! I think perhaps you've just copied and pasted from somewhere else. Looks as if you're trying to get a two-column effect, or perhaps even a table effect, neither of which are standard Sandvox, but can be achieved without too much difficulty with Raw HTML and Code Injection. See http://davidneale.eu/sandvox/index.html for some ideas. But I'd still drop the handwriting (unless, as JimK suggests, you use an image).

---

It says "Avenger," but I am just a Sandvox user who has been assigned the title of Avenger here in order to be able to delete spam messages. http://davidneale.eu/

Geo

Member

Re: Site Displaying different on PC's???

Thanks for the info, guys! I literally just typed using that Handwriting - Dako font in Sandvox and spaced to try and achieve the columns. JimK's method seems to be the easiest for me. I'm pretty new to this stuff and haven't messed with writing html much yet. David Neale/Matthew James CSS doesn't look too hard and I'll play with that later for future use. :)

macdafydd

Avenger

Re: Site Displaying different on PC's???

You can't use space to align things: spaces change their width, depending on font, so alignment is almost inevitably lost. This isn't a Sandvox thing, it's a general rule. CSS and HTML  can be used to ensure consistent alignment in Web pages (much like the use of tabs does in text-processing documents). If you want a quick solution, then you're probably better off with JimK's image solution. Still, play around with CSS and HTML in a test Sandvox document to get used to them, together with site and page code injection and raw HTML objects: they make Sandvox very powerful, in fact, and might prove very useful to you.

---

It says "Avenger," but I am just a Sandvox user who has been assigned the title of Avenger here in order to be able to delete spam messages. http://davidneale.eu/

SteveMouzon

Super Hero

Re: Site Displaying different on PC's???

There's a method out there now that everyone should know about. "Web fonts" work this way:

A. Find the web font you want by Googling. I currently use webINK.com, but fonts.com has thousands of web fonts available, and I think Adobe is starting to offer them, too. You have to subscribe to the service, which costs a few bucks a month.

B. Go to Library>Application Support>Sandvox, where youll find your design files (assuming you're not using a stock design.) Control-click on the design and select Show Package Contents. Inside, you'll find several files, including main.css. Open it. You insert the web fonts using a @font-face command in your main.css file, just before the rest of the font definitions. In other words, almost right at the beginning.

Going completely from memory on this; may need to edit a bit when I get back to my laptop. Bottom line, it's a small nuisance at the beginning, but then you have access to whatever beautiful fonts you want from then on.

macdafydd

Avenger

Re: Site Displaying different on PC's???

You'd be better off inserting the @font-face rule as part of Site Code Injection, otherwise you might lose the link when the design is updated (main.css). An example of how to call a font in this way:

 <style type="text/css" media="screen, print">
    @font-face {
      font-family: "Bitstream Vera Serif Bold";
      src: url("http://developer.mozilla.org/@api/deki/files/2934/=VeraSeBd.ttf");
    }
    
    body { font-family: "Bitstream Vera Serif Bold", serif }
  </style>

And the pure code:

@font-face {
  font-family: <a-remote-font-name>;
  src: <source> [,<source>]*;
  [font-weight: <weight>];
  [font-style: <style>];
}

For more information, see http://nicewebtype.com/notes/2009/10/30 … font-face/ or just search the web for CSS @font-face

---

It says "Avenger," but I am just a Sandvox user who has been assigned the title of Avenger here in order to be able to delete spam messages. http://davidneale.eu/

SteveMouzon

Super Hero

Re: Site Displaying different on PC's???

Good points... the only caveat is that if you ever edit main.css of your design, you should save it as a custom design and leave the master untouched. This means that any updates to the master won't change your custom design. But in any case, thanks for the code... couldn't remember all that.