Skip navigation
Currently Being Moderated

Inserting a font from Google Fonts in page.

Jan 31, 2013 8:55 AM

I made a web page that used a font in Google Fonts, but the font didn't show up when I uploaded the web page.

 

I placed the required link immediately after the <head> tag. The code is listed below. Any help would be appreciated.

 

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"><!-- InstanceBegin template="/Templates/webtemplate.dwt" codeOutsideHTMLIsLocked="false" -->

<head><link href='http://fonts.googleapis.com/css?family=Droid+Sans:400,700' rel='stylesheet' type='text/css'>

<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<!-- InstanceBeginEditable name="doctitle" -->

<title>Title of Page</title>

<!-- InstanceEndEditable -->

<style type="text/css">

.test-droid {

    font-family: 'Droid Sans', sans-serif;

    font-size: x-large;

    color: #000000;

}

body {

    background-image: url(images/back.jpg);

}

</style>

 
Replies
  • Currently Being Moderated
    Jan 31, 2013 9:48 AM   in reply to Thongrrrl14

    Missing the include code:

     

     

    <link href='http://fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet' type='text/css'>

     

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 31, 2013 9:55 AM   in reply to SnakEyez02

    The way you have it should work fine as long as you are using class="test-droid" in an element with text in it.

     

    I just copy and pasted your code and it works in Firefox as long as I add the "test-droid" class to an element.

     

    Is it possible you forgot that step?

     

    Keep in mind, it will not preview in IE9. The page will need to be uploaded to see the font style.

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 31, 2013 11:51 AM   in reply to Jon Fritz II

    Scratch my last comment.  Missed that it was on the same line.

     

    If you are getting compatibility issues you could get the kit from FontSquirrel and load that on your server instead.  That will give you the SVG for "i" devices and EOT for older IE.

     

    http://www.fontsquirrel.com/fonts/Droid-Sans

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points