Unformatted Text

[kdlangford]

Hi everybody. I'm using Dreamweaver CS6 to build a site. Here's my problem: When I launch the page in any browser from Dreamweaver I'm seeing the text formatted in Verdana, which is right. When I upload the page to the server or if I open up the page outside of Dreamweaver i.e just clicking on the page in Finder (I'm using a Mac) and access the page from my disk-drive the page opens, but the text isn't in Verdana. Any ideas why? Thanks for any advice... ps I'm new to developing websites. The page is in HTML5 and I'm also using CSS to format the page and the text properties are within a CSS:


.page
{
max-width:980px;
margin:0px auto;
position:relative;
background-color:#000;
font:Verdana, Geneva, sans-serif;
color:#999;
font-size:17px;
}

[jeremyraybrown]

A good place to start your investigation: http://productforums.google.com/foru...cs/qwPyKyPOhLE

[jackoconnell]

Your css is defining a psudo-class called page.

Needs to define the body tag.

Jack O'Connell

[kdlangford]

Your css is defining a psudo-class called page.

Needs to define the body tag.

Jack O'Connell

Thanks for the advice.

[kdlangford]

A good place to start your investigation: http://productforums.google.com/foru...cs/qwPyKyPOhLE

Thanks for the advice.

[Major Payne]

Try:

.page {
max-width:980px;
margin:0 auto;
background:#000;
font-family:Verdana, Geneva, sans-serif;
font-size:17px;
color:#999;
}

I took out the relative positioning since you're trying to center page with "margin: 0 auto;". Additional info for future use:

Embed Fonts:

1) @font-face Generator (Free Online Tool): http://www.fontsquirrel.com/fontface/generator
( HTML5Rocks has a good tutorial on using @font-face, along with a table showing current browser support: http://www.html5rocks.com/tutorials/webfonts/quick/ )
How to Achieve Cross-Browser @font-face Support: http://blog.themeforest.net/tutorial...-face-support/
CSS3 Embedding @font-face: http://www.zenelements.com/blog/css3-embed-font-face/
Bulletproof @font-face syntax: http://paulirish.com/2009/bulletproo...tation-syntax/

2) Use sIFR:
http://www.mikeindustries.com/blog/sifr/
http://www.sitepoint.com/newsletter/...d=5&issue=58#6
http://www.alistapart.com/articles/dynatext/

3) Use WEFT (supported by IE only): http://www.microsoft.com/typography/...ft/default.htm

4) Expand Your Font Palette Using CSS3: http://randsco.com/index.php/2009/07/04/p680

5) CSS @ Ten: The Next Big Thing: http://www.alistapart.com/articles/cssatten

6) Cufon: http://cufon.shoqolate.com/generate/

7) Use a text image in the font you want.

8) Use Google Fonts: http://www.google.com/webfonts
How To Use Google Fonts In Your Next Web Project & Why You Should: http://www.makeuseof.com/tag/google-fonts-web-project/

9) Fairly New: WOFF - TypeKit: http://typekit.com/ | Font Squirrel: http://www.fontsquirrel.com/

[michellepinto]

I don't think using 'font' and 'font-family' makes any difference. That's not the problem here..?? I'm trying to figure what it is too.

[auntnini]

The above link shows

Sign in to reply
More message actions
6/28/12
Google Docs offers many fonts, but not Verdana. How do I get it back?

Using just "font" is shortcut, requiring specification of multiple features

ee http://www.impressivewebs.com/css-fo...y-cheat-sheet/ or http://css-tricks.com/snippets/css/font-shorthand/

Syntax

body {
font: font-style font-variant font-weight font-size/line-height font-family;
}

In Use

body {
font: italic small-caps normal 13px/150% Arial, Helvetica, sans-serif;
}