www.webdeveloper.com
Results 1 to 8 of 8

Thread: Unformatted Text

Hybrid View

  1. #1
    Join Date
    Jan 2013
    Posts
    3

    Unformatted Text

    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;
    }

  2. #2
    Join Date
    Jan 2013
    Posts
    4
    A good place to start your investigation: http://productforums.google.com/foru...cs/qwPyKyPOhLE

  3. #3
    Join Date
    Jan 2013
    Posts
    3
    Quote Originally Posted by jeremyraybrown View Post
    A good place to start your investigation: http://productforums.google.com/foru...cs/qwPyKyPOhLE
    Thanks for the advice.

  4. #4
    Join Date
    Apr 2006
    Posts
    66
    Your css is defining a psudo-class called page.

    Needs to define the body tag.

    Jack O'Connell

  5. #5
    Join Date
    Jan 2013
    Posts
    3

    Red face

    Quote Originally Posted by jackoconnell View Post
    Your css is defining a psudo-class called page.

    Needs to define the body tag.

    Jack O'Connell
    Thanks for the advice.
    Last edited by kdlangford; 01-17-2013 at 03:50 PM.

  6. #6
    Join Date
    May 2005
    Location
    Gold Coast (MS)
    Posts
    2,213
    Try:

    Code:
    .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/
    Last edited by Major Payne; 01-19-2013 at 08:33 AM.

  7. #7
    Join Date
    Nov 2012
    Posts
    23
    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.

  8. #8
    Join Date
    Sep 2006
    Location
    new york
    Posts
    266
    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;
    }

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles