Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    New Coder
    Join Date
    Apr 2011
    Location
    Arizona/California
    Posts
    16
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Getting a font to display correctly in Weebly

    I want my website to use Friz Quadrata, and I've read up on how to add custom fonts to Weebly's themes' CSS, but it doesn't seem to be working.

    It said to add the font name to the bolded part:

    Code:
    body {
    margin: 0 auto;
    padding: 0;
    font: 76% Friz Quadrata,Verdana,Tahoma,Arial,sans-serif;
    background: #f4f4f4 url(bg.gif) top center repeat-y;
    }
    
    #wrap {
    background: #ffffff;
    color: #303030;
    margin: 0 auto;
    width: 760px;
    }
    
    #header {
    clear: both;
    padding: 0;
    padding: 20px 0 0 0;
    height: 45px;
    }
    
    #header h1 {
    margin: 0 0 10px 0;
    float: left;
    line-height:1.5;
    }
    
    #header p {
    width: 500px;
    float: right;
    text-align: center;
    color: #a0a0a0;
    margin: 0 0 10px 0;
    font-size: 0.8em;
    line-height:1.5;
    }
    
    #frontphoto {
    margin: 0 0 10px 0;
    border: 0;
    width: 760px;
    height: 175px;
    background:#ffffff url(%%HEADERIMG%%) top left no-repeat;
    }
    
    #avmenu {
    clear: left;
    float: left;
    width: 150px;
    margin: 0 0 10px 0;
    padding: 0;
    font-size: 0.9em;
    }
    
    #avmenu ul {  
    list-style: none;
    width: 150px;
    margin: 0 0 20px 0;
    padding: 0;
    font-size: 1.1em;
    }  
    
    #avmenu li {
    margin-bottom: 4px;
    }
    
    #avmenu li a {
    font-weight: bold;
    text-decoration: none;
    color: #505050;
    display: block;
    padding: 6px 1px 6px 10px;
    background: #f4f4f4;
    border-left: 4px solid #cccccc;
    }  
      
    #avmenu li a:hover {
    background: #eaeaea;
    color: #286ea0;
    border-left: 4px solid #286ea0;
    }
    #active a:link {
      background: #eaeaea;
      color: #286ea0;
      border-left: 4px solid #286ea0;
    }
    #active a:hover {
      background: #eaeaea;
      color: #286ea0;
      border-left: 4px solid #286ea0;
    }
    #active a:visited {
      background: #eaeaea;
      color: #286ea0;
      border-left: 4px solid #286ea0;
    }
    
    .announce {
    margin: 10px 0 10px 0;
    padding: 10px;
    width: 130px;
    color: #505050;
    background-color: #f4f4f4;
    line-height:1.5;
    }
    
    #extras {
    float: right;
    width: 100px;
    margin: 0 0 10px 0;
    padding: 0;
    font-size: 0.9em;
    line-height:1.5;
    }
    
    #extras p {
    margin: 0 0 1.5em 0;
    }
    
    #content {
    margin: 0 0 20px 0px;
    border-left: 1px solid #f0f0f0;
    border-right: 1px solid #f0f0f0;
    padding: 0 10px 0 10px;
    line-height:1.5;
    text-align: justify;
    min-height:400px;
    height:auto !important;
    height:400px;
    width: 578px;
    float: right;
    overflow-x:visible !important;
    overflow-x:hidden;
    }
    
    #content h2 {
    font-size: 1.5em;
    margin: 0 0 0.5em 0;
    }
    
    #content img {
    padding: 1px;
    display:inline;
    border: 4px solid #f0f0f0;
    }
    
    h3 {
    font-size: 1.3em;
    margin: 0 0 10px 0;
    }
    
    a {
    text-decoration: none;
    color: #286ea0;
    }
    
    a:hover {
    text-decoration: underline;
    color: #286ea0;
    }
    
    a img {
    border: 0;
    }
    
    #footer {
    clear: both;
    margin: 0 auto;
    padding: 10px 0 20px 0;
    border-top: 4px solid #f0f0f0;
    width: 760px;
    text-align: center;
    color: #808080;
    font-size: 0.9em;
    }
    
    #footer a {
    color: #808080;
    text-decoration: none;
    }
    
    #footer a:hover {
    text-decoration: underline;
    }
    
    .left {
    margin: 10px 10px 5px 0;
    float: left;
    }
    
    .right {
    margin: 10px 0 5px 10px;
    float: right;
    }
    
    .textright {
    text-align: right;
    }
    
    .center {
    text-align: center;
    }
    
    .small {
    font-size: 0.8em;
    }
    
    .bold {
    font-weight: bold;
    }
    
    .hide {
    display: none;
    }
    
    
    /****************************** flyout menus ******************************/
    
    #weebly-menus .weebly-menu-wrap {
      z-index: 5000;
    }
    
    #weebly-menus .weebly-menu {
      padding: 0;
      margin: 0;
      list-style: none;
    }
    
    #weebly-menus .weebly-menu li {
      float: left;
      clear: left;
      width: 170px;
      text-align: left;
    }
    
    #weebly-menus .weebly-menu li a {
      position: relative;
      display: block;
      width: 100%;
      background: #286ea0;
      border-right: 1px solid #286ea0;
      border-left: 1px solid #286ea0;
      border-bottom: 1px solid #286ea0;
      text-decoration: none;
      font-family:Verdana,Tahoma,Arial,sans-serif;
      font-size: 11px;
      font-weight: bold;
      line-height:1;
      padding:3px;
      color: #ccc;
    }
    
    #weebly-menus .weebly-menu li a:hover {
      border-right: 1px solid #3680b6;
      border-left: 1px solid #3680b6;
      border-bottom: 1px solid #3680b6;
      background: #3680b6;
    }
    
    #weebly-menus span.weebly-menu-title {
      display: block;
      padding: 5px 10px;
    }
    
    #weebly-menus span.weebly-menu-more {
      background: transparent url(http://images.weebly.com/weebly/images/submenu_arrow.gif) no-repeat center top;
      display: block;
      position: absolute;
      right: 5px;
      top: 0;
      font-family: Courier;
      height: 28px;
      line-height: 28px;
      padding:1px 0 3px 0;
    }
    That doesn't seem to be working, though. What am I doing wrong? Please keep in mind that I'm very new at this stuff, so go easy on me.

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,084
    Thanks
    23
    Thanked 593 Times in 592 Posts
    Friz Quadrata is not a native font. It did not come with my windows xp op system. If you want to use it, you must install it and that does not work in all browsers.

  • #3
    New Coder
    Join Date
    Apr 2011
    Location
    Arizona/California
    Posts
    16
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Ok, how do I do that? I understand how I make my browser display it, but I want it to display on my website.

  • #4
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,084
    Thanks
    23
    Thanked 593 Times in 592 Posts

  • #5
    New Coder
    Join Date
    Apr 2011
    Location
    Arizona/California
    Posts
    16
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Ok, so I went ahead and generated the code for Friz Quadrata:
    Code:
    /* Generated by Font Squirrel (http://www.fontsquirrel.com) on April 17, 2011 */
    
    
    
    @font-face {
        font-family: 'FrizQuadrataTTRegular';
        src: url('frizquadratatt-webfont.eot');
        src: url('frizquadratatt-webfont.eot?#iefix') format('eot'),
             url('frizquadratatt-webfont.woff') format('woff'),
             url('frizquadratatt-webfont.ttf') format('truetype'),
             url('frizquadratatt-webfont.svg#webfontat9YVqII') format('svg');
        font-weight: normal;
        font-style: normal;
    
    }
    Where should I add it to the above CSS?

  • #6
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,084
    Thanks
    23
    Thanked 593 Times in 592 Posts
    you can put it anywhere in the css

  • #7
    New Coder
    Join Date
    Apr 2011
    Location
    Arizona/California
    Posts
    16
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Ok, here's the CSS. What am I doing wrong?

    Code:
    /* andreas01 - an open source xhtml/css website layout by Andreas Viklund (http://andreasviklund.com). Made for OSWD.org, free to use as-is for any purpose as long as the proper credits are given for the original design work. For design assistance and support, contact me through my website or through http://oswd.org/email.phtml?user=Andreas
    
    Version: 1.0
    (July 25, 2005)
    
    Screen layout: */
    
    body {
    margin: 0 auto;
    padding: 0;
    font: 76% Friz Quadrata,Verdana,Tahoma,Arial,sans-serif;
    background: #f4f4f4 url(bg.gif) top center repeat-y;
    }
    
    /* Generated by Font Squirrel (http://www.fontsquirrel.com) on April 17, 2011 */
    @font-face {
        font-family: 'FrizQuadrataTTRegular';
        src: url('frizquadratatt-webfont.eot');
        src: url('frizquadratatt-webfont.eot?#iefix') format('eot'),
             url('frizquadratatt-webfont.woff') format('woff'),
             url('frizquadratatt-webfont.ttf') format('truetype'),
             url('frizquadratatt-webfont.svg#webfontat9YVqII') format('svg');
        font-weight: normal;
        font-style: normal;
    }
    
    #wrap {
    background: #ffffff;
    color: #303030;
    margin: 0 auto;
    width: 760px;
    }
    
    #header {
    clear: both;
    padding: 0;
    padding: 20px 0 0 0;
    height: 45px;
    }
    
    #header h1 {
    margin: 0 0 10px 0;
    float: left;
    line-height:1.5;
    }
    
    #header p {
    width: 500px;
    float: right;
    text-align: center;
    color: #a0a0a0;
    margin: 0 0 10px 0;
    font-size: 0.8em;
    line-height:1.5;
    }
    
    #frontphoto {
    margin: 0 0 10px 0;
    border: 0;
    width: 760px;
    height: 175px;
    background:#ffffff url(%%HEADERIMG%%) top left no-repeat;
    }
    
    #avmenu {
    clear: left;
    float: left;
    width: 150px;
    margin: 0 0 10px 0;
    padding: 0;
    font-size: 0.9em;
    }
    
    #avmenu ul {  
    list-style: none;
    width: 150px;
    margin: 0 0 20px 0;
    padding: 0;
    font-size: 1.1em;
    }  
    
    #avmenu li {
    margin-bottom: 4px;
    }
    
    #avmenu li a {
    font-weight: bold;
    text-decoration: none;
    color: #505050;
    display: block;
    padding: 6px 1px 6px 10px;
    background: #f4f4f4;
    border-left: 4px solid #cccccc;
    }  
      
    #avmenu li a:hover {
    background: #eaeaea;
    color: #286ea0;
    border-left: 4px solid #286ea0;
    }
    #active a:link {
      background: #eaeaea;
      color: #286ea0;
      border-left: 4px solid #286ea0;
    }
    #active a:hover {
      background: #eaeaea;
      color: #286ea0;
      border-left: 4px solid #286ea0;
    }
    #active a:visited {
      background: #eaeaea;
      color: #286ea0;
      border-left: 4px solid #286ea0;
    }
    
    .announce {
    margin: 10px 0 10px 0;
    padding: 10px;
    width: 130px;
    color: #505050;
    background-color: #f4f4f4;
    line-height:1.5;
    }
    
    #extras {
    float: right;
    width: 100px;
    margin: 0 0 10px 0;
    padding: 0;
    font-size: 0.9em;
    line-height:1.5;
    }
    
    #extras p {
    margin: 0 0 1.5em 0;
    }
    
    #content {
    margin: 0 0 20px 0px;
    border-left: 1px solid #f0f0f0;
    border-right: 1px solid #f0f0f0;
    padding: 0 10px 0 10px;
    line-height:1.5;
    text-align: justify;
    min-height:400px;
    height:auto !important;
    height:400px;
    width: 578px;
    float: right;
    overflow-x:visible !important;
    overflow-x:hidden;
    }
    
    #content h2 {
    font-size: 1.5em;
    margin: 0 0 0.5em 0;
    }
    
    #content img {
    padding: 1px;
    display:inline;
    border: 4px solid #f0f0f0;
    }
    
    h3 {
    font-size: 1.3em;
    margin: 0 0 10px 0;
    }
    
    a {
    text-decoration: none;
    color: #286ea0;
    }
    
    a:hover {
    text-decoration: underline;
    color: #286ea0;
    }
    
    a img {
    border: 0;
    }
    
    #footer {
    clear: both;
    margin: 0 auto;
    padding: 10px 0 20px 0;
    border-top: 4px solid #f0f0f0;
    width: 760px;
    text-align: center;
    color: #808080;
    font-size: 0.9em;
    }
    
    #footer a {
    color: #808080;
    text-decoration: none;
    }
    
    #footer a:hover {
    text-decoration: underline;
    }
    
    .left {
    margin: 10px 10px 5px 0;
    float: left;
    }
    
    .right {
    margin: 10px 0 5px 10px;
    float: right;
    }
    
    .textright {
    text-align: right;
    }
    
    .center {
    text-align: center;
    }
    
    .small {
    font-size: 0.8em;
    }
    
    .bold {
    font-weight: bold;
    }
    
    .hide {
    display: none;
    }
    
    
    /****************************** flyout menus ******************************/
    
    #weebly-menus .weebly-menu-wrap {
      z-index: 5000;
    }
    
    #weebly-menus .weebly-menu {
      padding: 0;
      margin: 0;
      list-style: none;
    }
    
    #weebly-menus .weebly-menu li {
      float: left;
      clear: left;
      width: 170px;
      text-align: left;
    }
    
    #weebly-menus .weebly-menu li a {
      position: relative;
      display: block;
      width: 100%;
      background: #286ea0;
      border-right: 1px solid #286ea0;
      border-left: 1px solid #286ea0;
      border-bottom: 1px solid #286ea0;
      text-decoration: none;
      font-family:Verdana,Tahoma,Arial,sans-serif;
      font-size: 11px;
      font-weight: bold;
      line-height:1;
      padding:3px;
      color: #ccc;
    }
    
    #weebly-menus .weebly-menu li a:hover {
      border-right: 1px solid #3680b6;
      border-left: 1px solid #3680b6;
      border-bottom: 1px solid #3680b6;
      background: #3680b6;
    }
    
    #weebly-menus span.weebly-menu-title {
      display: block;
      padding: 5px 10px;
    }
    
    #weebly-menus span.weebly-menu-more {
      background: transparent url(http://images.weebly.com/weebly/images/submenu_arrow.gif) no-repeat center top;
      display: block;
      position: absolute;
      right: 5px;
      top: 0;
      font-family: Courier;
      height: 28px;
      line-height: 28px;
      padding:1px 0 3px 0;
    }

  • #8
    New Coder
    Join Date
    Apr 2011
    Location
    Arizona/California
    Posts
    16
    Thanks
    6
    Thanked 0 Times in 0 Posts
    ¿Qué?

  • #9
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,084
    Thanks
    23
    Thanked 593 Times in 592 Posts
    Pegasus1935 you must generate these fonts and have them on your server at the url locations. Please re read the html page again.

  • #10
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    By convention, all at-rules should be at the top of the document, starting with @charset.

    As for your font issue, you must do this:
    - Upload the font files to the same directory as the CSS file
    - Reference "FrizQuadrataTTRegular" when you wish to use the font.

  • #11
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,084
    Thanks
    23
    Thanked 593 Times in 592 Posts
    Something has been on my mind all night. To make down loadable fonts you need to own the fonts or use free fonts. I am sure Friz Quadrata fonts are not free. When you go to buy fonts there are problems with what you can do with them. So ask if you can do what you want to do before buying or look for a free font that is similar.

    And Apostropartheid, I knew that. Don't know why i said what i said. Sorry guys.


  •  

    Posting Permissions

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