text:
/* || General setup */

html, body {
  margin: 0;
  padding: 0;
}

html {
  font-size: 10px;
  background-color: #dde;
}

body {
  width: 80%;
  min-width: 1024px;
  margin: 0 auto;
}

/* || typography */

font[size="7"], font[size="6"], font[size="5"] {
  font-family: 'Sonsie One', cursive;
  color: #2a2a2a;
}

p, input, li, table, label {
  font-family: 'Open Sans Condensed', sans-serif;
  color: #2a2a2a;
}

font[size="7"] {
  font-size: 4rem;
  text-align: center;
  color: white;
  text-shadow: 2px 2px 10px black;
}

font[size="6"] {
  font-size: 3rem;
  text-align: center;
}

font[size="5"] {
  font-size: 2.2rem;
}

p, li, table {
  font-size: 1.6rem;
  line-height: 1.5;
}

/* || header layout */

div[class="nav"], article, footer, .secondary {
  background-color: green;
}

article, footer, .secondary {
  padding: 10px 30px;
}

article {
  margin-right: 10px;
}

div[class="nav"] {
  height: 50px;
  background-color: ff80ff;
  display: flex;
  padding: 1% 0;
  margin-bottom: 10px;
}

div[class="nav"] ul {
  padding: 0;
  list-style-type: none;
  flex: 2;
  display: flex;
}

div[class="nav"] li {
  display: inline;
  text-align: center;
  flex: 1;
}

div[class="nav"] a {
  display: inline-block;
  font-size: 2rem;
  text-transform: uppercase;
  text-decoration: none;
  color: black;
}

div[class="nav"] .search {
  flex: 1;
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 2em;
}

.search input {
  font-size: 1.6rem;
  height: 32px;
}

.search input[type="search"] {
  flex: 3;
}

.search input[type="submit"] {
  flex: 1;
  margin-left: 1rem;
  background: #333;
  border: 0;
  color: white;
}

/* || main layout */

main {
  display: flex;
}

article {
  flex: 5;
}

.secondary {
  flex: 2;
}

footer {
  margin-top: 10px;
}

/* Table styling */

table {
  width: 100%;
  background-color: #dde;
  border-collapse: collapse;
}

th, td {
  padding: 10px;
}

td {
  text-align: center;
}

th[scope="col"] {
  border-bottom: 1px solid black;
}

tbody tr:nth-child(odd) {
  background-color: #def;
}

/* styling content images and audio */

img, audio {
  display: block;
  margin: 0 auto;
}

audio {
  width: 500px;
}

/* Comments styling */

.comments {
  background-color: #def;
  padding: 10px;
}

.show-hide {
  cursor: pointer;
}

.comments font[size="6"] {
  font-size: 2rem;
}

.comments font[size="6"]:nth-of-type(2) {
  margin-bottom: 0;
}

.comment-form {
  margin-bottom: 3rem;
}

.comment-form .flex-pair {
  display: flex;
  padding: 0 3rem 1rem;
}

.comment-form label {
  align-self: center;
  flex: 2;
  text-align: right;
}

.comment-form input {
  margin-left: 1rem;
  flex: 6;
}

.show-hide {
  text-align: center;
  width: 150px;
}

.comment-form input, .comment-form label, .show-hide {
  font-size: 1.6rem;
  line-height: 32px;
}

.comment-form input[type="submit"], .show-hide {
  background: #333;
  border: 0;
  color: white;
}

.comment-form input[type="submit"] {
  width: 30%;
  display: block;
  margin: 0 auto;
}

.comment-container {
  margin-top: 0;
}

.comment-container li {
  list-style-type: none;
  display: flex;
}

.comment-container li p:nth-child(1) {
  flex: 1;
  font-weight: bold;
}

.comment-container li p:nth-child(2) {
  flex: 5;
}


text:
// functionality for showing/hiding the comments section

const showHideBtn = document.querySelector('.show-hide');
const commentWrapper = document.querySelector('.comment-wrapper');

commentWrapper.style.display = 'none';

showHideBtn.onclick = function() {
  let showHideText = showHideBtn.textContent;
  if(showHideText === 'Show comments') {
    showHideBtn.textContent = 'Hide comments';
    commentWrapper.style.display = 'block';
  } else {
    showHideBtn.textContent = 'Show comments';
    commentWrapper.style.display = 'none';
  }
};

// functionality for adding a new comment via the comments form

const form = document.querySelector('.comment-form');
const nameField = document.querySelector('#name');
const commentField = document.querySelector('#comment');
const list = document.querySelector('.comment-container');

form.onsubmit = function(e) {
  e.preventDefault();
  submitComment();
};

function submitComment() {
  const listItem = document.createElement('li');
  const namePara = document.createElement('p');
  const commentPara = document.createElement('p');
  const nameValue = nameField.value;
  const commentValue = commentField.value;

  namePara.textContent = nameValue;
  commentPara.textContent = commentValue;

  list.appendChild(listItem);
  listItem.appendChild(namePara);
  listItem.appendChild(commentPara);

  nameField.value = '';
  commentField.value = '';
}

repo_name: mdn/learning-area

repo_language: HTML

mime_type: text/plain


text:
<!DOCTYPE html>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">

    <title>Accessibility assessment</title>
    <link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Sonsie+One" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="style.css">

      Welcome to our wildlife website

Home

Our team

Projects

Blog

      <form class="search">
        <input type="search" name="q" placeholder="Search query">
        <input type="submit" value="Go!">
      </form>

        The trouble with Bears

        By Evan Wild

        Tall, lumbering, angry, dangerous. The real live bears of this world are proud, independent creatures, self-serving and always on the hunt for food. Nothing like the bears you see on TV, like Baloo from renowned documentary, The Jungle Book.

        So what are bears really like, and why does the world's media portray them with such a skewed vision? In this article we try to answer those questions, and give you a real insight into the life of the bear.

        Types of bear

        Bears come in two varieties — large and medium. You don't get small bears. If you have seen a small bear, then it was in fact probably a baby bear (cub) from another species.

        Bears can also be classified in terms of their habitat — both large and medium bears are just as at home in urban areas as they are in the countryside. Different habitats encourange different behaviour however, as you'll find out below. The below table also gives you some useful facts about bears.

              Bear Type
              Coat
              Adult size
              Habitat
              Lifespan
              Diet

              Wild
              Brown or black
              1.4 to 2.8 meters
              Woods and forests
              25 to 28 years
              Fish, meat, plants

              Urban
              North Face
              18 to 22
              Condos and coffee shops
              20 to 32 years
              Starbucks, sushi

        Habitats and Eating habits

        Wild bears eat a variety of meat, fish, fruit, nuts, and other natually growing ingredients. In general they will hunt for food themselves in woodland or rivers, but at a push they will track down their sustenance from farms or country houses. They tend to live in relative isolation, in caves, tents, or cottages.

        Urban (gentrified) bears on the other hand have largely abandoned the old ways. They will hunt other urban creatures if necessary (including other predators like rats and foxes), but prefer to scavenge from readily available urban food outlets like dumpsters, bins, and fast food joints. When food has proven scarce, urban bears have even been known to break into people's kitchens and steal essentials like baked beans, ready meals, and microwave ovens.

        Urban bears will sleep anywhere they can, from bus shelters and parks, to the toilets in McDonalds, to their own apartment.

        Mating rituals

        Bears are romantic creatures by nature, and will naturally look for a mate that they can spend the rest of their lives with. They will woo a potential suitor by making their dwelling look attractive — for example with cave paintings or a bed of reeds in the case of a wild bear, and mood lighting and a Michael Bublé CD in the case of an urban bear.

        The following audio clip contains a fact file providing more details about bear mating rituals, along with samples and quotes from experts.

        <audio controls>
          <source src="media/bear.mp3" type="audio/mp3">
          <source src="media/bear.ogg" type="audio/ogg">

It looks like your browser doesn't support HTML5 audio players.

        </audio>

          About the author

          Evan Wild is an unemployed plumber from Doncaster, who has been really "in to" wildlife since childhood. He once went to Chester Zoo on holiday, but got ill after eating a doner kebab.

          He has never seen a bear, but once read a Daily Mail article about them, and thinks they sound cool.

Show comments

            Add comment

            <form class="comment-form">

                Your name:
                <input type="text" name="name" id="name" placeholder="Enter your name">

                Your comment:
                <input type="text" name="comment" id="comment" placeholder="Enter your comment">

                <input type="submit" value="Submit comment">

            </form>

            Comments

Bob Fossil

Oh I am so glad you taught me all about the big brown angry guys in the woods. With their sniffing little noses and their bad attitudes, they can sure be a menace — I was thinking of putting them all in a truck and driving them outta here. I run a zoo, you know.

        Related

The trouble with Bees

The trouble with Otters

The trouble with Penguins

The trouble with Octopi

The trouble with Lemurs

©Copyright 2050 by nobody. All rights reversed.


text:
<!DOCTYPE html>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">

    <title>Accessibility assessment</title>
    <link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Sonsie+One" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="style.css">

Welcome to our wildlife website

Home

Our team

Projects

Blog

      <form class="search">
        <input type="search" name="q" placeholder="Search query" aria-label="Search through site content">
        <input type="submit" value="Go!">
      </form>

The trouble with Bears

By Evan Wild

Tall, lumbering, angry, dangerous. The real live bears of this world are proud, independent creatures, self-serving and always on the hunt for food. Nothing like the bears you see on TV, like Baloo from renowned documentary, The Jungle Book.

So what are bears really like, and why does the world's media portray them with such a skewed vision? In this article we try to answer those questions, and give you a real insight into the life of the bear.

Types of bear

Bears come in two varieties — large and medium. You don't get small bears. If you have seen a small bear, then it was in fact probably a baby bear (cub) from another species.

Bears can also be classified in terms of their habitat — both large and medium bears are just as at home in urban areas as they are in the countryside. Different habitats encourange different behaviour however, as you'll find out below. The below table also gives you some useful facts about bears.

              Bear Type
              Coat
              Adult size
              Habitat
              Lifespan
              Diet

              Wild
              Brown or black
              1.4 to 2.8 meters
              Woods and forests
              25 to 28 years
              Fish, meat, plants

              Urban
              North Face
              18 to 22
              Condos and coffee shops
              20 to 32 years
              Starbucks, sushi

Habitats and Eating habits

Wild bears eat a variety of meat, fish, fruit, nuts, and other natually growing ingredients. In general they will hunt for food themselves in woodland or rivers, but at a push they will track down their sustenance from farms or country houses. They tend to live in relative isolation, in caves, tents, or cottages. The below image shows a big brown wild bear, standing in a river looking for fish to eat.

Urban (gentrified) bears on the other hand have largely abandoned the old ways. They will hunt other urban creatures if necessary (including other predators like rats and foxes), but prefer to scavenge from readily available urban food outlets like dumpsters, bins, and fast food joints. When food has proven scarce, urban bears have even been known to break into people's kitchens and steal essentials like baked beans, ready meals, and microwave ovens. Below you can see an urban polar bear, looking through the railings of his garden while contemplating whether to eat at Nandos or Taco Bell.

Urban bears will sleep anywhere they can, from bus shelters and parks, to the toilets in McDonalds, to their own apartment.

Mating rituals

Bears are romantic creatures by nature, and will naturally look for a mate that they can spend the rest of their lives with. They will woo a potential suitor by making their dwelling look attractive — for example with cave paintings or a bed of reeds in the case of a wild bear, and mood lighting and a Michael Bublé CD in the case of an urban bear.

The following audio clip contains a fact file providing more details about bear mating rituals, along with samples and quotes from experts. You can also access a text transcript of the audio clip.

        <audio controls>
          <source src="media/bear.mp3" type="audio/mp3">
          <source src="media/bear.ogg" type="audio/ogg">

It looks like your browser doesn't support HTML5 audio players. Here is a direct link to the audio file instead.

        </audio>

About the author

Evan Wild is an unemployed plumber from Doncaster, who has been really "in to" wildlife since childhood. He once went to Chester Zoo on holiday, but got ill after eating a doner kebab.

He has never seen a bear, but once read a Daily Mail article about them, and thinks they sound cool.

          <button class="show-hide">Show comments</button>

Add comment

            <form class="comment-form">

                Your name:
                <input type="text" name="name" id="name" placeholder="Enter your name">

                Your comment:
                <input type="text" name="comment" id="comment" placeholder="Enter your comment">

                <input type="submit" value="Submit comment">

            </form>

Comments

Bob Fossil

Oh I am so glad you taught me all about the big brown angry guys in the woods. With their sniffing little noses and their bad attitudes, they can sure be a menace — I was thinking of putting them all in a truck and driving them outta here. I run a zoo, you know.

Related

The trouble with Bees

The trouble with Otters

The trouble with Penguins

The trouble with Octopi

The trouble with Lemurs

©Copyright 2050 by nobody. All rights reversed.


text:
/* || General setup */

html, body {
  margin: 0;
  padding: 0;
}

html {
  font-size: 10px;
  background-color: #dde;
}

body {
  width: 80%;
  min-width: 1024px;
  margin: 0 auto;
}

/* || typography */

h1, h2, h3 {
  font-family: 'Sonsie One', cursive;
  color: #2a2a2a;
}

p, input, li, table, label {
  font-family: 'Open Sans Condensed', sans-serif;
  color: #2a2a2a;
}

h1 {
  font-size: 4rem;
  text-align: center;
  color: white;
  text-shadow: 2px 2px 10px black;
}

h2 {
  font-size: 3rem;
  text-align: center;
}

h3 {
  font-size: 2.2rem;
}

p, li, table {
  font-size: 1.6rem;
  line-height: 1.5;
}

/* || header layout */

nav, article, footer, .secondary {
  background-color: white;
}

article, footer, .secondary {
  padding: 10px 30px;
}

article {
  margin-right: 10px;
}

nav {
  height: 50px;
  display: flex;
  padding: 1% 0;
  margin-bottom: 10px;
}

nav ul {
  padding: 0;
  list-style-type: none;
  flex: 2;
  display: flex;
}

nav li {
  display: inline;
  text-align: center;
  flex: 1;
}

nav a {
  display: inline-block;
  font-size: 2rem;
  text-transform: uppercase;
  text-decoration: none;
  color: black;
}

nav .search {
  flex: 1;
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 2em;
}

.search input {
  font-size: 1.6rem;
  height: 32px;
}

.search input[type="search"] {
  flex: 3;
}

.search input[type="submit"] {
  flex: 1;
  margin-left: 1rem;
  background: #333;
  border: 0;
  color: white;
}

/* || main layout */

main {
  display: flex;
}

article {
  flex: 5;
}

.secondary {
  flex: 2;
}

footer {
  margin-top: 10px;
}

/* Table styling */

table {
  width: 100%;
  background-color: #dde;
  border-collapse: collapse;
}

th, td {
  padding: 10px;
}

td {
  text-align: center;
}

th[scope="col"] {
  border-bottom: 1px solid black;
}

tbody tr:nth-child(odd) {
  background-color: #def;
}

/* styling content images and audio */

img, audio {
  display: block;
  margin: 0 auto;
}

audio {
  width: 500px;
}

/* Comments styling */

.comments {
  background-color: #def;
  padding: 10px;
}

.show-hide {
  cursor: pointer;
}

.comments h2 {
  font-size: 2rem;
}

.comments h2:nth-of-type(2) {
  margin-bottom: 0;
}

.comment-form {
  margin-bottom: 3rem;
}

.comment-form .flex-pair {
  display: flex;
  padding: 0 3rem 1rem;
}

.comment-form label {
  align-self: center;
  flex: 2;
  text-align: right;
}

.comment-form input {
  margin-left: 1rem;
  flex: 6;
}

.comment-form input, .comment-form label, .show-hide {
  font-size: 1.6rem;
  height: 32px;
}

.comment-form input[type="submit"], .show-hide {
  background: #333;
  border: 0;
  color: white;
}

.comment-form input[type="submit"] {
  width: 30%;
  display: block;
  margin: 0 auto;
}

.comment-container {
  margin-top: 0;
}

.comment-container li {
  list-style-type: none;
  display: flex;
}

.comment-container li p:nth-child(1) {
  flex: 1;
  font-weight: bold;
}

.comment-container li p:nth-child(2) {
  flex: 5;
}


text:
# Marking guide for "Accessibility troubleshooting"
The following guide outlines a marking guide for the MDN Learning Area Accessibility Topic — [Accessibility troubleshooting](https://developer.mozilla.org/en-US/docs/Learn/Accessibility/Accessibility_troubleshooting). Each subtask detailed in the assessment is listed below, along with an explanation of how many marks the task is worth, and the mark breakdown.

Note: These are guidelines, not set in stone rules — you are of course free to use your judgement on mark awarding when you meet an edge case, or something that isn't clear cut.

The overall mark awarded is out of 37. Work out their final mark, and then divide by 37 and multiply by 100 to give a percentage mark. For reference, you can find a [finished version of the site](index.html) that would be awarded top marks.

## Color

The text is difficult to read because of the current color scheme. Can you do a test of the current color contrast (text/background), report the results of the test, and then fix it by changing the assigned colors?

Two marks for this — one for checking the current text/background contrast in a checker like WebAIM's [Color Contrast Checker](http://webaim.org/resources/contrastchecker/) and reporting the results in some way, and one for updating the current color scheme to one with good contrast (i.e. passes WCAG AA in the checker).

## Semantic HTML

The content is still not very accessible - report on what happens when you try to navigate it using a screenreader.

One mark; Your report should give some kind of indication that you can't jump between headings and use them as signposts, and you can't even tell where headings and paragraphs start and end.

Can you update the article text to make it easier for screenreader users to navigate?

Eight marks.

The line breaks (<br> tags) all need to be removed (2).

The <font> elements need to be replaced with appropriate heading elements (<h1>, <h2>, <h3>) (2).

The paragraphs need to be wrapped in paragraph elements (<p>)(2).

In the CSS file, font[size="7"]/font[size="6"]/font[size="5"] need to be replaced with h1/h2/h3.

The navigation menu part of the site (wrapped in <div class="nav"></div>) could be made more accessible by putting it in a proper HTML5 semantic element. Which one should it be updated to? Make the update.

Three marks.

The <div class="nav"></div> needs be replaced with <nav></nav>

In the CSS file, instances of div[class="nav"] need to be replaced with nav.

## The images

The images are currently inaccessible to screenreader users. Can you fix this?

Three marks. You can fix this by adding in alternative text in any suitable way; see Text alternatives — describing the image in the text and perhaps also using aria-labelledby to link the two is good. you could also use a plain old alt attribute.

## The audio player

The audio isn't accessible to hearing impaired (deaf) people - can you add some kind of accessible alternative for these users?

Two marks. Any transcript system works for this simple example - a link to a separate file, the transcript written in the same page, etc. They just need to listen to the audio file, write out the transcription, and add it to their page in some way.

The audio isn't accessible to those using older browsers that don't support HTML5 audio. How can you allow them to still access the audio?

Two marks. Adding a link to the audio into the alternative contained inside the <audio> tags is fine, or you could go further and provide some kind of Flash audio player as the alternative content.

## The forms

The input element in the search form at the top could do with a label, but we don't want to add a visible text label that would potentially spoil the design and isn't really needed by sighted users. How can you add a label that is only accessible to screenreaders?

Two marks. You can add a descriptive label into an aria-label attribute on the input element. This will then be read out by screenreaders when the input is encoutered.

The two input elements in the comment form have visible text labels, but they are not unambiguously associated with their labels — how do you achieve this? Note that you'll need to update some of the CSS rule as well.

Four marks. The label text should be wrapped inside <label> elements, with for attributes containing the ID values of the input elements they are the labels for.

## The show/hide comment control

The show/hide comment control button is not current keyboard-accessible. Can you make it keyboard accessible, both in terms of focusing it, and activating it using the return key?

Two marks. This can be managed easily by changing the <div> element that currently marks the button up to a <button> element. Or you could use tabindex and JavaScript to fix the button; see Building keyboard accessibility back in. The former is a much easier method however.

## The table

The data table is not currently very accessible — it is hard for screenreader users to associate data rows and columns together, and the table also has no kind of summary to make it clear what it shows. Can you add some features to your HTML to fix this problem?

Six marks.

They should add a suitable summary of the table in a summary attribute or <caption> element.

They should turn each cell in the first row and column into headings (<th>).

They should add scope="col" to the headings in the first row, and scope="row" to the headings in the first column.

## Other considerations

Can you list two more ideas for improvements that would make the website more accessible?

Two marks for this. Anything reasonable really; the ideas we had are:

Add client-side validation to the comment form

Use media queries to make the site more usable on mobile devices.

Find a way to annouce screenreader users how many comments are displayed when the show comments control button is clicked. For example, put the role attribute with "alert" value on the h2 element in the comments section and update its text like so "Comments (1 available)".


text:
<!DOCTYPE html>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">

    <title>Transcript</title>
    <link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Sonsie+One" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="style.css">

Audio transcript

This isn't really an audio fact file about bears, but it is an audio file that you can transcribe.


text:
<!DOCTYPE html>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0">
    <title>Multi control box drag example</title>


text:
<!DOCTYPE html>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>HTML5 form examples</title>

HTML5 form examples

    <form>

        Choose a browser from this list:
        <input list="browsers" name="myBrowser" id="myBrowser">
        <datalist id="browsers">
          <option value="Chrome">
          <option value="Firefox">
          <option value="Internet Explorer">
          <option value="Opera">
          <option value="Safari">
          <option value="Microsoft Edge">
        </datalist>

        Enter a number:
        <input type="number" name="number" id="number">

        Enter a telephone number:
        <input type="tel" name="tel" id="tel">

        Enter an email address:
        <input type="email" name="email" id="email">

        Enter a time:
        <input type="time" name="time" id="time">

        Enter a date:
        <input type="date" name="date" id="date">

    </form>


text:
<!DOCTYPE html>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Simple box drag example</title>


text:
<!DOCTYPE html>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Common job types example</title>

Common job types form

    <form>

        Job type:
        <select id="job" name="job">
          <option value="">-- select job --</option>
          <option value="butcher">Butcher</option>
          <option value="baker">Baker</option>
          <option value="candle">Candlestick maker</option>
          <option value="other">Other</option>
        </select>

        Other job:
        <input type="text" name="other-job" id="other-job">

    </form>


text:
<!DOCTYPE html>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Simple button example</title>

Simple button example

    <button>Press me!</button>


text:
<!DOCTYPE html>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Form validation example</title>

Form validation example

Fields marked with an asterisk (*) are required.

    <form>

        Enter your name*:
        <input type="text" name="name" id="name" aria-required="true">

        Enter your age*:
        <input type="number" name="age" id="age" placeholder="Enter 1 to 150" aria-required="true">

        <input type="submit">

    </form>


text:
const inputs = document.querySelectorAll('input');
const labels = document.querySelectorAll('label');
const form = document.querySelector('form');

let formItems = [];

const errorField = document.querySelector('.errors');
const errorList = document.querySelector('.errors ul');

let checkbox;
let checkboxLabel;

const hiddenAlert = document.querySelector('.hidden-alert');

for(let i = 0; i < inputs.length-1; i++) {
  if(inputs[i].type !== 'checkbox') {
    let obj = {};
    obj.label = labels[i];
    obj.input = inputs[i];
    formItems.push(obj);
  } else {
    checkbox = inputs[i];
    checkboxLabel = labels[i];
  }
}

errorField.style.left = '-100%';

toggleMusician(false);

form.onsubmit = validate;

function validate(e) {
  errorList.innerHTML = '';
  for(let i = 0; i < formItems.length; i++) {
    let testItem = formItems[i];
    if(testItem.input.value === '' && testItem.input.disabled === false) {
      errorField.style.left = '390px';
      createLink(testItem);
    }
  }

  if(errorList.innerHTML !== '') {
    e.preventDefault();
  }
}

function createLink(testItem) {
  const listItem = document.createElement('li');
  const anchor = document.createElement('a');
  anchor.textContent = testItem.input.name + ' field is empty: fill in your ' + testItem.input.name + '.';
  anchor.href = '#' + testItem.input.name;
  anchor.onclick = function() {
    testItem.input.focus();
  };
  listItem.appendChild(anchor);
  errorList.appendChild(listItem);
}

checkbox.onchange = function() {
  if(checkbox.checked) {
    toggleMusician(true);
  } else {
    toggleMusician(false);
  }
};

function toggleMusician(bool) {
  let instruItem = formItems[formItems.length-1];
  if(bool) {
    instruItem.input.disabled = false;
    instruItem.label.style.color = '#000';
    instruItem.input.setAttribute('aria-disabled', 'false');
    hiddenAlert.textContent = 'Instruments played field now enabled; use it to tell us what you play.';
  } else {
    instruItem.input.disabled = true;
    instruItem.label.style.color = '#999';
    instruItem.input.setAttribute('aria-disabled', 'true');
    hiddenAlert.textContent = 'Instruments played field now disabled.';
  }
}


text:
<!DOCTYPE html>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Form validation example</title>

Form validation example

Fields marked with an asterisk (*) are required.

    <form>

        Enter your name*:
        <input type="text" name="name" id="name" aria-required="true">

        Enter your age*:
        <input type="number" name="age" id="age" placeholder="Enter 1 to 150" aria-required="true">

        Musician:
        <input type="checkbox" name="musician" id="musician">

        Instruments played*:
        <input type="text" name="instruments" id="instruments" aria-required="true">

        <input type="submit">

    </form>


text:
<!DOCTYPE html>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>ARIA div buttons</title>

ARIA div buttons

Click me!

Click me too!

And me!


text:
<!DOCTYPE html>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>ARIA tabbed info box</title>

Tab 1

Tab 2

Tab 3

The first tab

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque turpis nibh, porttitor nec venenatis eu, pulvinar in augue. Vestibulum et orci scelerisque, vulputate tellus quis, lobortis dui. Vivamus varius libero at ipsum mattis efficitur ut nec nisl. Nullam eget tincidunt metus. Donec ultrices, urna maximus consequat aliquet, dui neque eleifend lorem, a auctor libero turpis at sem. Aliquam ut porttitor urna. Nulla facilisi.

The second tab

This tab hasn't got any Lorem Ipsum in it. But the content isn't very exciting all the same.

The third tab

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque turpis nibh, porttitor nec venenatis eu, pulvinar in augue. And now an ordered list: how exciting!

dui neque eleifend lorem, a auctor libero turpis at sem.

Aliquam ut porttitor urna.

Nulla facilisi


text:
<!DOCTYPE html>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">

    <title>Random quotes</title>

Random quote


text:
const inputs = document.querySelectorAll('input');
const labels = document.querySelectorAll('label');
const form = document.querySelector('form');

let formItems = [];

const errorField = document.querySelector('.errors');
const errorList = document.querySelector('.errors ul');

for(let i = 0; i < inputs.length-1; i++) {
  let obj = {};
  obj.label = labels[i];
  obj.input = inputs[i];
  formItems.push(obj);
}

errorField.style.left = '-100%';

form.onsubmit = validate;

function validate(e) {
  errorList.innerHTML = '';
  for(let i = 0; i < formItems.length; i++) {
    let testItem = formItems[i];
    if(testItem.input.value === '') {
      errorField.style.left = '360px';
      createLink(testItem);
    }
  }

  if(errorList.innerHTML !== '') {
    e.preventDefault();
  }
}

function createLink(testItem) {
  const listItem = document.createElement('li');
  const anchor = document.createElement('a');
  anchor.textContent = testItem.input.name + ' field is empty: fill in your ' + testItem.input.name + '.';
  anchor.href = '#' + testItem.input.name;
  anchor.onclick = function() {
    testItem.input.focus();
  };
  listItem.appendChild(anchor);
  errorList.appendChild(listItem);
}


text:
<!DOCTYPE html>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">

    <title>Example website structure</title>
    <link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Sonsie+One" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="style.css">

Header

Home

Our team

Projects

Contact

        <form>
          <input type="search" name="q" placeholder="Search query">
          <input type="submit" value="Go!">
        </form>

Article heading

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Donec a diam lectus. Set sit amet ipsum mauris. Maecenas congue ligula as quam viverra nec consectetur ant hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur.

subsection

Donec ut librero sed accu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aenean ut gravida lorem. Ut turpis felis, pulvinar a semper sed, adipiscing id dolor.

Pelientesque auctor nisi id magna consequat sagittis. Curabitur dapibus, enim sit amet elit pharetra tincidunt feugiat nist imperdiet. Ut convallis libero in urna ultrices accumsan. Donec sed odio eros.

Another subsection

Donec viverra mi quis quam pulvinar at malesuada arcu rhoncus. Cum soclis natoque penatibus et manis dis parturient montes, nascetur ridiculus mus. In rutrum accumsan ultricies. Mauris vitae nisi at sem facilisis semper ac in est.

Vivamus fermentum semper porta. Nunc diam velit, adipscing ut tristique vitae sagittis vel odio. Maecenas convallis ullamcorper ultricied. Curabitur ornare, ligula semper consectetur sagittis, nisi diam iaculis velit, is fringille sem nunc vet mi.

Related

Oh I do like to be beside the seaside

Oh I do like to be beside the sea

Although in the North of England

It never stops raining

Oh well...

©Copyright 2050 by nobody. All rights reversed.


text:
/* || General setup */

html, body {
  margin: 0;
  padding: 0;
}

html {
  font-size: 10px;
  background-color: #a9a9a9;
}

body {
  width: 70%;
  margin: 0 auto;
}

/* || typography */

h1, h2, h3 {
  font-family: 'Sonsie One', cursive;
  color: #2a2a2a;
}

p, input, li {
  font-family: 'Open Sans Condensed', sans-serif;
  color: #2a2a2a;
}

h1 {
  font-size: 4rem;
  text-align: center;
  color: white;
  text-shadow: 2px 2px 10px black;
}

h2 {
  font-size: 3rem;
  text-align: center;
}

h3 {
  font-size: 2.2rem;
}

p, li {
  font-size: 1.6rem;
  line-height: 1.5;
}

/* || header layout */

header {
  margin-bottom: 10px;
}

nav, article, aside, footer {
  background-color: white;
  padding: 1%;
}

nav {
  height: 50px;
  background-color: ff80ff;
  display: flex;
}

nav ul {
  padding: 0;
  list-style-type: none;
  flex: 2;
  display: flex;
}

nav li {
  display: inline;
  text-align: center;
  flex: 1;
}

nav a {
  display: inline-block;
  font-size: 2rem;
  text-transform: uppercase;
  text-decoration: none;
  color: black;
}

nav form {
  flex: 1;
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 2em;
}

input {
  font-size: 1.6rem;
  height: 32px;
}

input[type="search"] {
  flex: 3;
}

input[type="submit"] {
  flex: 1;
  margin-left: 1rem;
  background: #333;
  border: 0;
  color: white;
}

/* || main layout */

main {
  display: flex;
}

article {
  flex: 4;
}

aside {
  flex: 1;
  margin-left: 10px;
  background-color: #ff80ff;
}

aside li {
  padding-bottom: 10px;
}

footer {
  margin-top: 10px;
}


text:
<!DOCTYPE html>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">

    <title>Example website with ARIA roles</title>
    <link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Sonsie+One" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="style.css">

Header

Home

Our team

Projects

Contact

        <form role="search">
          <input type="search" name="q" placeholder="Search query" aria-label="Search through site content">
          <input type="submit" value="Go!">
        </form>

Article heading

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Donec a diam lectus. Set sit amet ipsum mauris. Maecenas congue ligula as quam viverra nec consectetur ant hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur.

subsection

Donec ut librero sed accu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aenean ut gravida lorem. Ut turpis felis, pulvinar a semper sed, adipiscing id dolor.

Pelientesque auctor nisi id magna consequat sagittis. Curabitur dapibus, enim sit amet elit pharetra tincidunt feugiat nist imperdiet. Ut convallis libero in urna ultrices accumsan. Donec sed odio eros.

Another subsection

Donec viverra mi quis quam pulvinar at malesuada arcu rhoncus. Cum soclis natoque penatibus et manis dis parturient montes, nascetur ridiculus mus. In rutrum accumsan ultricies. Mauris vitae nisi at sem facilisis semper ac in est.

Vivamus fermentum semper porta. Nunc diam velit, adipscing ut tristique vitae sagittis vel odio. Maecenas convallis ullamcorper ultricied. Curabitur ornare, ligula semper consectetur sagittis, nisi diam iaculis velit, is fringille sem nunc vet mi.

Related

Oh I do like to be beside the seaside

Oh I do like to be beside the sea

Although in the North of England

It never stops raining

Oh well...

©Copyright 2050 by nobody. All rights reversed.


text:
<!DOCTYPE html>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>St Huxley's Community College</title>
    <link href="style.css" type="text/css" rel="stylesheet">

St Huxley's Community College

Brave new world

It's a brave new world out there. Our children are being put in increasing more competitive situations, both during recreation, and as they start to move into the adult world of examinations, jobs, careers, and other life choices. Having the wrong mindset, becoming too emotional, or making the wrong choices can contribute to them experiencing difficulty in taking their rightful place in today's ideal society.

As concerned parents, guardians or carers, you will no doubt want to give your children the best possible start in life — and you've come to the right place.

The best start in life

At St. Huxley's, we pride ourselves in not only giving our students a top quality education, but also giving them the societal and emotional intelligence they need to win big in the coming utopia. We not only excel at subjects such as genetics, data mining, and chemistry, but we also include compulsory lessons in:

Emotional control

Judgement

Assertion

Focus and resolve

If you are interested, then you next steps will likely be to:

Call us for more information

Ask for a brochure, which includes signup form

Book a visit!

Top course choices

Genetic engineering

Genetic mutation

Organic Chemistry

Pharmaceuticals

Biochemistry with behaviour

Pure biochemistry

Data mining

Computer security

Bioinformatics

Cybernetics

See more

Home

Finding us

Courses

Staff

Media

Prospectus

© 2016 St Huxley's Community College


text:
/* General setup */

* {
  box-sizing: border-box;
}

body {
  margin: 0 auto;
  min-width: 1000px;
  max-width: 1400px;
}

/* Layout */

section {
  float: left;
  width: 50%;
}

aside {
  float: left;
  width: 30%;
}

nav {
  float: left;
  width: 20%;
}

footer {
  clear: both;
}

header, section, aside, nav, footer {
  padding: 20px;
}

/* header and footer */

header, footer {
  border-top: 5px solid #a66;
  border-bottom: 5px solid #a66;
}

/* WRITE YOUR CODE BELOW HERE */

/* font imports */

/*

Lovato light font obtained from fontspring.com,
originally created by Philatype
See https://www.fontspring.com/fonts/philatype/lovato

Josefin slab bold obtained from fontsquirrel.com,
originally created by Typemade
See https://www.fontsquirrel.com/fonts/josefin-slab

*/

@font-face {
    font-family: 'lovatolight';
    src: url('fonts/Lovato-Light-webfont.eot');
    src: url('fonts/Lovato-Light-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/Lovato-Light-webfont.woff2') format('woff2'),
         url('fonts/Lovato-Light-webfont.woff') format('woff'),
         url('fonts/Lovato-Light-webfont.ttf') format('truetype'),
         url('fonts/Lovato-Light-webfont.svg#lovatolight') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'josefin_slabbold';
    src: url('fonts/josefinslab-bold-webfont.eot');
    src: url('fonts/josefinslab-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/josefinslab-bold-webfont.woff2') format('woff2'),
         url('fonts/josefinslab-bold-webfont.woff') format('woff'),
         url('fonts/josefinslab-bold-webfont.ttf') format('truetype'),
         url('fonts/josefinslab-bold-webfont.svg#josefin_slabbold') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* typography stuff */

html {
  font-family: lovatolight, serif;
  font-size: 10px;
}

h1, h2 {
  font-family: josefin_slabbold, sans-serif;
  letter-spacing: 2px;
}

h1 {
  font-size: 5rem;
  text-align: center;
}

h2 {
  font-size: 3.2rem;
}

section h2 + p {
  text-indent: 20px;
}

p, li {
  font-size: 1.6rem;
  line-height: 1.5;
  letter-spacing: 0.5px;
  word-spacing: 3px;
}

/* Link styling */

a {
  outline: none;
}

a[href*="http"] {
  padding-right: 19px;
  background: url(external-link-52.png) no-repeat 100% 0;
  background-size: 16px 16px;
}

a:link, a:visited {
  color: #a66;
}

a:focus, a:hover {
  text-decoration: none;
}

a:active {
  color: transparent;
  text-shadow: 0px 0px 1px #f00,
               0px 0px 2px #f00,
               0px 0px 3px black,
               0px 0px 4px black;
}

/* lists: extra margin top and bottom to make it
always have the same spacing as with paragraphs */

ul, ol {
  margin: 1.6rem 0;
}

ul {
  list-style-type: square;
}

ol {
  list-style-type: lower-latin;
}

/* nav menu */

nav ul {
  padding-left: 0;
  margin-top: 0.8rem;
}

nav li {
  list-style-type: none;
  margin-bottom: 2rem;
}

nav li a {
  text-decoration: none;
  display: inline-block;
  width: 100%;
  line-height: 3;
  text-align: center;
  font-size: 2.5rem;
  border: 1px solid #a66;
}

nav li a:focus, nav li a:hover {
  color: white;
  background: #a66;
}

nav li a:active {
  color: white;
  background: black;
}


text:
# Marking guide for "Typesetting a community school homepage"

The following guide outlines a marking guide for the MDN Learning Area HTML Topic — [Typesetting a community school homepage](https://developer.mozilla.org/en-US/Learn/CSS/Introduction_to_CSS/Fundamental_CSS_comprehension). Each subtask detailed in the assessment is listed below, along with an explanation of how many marks the task is worth, and the mark breakdown.

Note: These are guidelines, not set in stone rules — you are of course free to use your judgement on mark awarding when you meet an edge case, or something that isn't clear cut.

The overall mark awarded is out of 40. Work out their final mark, and then divide by 40 and multiply by 100 to give a percentage mark. For reference, you can find a [finished typeset homepage](index.html) that would be awarded top marks.

## Fonts

"download a couple of free-to-use fonts" (3 marks)

the student will get one mark for the suitability of each of the two fonts (the description in the question says "the fonts should be chosen to give the page a fairly serious, formal, trustworthy feel — a serif side-wide font for the general text body, coupled with sans-serif or slab serif for the headings might be nice.") and one mark for the fonts being ok to use.

"Use a suitable service to generate bulletproof @font-face code" (2 marks)

The student will get the marks by using a service like fontsquirrel's generator to create bulletproof @font-face code. You can check it against the example linked above. If it is not cross-browser, or fails to apply the fonts, then they get no marks.

"Apply your body font to the whole page, and your heading font to your headings." (3 marks)

The body font should be applied to the <html> element, and the heading font should be applied only to <h1> and <h2>. One mark for each. Also, one bonus mark for providing something of a fallback for each in a font stack, and not just a single font.

## General text styling

"Give the page a site-wide font-size of 10px" (1 mark)

font-size: 10px; should be applied to the <html> element.

"Give your headings and other element types appropriate font-sizes defined using a suitable relative unit." (3 marks)

Award between 0 and 2 marks for the sizing, depending on how well thought out it looks. Also award one mark if a sensible relative unit such as em or rem is used.

"Give your body text a suitable line-height." (1 mark)

Between about 1.4 and 1.6 is ideal, and will get the mark.

"Center your top level heading on the page." (1 mark)

Setting text-align: center; on the h1 will get the mark. Flexbox would also do. Anything else is probably too convoluted to get the mark.

"Give your headings a little bit of letter-spacing..." (1 mark)

Generally something small like 1 or 2 pixels (0.1 or 0.2 rem) will work ok, depending on the font.

"Give your body text some letter-spacing and word-spacing, as appropriate." (1 mark)

About 0.5 or 1 pixel of letter spacing and about 3px of word spacing will look ok to help the text breathe a bit, depending on the font.

"Give the first paragraph after each heading in the <section> a little bit of text-indentation, say 20px." (2 marks)

A good little test of selector and background knowledge. The selector should be h2 + p, and the declaration used should be text-indent: 20px;. One mark for each.

## Links

"Give the link, visited, focus, and hover states some colors that go with the color of the horizontal bars at the top and bottom of the page." (3 marks)

The link state rules should be laid out in the proper order of a, a:link, a:visited, a:focus, a:hover, and a:active to get the first mark. For the second mark, make the link and visited states have a color that goes with the page. For the third mark, make the focus AND hover states have a different color, or you could even just give them the same color, because of the next instruction. It is acceptable for link and visited to have the same styling, and focus and hover.

"Make it so that links are underlined by default, but when you hover or focus them, the underline disappears." (2 marks)

The links will have text-decoration: underline set by default. You could just set text-decoration: none; on the focus and hover states. The method of using border-bottom is also acceptable.

"Remove the default focus outline from ALL the links on the page." (1 mark)

You just need to set outline: none on all links (a).

"Give the active state a noticeably different styling so it stands out nicely, but make it still fit in with the overall page design." (2 marks)

they can get one mark for something totally crazy that stands out, or two marks for something tasteful that stands out.

"Make it so that external links have the external link icon inserted next to them." (4 marks)

This is worth four marks because it is fairly complex. They can get a mark each for:

Using asuitable attribute selector that only selects links containing "http" in their href attribute.

Including some padding to make way for the link to be displayed.

Including the correct background-* properties or background shorthand to place the background image, and to make it not repeat.

Including the background-size property to resize the icon to something appropriate dynamically, OR resizing it in an image editor to an appropriate size.

## Lists

"Make sure the spacing of your lists and list items works well with the styling of the overall page." (1 mark)

This will basically work ok anyway, but one bonus mark is being awarded for students that set 16px (1.6rem) for the top and bottom margins of <ul> and <ol>. This is to make sure the spacing will always be correct, even if two lists were to be placed next to one another.

"Give your list items a nice bullet, appropriate for the design of the page. It is up to you whether you choose a custom bullet image or something else." (1 mark)

This is really up to the student: they can give <ul> and <ol> a simple list-style-type or something a bit more interesting; whatever they feel like.

## Navigation menu

"Style your navigation menu so that it has an appropriate look for the look and feel for the page." (8 marks)

The mark award for this one question is quite high, because it is fairly complex and has multiple parts. Ideally, they should:

Start every selector with nav to make sure only the nav menu is affected.

Set the left padding on the <ul> to 0.

Set some top margin on the <ul> to bring the text of the top bullet in line with the headings on the other columns, and some bottom margin on the <li>s to space the menu items out a bit.

Set list-style-type: none; on the <li> to get rid of the bullets.

Make the links sizeable by setting them to display: inline-block.

Give the links appropriate styling to make them look nice and fit in with the style of the page. This could include center aligned text, line height, larger font size, color, border, whatever, as long as it looks ok.

Give the focus and hover states different styling so the nav menu responds when interacted with.

Give the active state a different style again, so it is obvious when a link becomes activated.


text:
The Fontspring Webfont End User License Agreement
Version 1.6.0 - March 13, 2014

By downloading, installing and/or embedding font software (“Webfont”) offered by Fontspring or its distributors, you (“Licensee”) agree to be bound by the following terms and conditions of this End User Licensing Agreement (“EULA”):

1. Right Granted
Fontspring grants Licensee a perpetual, worldwide, non-exclusive and non-transferrable license to link the Webfont to Websites using the @font-face selector in CSS files.

2. Requirements and Restrictions
Licensee agrees to abide by the following requirements and restrictions:
a. Licensee must use the Webfont provided by Fontspring under this EULA. Licensee may not  link to the full, CFF OpenType or TrueType font designed for desktop installation.
b. Licensee must include the entire commented header in the provided CSS file.
c. The total traffic of the Website(s), measured in pageviews per month, may be no greater than the number of pageviews specified in the Receipt.
d. Licensee may only install the Webfont on Websites that it owns or controls.
e. Licensee may embed Webfont in reports generated by the Website(s), provided that Licensee does not sell the reports for profit.

3. Provision to Third Parties
Licensee may temporarily provide the Webfont to a website developer, agent or independent contractor, who is working on behalf of the Licensee, ONLY IF the developer, agent or independent contractor (1) agrees in writing to use the Font exclusively for Licensee’s work, according to the terms of this EULA, and (2) retains no copies of the Font upon completion of the work.

Licensee may not otherwise distribute the Webfont to third parties or make the Webfont publicly accessible or available except by embedding or linking in accordance with this EULA.

4. Term
This EULA grants a perpetual license for the rights set forth in Paragraph 1 unless and until the EULA terminates under Paragraph 8.  Fontspring will not charge additional fees post purchase, annually or otherwise.

5. Other Usage
Licenses for desktop use, computer applications and games, installable interactive books, software, mobile applications and games, Ebooks and Epubs, product creation websites, website template distribution, website templates, and other uses not allowed by this EULA may be available for an additional fee. Contact Fontspring at support@fontspring.com for more information.

6. Modifications
Licensee may not modify the Webfont or create derivative works based upon the Webfont without prior written consent from Fontspring or the owning foundry EXCEPT THAT Licensee may generate files necessary for embedding or linking in accordance with this EULA.

7. Copyright
The Webfont is protected by copyright law.   The Foundry is the sole, exclusive owner of all intellectual property rights, including rights under copyright and trademark law.  Licensee agrees not to use the Webfont in any manner that infringes the intellectual property rights of the Foundry or violates the terms of this EULA.  Licensee will be held legally responsible, and indemnifies Fontspring, for any infringements on the foundry's rights caused by failure to abide by the terms of this EULA.

8. Termination
This EULA is effective until terminated. If Licensee fails to comply with any term of this EULA, Fontspring may terminate the EULA with 30 days notice.  This EULA will terminate automatically 30 days after the issuance of such notice.

9. Disclaimer and Limited Warranty
Fontspring warrants the Product to be free from defects in materials and workmanship under normal use for a period of twenty one (21) days from the date of delivery as shown on Receipt. Fontspring's entire liability, and Licensee’s exclusive remedy, for a defective product shall be, at Fontspring's election, either (1) return of purchase price or (2) replacement of any such product that is returned to Fontspring with a copy of the Receipt. Fontspring shall have no responsibility to replace the product or refund the purchase price if failure results from accident, abuse or misapplication, or if any product is lost or damaged due to theft, fire, or negligence. Any replacement product will be warranted for twenty one (21) days. This warranty gives Licensee specific legal rights. Licensee may have other rights, which vary from state to state.

EXCEPT AS EXPRESSLY PROVIDED ABOVE, THE PRODUCT, IS PROVIDED “AS IS”. FONTSPRING MAKES NO WARRANTY OF ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING, BUT NOT LIMITED TO THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE.

The entire risk as to the quality and performance of the Product rests upon Licensee. Neither Fontspring nor the Foundry warrants that the functions contained in the Product will meet Licensee’s requirements or that the operation of the software will be uninterrupted or error free.

FONTSPRING SHALL NOT BE LIABLE FOR ANY DIRECT, INDIRECT, CONSEQUENTIAL, OR INCIDENTAL DAMAGES (INCLUDING DAMAGES FROM LOSS OF BUSINESS PROFITS, BUSINESS INTERRUPTION, LOSS OF BUSINESS INFORMATION, AND THE LIKE) ARISING OUT OF THE USE OF OR INABILITY TO USE THE PRODUCT EVEN IF FONTSPRING OR THE FOUNDRY HAS BEEN ADVISED OF THE POSSIBILITY OF SUCH DAMAGES.

Because some states do not allow the exclusion or limitation of liability for consequential or incidental damages, the above limitation may not apply to Licensee.

10. Governing Law
This EULA is governed by the laws of the United States of America and the State of Delaware.

11.  Entire Agreement
This EULA, in conjunction with the receipt (“Receipt”) that accompanies each Font licensed from Fontspring or its distributors, constitutes the entire agreement between Fontspring and Licensee.

12.  Modification
The Parties may modify or amend this EULA in writing.

13. Waiver. The waiver of one breach or default hereunder shall not constitute the waiver of any subsequent breach or default.


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

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

	<link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" />

<title>How to Use Webfonts</title>

		Fontspring

Installing Webfonts

Webfonts are supported by all major browser platforms but not all in the same way. There are currently four different font formats that must be included in order to target all browsers. This includes TTF, WOFF, EOT and SVG.

1. Upload your webfonts

You must upload your webfont kit to your website. They should be in or near the same directory as your CSS files.

2. Include the webfont stylesheet

A special CSS @font-face declaration helps the various browsers select the appropriate font it needs without causing you a bunch of headaches. Learn more about this syntax by reading the Fontspring blog post about it. The code for it is as follows:

@font-face{
	font-family: 'MyWebFont';
	src: url('WebFont.eot');
	src: url('WebFont.eot?#iefix') format('embedded-opentype'),
	     url('WebFont.woff') format('woff'),
	     url('WebFont.ttf') format('truetype'),
	     url('WebFont.svg#webfont') format('svg');
}

We've already gone ahead and generated the code for you. All you have to do is link to the stylesheet in your HTML, like this:

	<link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" />

3. Modify your own stylesheet

To take advantage of your new fonts, you must tell your stylesheet to use them. Look at the original @font-face declaration above and find the property called "font-family." The name linked there will be what you use to reference the font. Prepend that webfont name to the font stack in the "font-family" property, inside the selector you want to change. For example:

p { font-family: 'MyWebFont', Arial, sans-serif; }

4. Test

Getting webfonts to work cross-browser can be tricky. Use the information in the sidebar to help you if you find that fonts aren't loading in a particular browser.

Troubleshooting
Font-Face Problems

Having trouble getting your webfonts to load in your new website? Here are some tips to sort out what might be the problem.

Fonts not showing in any browser

This sounds like you need to work on the plumbing. You either did not upload the fonts to the correct directory, or you did not link the fonts properly in the CSS. If you've confirmed that all this is correct and you still have a problem, take a look at your .htaccess file and see if requests are getting intercepted.

Fonts not loading in iPhone or iPad

The most common problem here is that you are serving the fonts from an IIS server. IIS refuses to serve files that have unknown MIME types. If that is the case, you must set the MIME type for SVG to "image/svg+xml" in the server settings. Follow these instructions from Microsoft if you need help.

Fonts not loading in Firefox

The primary reason for this failure? You are still using a version Firefox older than 3.5. So upgrade already! If that isn't it, then you are very likely serving fonts from a different domain. Firefox requires that all font assets be served from the same domain. Lastly it is possible that you need to add WOFF to your list of MIME types (if you are serving via IIS.)

Fonts not loading in IE

Are you looking at Internet Explorer on an actual Windows machine or are you cheating by using a service like Adobe BrowserLab? Many of these screenshot services do not render @font-face for IE. Best to test it on a real machine.

Fonts not loading in IE9

IE9, like Firefox, requires that fonts be served from the same domain as the website. Make sure that is the case.


text:
/*
 * Web Fonts from fontspring.com
 *
 * All OpenType features and all extended glyphs have been removed.
 * Fully installable fonts can be purchased at http://www.fontspring.com
 *
 * The fonts included in this stylesheet are subject to the End User License you purchased
 * from Fontspring. The fonts are protected under domestic and international trademark and
 * copyright law. You are prohibited from modifying, reverse engineering, duplicating, or
 * distributing this font software.
 *
 * (c) 2010-2015 Fontspring
 *
 *
 *
 *
 * The fonts included are copyrighted by the vendor listed below.
 *
 * Vendor:      Philatype
 * License URL: http://www.fontspring.com/licenses/philatype/webfont
 *
 *
 */

@font-face {
    font-family: 'lovatolight';
    src: url('Lovato-Light-webfont.eot');
    src: url('Lovato-Light-webfont.eot?#iefix') format('embedded-opentype'),
         url('Lovato-Light-webfont.woff2') format('woff2'),
         url('Lovato-Light-webfont.woff') format('woff'),
         url('Lovato-Light-webfont.ttf') format('truetype'),
         url('Lovato-Light-webfont.svg#lovatolight') format('svg');
    font-weight: normal;
    font-style: normal;

}


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

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

	<link rel="stylesheet" href="specimen_files/specimen_stylesheet.css" type="text/css" charset="utf-8" />
	<link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" />

<title>Lovato Light Specimen</title>

		Lovato Light

Specimen

Sample Layout

Glyphs & Languages

Installing Webfonts

AaBb

ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890&.,?!@()#$%*+-=:;

10	abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ

11	abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ

12	abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ

13	abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ

14	abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ

16	abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ

18	abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ

20	abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ

24	abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ

30	abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ

36	abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ

48	abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ

60	abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ

72	abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ

90	abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ

body

body

body

body

											bodyLovato Light

											bodyArial

											bodyVerdana

											bodyGeorgia

10.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

11.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

12.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

13.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

14.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

16.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

18.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

20.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

24.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

30.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

10.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

11.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

12.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

13.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

14.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

16.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

18.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

20.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

24.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

30.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

Lorem Ipsum Dolor

Etiam porta sem malesuada magna mollis euismod

By Aenean Lacinia

Donec sed odio dui. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

Pellentesque ornare sem

Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas faucibus mollis interdum. Donec ullamcorper nulla non metus auctor fringilla. Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam id dolor id nibh ultricies vehicula ut id elit.

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean lacinia bibendum nulla sed consectetur.

Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec ullamcorper nulla non metus auctor fringilla.

Cras mattis consectetur

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Aenean lacinia bibendum nulla sed consectetur. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cras mattis consectetur purus sit amet fermentum.

Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam quis risus eget urna mollis ornare vel eu leo. Cras mattis consectetur purus sit amet fermentum.

Nullam quis risus eget urna mollis ornare vel eu leo. Donec ullamcorper nulla non metus auctor fringilla. Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Maecenas sed diam eget risus varius.

Vestibulum id ligula porta felis euismod semper. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Vestibulum id ligula porta felis euismod semper. Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean lacinia bibendum nulla sed consectetur. Nullam quis risus eget urna mollis ornare vel eu leo.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec ullamcorper nulla non metus auctor fringilla. Maecenas faucibus mollis interdum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

Language Support

The subset of Lovato Light in this kit supports the following languages:

					Albanian, Alsatian, Aragonese, Arapaho, Aromanian, Arrernte, Asturian, Aymara, Basque, Belarusian (Lacinka), Bislama, Bosnian, Breton, Catalan, Cebuano, Chamorro, Cheyenne, Chichewa (Nyanja), Cimbrian, Corsican, Croatian, Czech, Danish, Dutch, English, Estonian, Faroese, Fijian, Finnish, French, French Creole (Saint Lucia), Frisian, Friulian, Galician, Genoese, German, Gilbertese (Kiribati), Greenlandic, Haitian Creole, Hawaiian, Hiligaynon, Hmong, Hopi, Hungarian, Ibanag, Iloko (Ilokano), Indonesian, Interglossa (Glosa), Interlingua, Irish (Gaelic), Islandic, Istro-Romanian, Italian, Jèrriais, Kashubian, Kurdish (Kurmanji), Ladin, Latin Basic, Latvian, Lithuanian, Lojban, Lombard, Low Saxon, Luxembourgian, Malagasy, Malay (Latinized), Maltese, Manx, Maori, Megleno-Romanian, Mohawk, Nahuatl, Norfolk/Pitcairnese, Northern Sotho (Pedi), Norwegian, Occitan, Oromo, Pangasinan, Papiamento, Piedmontese, Polish, Portuguese, Potawatomi, Rhaeto-Romance, Romanian, Romansh (Rumantsch), Rotokas, Sami (Inari), Sami (Lule), Samoan, Sardinian (Sardu), Scots (Gaelic), Serbian, Seychellois Creole (Seselwa), Shona, Sicilian, Slovak, Slovenian (Slovene), Somali, Southern Ndebele, Southern Sotho (Sesotho), Spanish, Swahili, Swati/Swazi, Swedish, Tagalog (Filipino/Pilipino), Tahitian, Tausug, Tetum (Tetun), Tok Pisin, Tongan (Faka-Tonga), Tswana, Turkish, Turkmen, Turkmen (Latinized), Tuvaluan, ubasic, Uyghur (Latinized), Veps, Volapük, Votic (Latinized), Walloon, Warlpiri, Welsh, Xhosa, Yapese, Zulu

Glyph Chart

The subset of Lovato Light in this kit includes all the glyphs listed below. Unicode entities are included above each glyph to help you insert individual characters into your layout.

Installing Webfonts

Webfonts are supported by all major browser platforms but not all in the same way. There are currently four different font formats that must be included in order to target all browsers. This includes TTF, WOFF, EOT and SVG.

1. Upload your webfonts

You must upload your webfont kit to your website. They should be in or near the same directory as your CSS files.

2. Include the webfont stylesheet

A special CSS @font-face declaration helps the various browsers select the appropriate font it needs without causing you a bunch of headaches. Learn more about this syntax by reading the Fontspring blog post about it. The code for it is as follows:

@font-face{
	font-family: 'MyWebFont';
	src: url('WebFont.eot');
	src: url('WebFont.eot?#iefix') format('embedded-opentype'),
	     url('WebFont.woff') format('woff'),
	     url('WebFont.ttf') format('truetype'),
	     url('WebFont.svg#webfont') format('svg');
}

We've already gone ahead and generated the code for you. All you have to do is link to the stylesheet in your HTML, like this:

	<link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" />

3. Modify your own stylesheet

To take advantage of your new fonts, you must tell your stylesheet to use them. Look at the original @font-face declaration above and find the property called "font-family." The name linked there will be what you use to reference the font. Prepend that webfont name to the font stack in the "font-family" property, inside the selector you want to change. For example:

p { font-family: 'MyWebFont', Arial, sans-serif; }

4. Test

Getting webfonts to work cross-browser can be tricky. Use the information in the sidebar to help you if you find that fonts aren't loading in a particular browser.

Troubleshooting
Font-Face Problems

Having trouble getting your webfonts to load in your new website? Here are some tips to sort out what might be the problem.

Fonts not showing in any browser

This sounds like you need to work on the plumbing. You either did not upload the fonts to the correct directory, or you did not link the fonts properly in the CSS. If you've confirmed that all this is correct and you still have a problem, take a look at your .htaccess file and see if requests are getting intercepted.

Fonts not loading in iPhone or iPad

The most common problem here is that you are serving the fonts from an IIS server. IIS refuses to serve files that have unknown MIME types. If that is the case, you must set the MIME type for SVG to "image/svg+xml" in the server settings. Follow these instructions from Microsoft if you need help.

Fonts not loading in Firefox

The primary reason for this failure? You are still using a version Firefox older than 3.5. So upgrade already! If that isn't it, then you are very likely serving fonts from a different domain. Firefox requires that all font assets be served from the same domain. Lastly it is possible that you need to add WOFF to your list of MIME types (if you are serving via IIS.)

Fonts not loading in IE

Are you looking at Internet Explorer on an actual Windows machine or are you cheating by using a service like Adobe BrowserLab? Many of these screenshot services do not render @font-face for IE. Best to test it on a real machine.

Fonts not loading in IE9

IE9, like Firefox, requires that fonts be served from the same domain as the website. Make sure that is the case.

©2010-2013 Font Squirrel. All rights reserved.


text:
(function($){$.fn.easyTabs=function(option){var param=jQuery.extend({fadeSpeed:"fast",defaultContent:1,activeClass:'active'},option);$(this).each(function(){var thisId="#"+this.id;if(param.defaultContent==''){param.defaultContent=1;}
if(typeof param.defaultContent=="number")
{var defaultTab=$(thisId+" .tabs li:eq("+(param.defaultContent-1)+") a").attr('href').substr(1);}else{var defaultTab=param.defaultContent;}
$(thisId+" .tabs li a").each(function(){var tabToHide=$(this).attr('href').substr(1);$("#"+tabToHide).addClass('easytabs-tab-content');});hideAll();changeContent(defaultTab);function hideAll(){$(thisId+" .easytabs-tab-content").hide();}
function changeContent(tabId){hideAll();$(thisId+" .tabs li").removeClass(param.activeClass);$(thisId+" .tabs li a[href=#"+tabId+"]").closest('li').addClass(param.activeClass);if(param.fadeSpeed!="none")
{$(thisId+" #"+tabId).fadeIn(param.fadeSpeed);}else{$(thisId+" #"+tabId).show();}}
$(thisId+" .tabs li").click(function(){var tabId=$(this).find('a').attr('href').substr(1);changeContent(tabId);return false;});});}})(jQuery);


text:
@import url('grid_12-825-55-15.css');

/*
	CSS Reset by Eric Meyer - Released under Public Domain
    http://meyerweb.com/eric/tools/css/reset/
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table,
caption, tbody, tfoot, thead, tr, th, td
                  {margin: 0;padding: 0;border: 0;outline: 0;
                  font-size: 100%;vertical-align: baseline;
                  background: transparent;}
body              {line-height: 1;}
ol, ul            {list-style: none;}
blockquote, q     {quotes: none;}
blockquote:before, blockquote:after,
q:before, q:after {content: '';	content: none;}
:focus            {outline: 0;}
ins               {text-decoration: none;}
del               {text-decoration: line-through;}
table             {border-collapse: collapse;border-spacing: 0;}

body {
	color: #000;
	background-color: #dcdcdc;
}

a {
	text-decoration: none;
	color: #1883ba;
}

h1{
	font-size: 32px;
	font-weight: normal;
	font-style: normal;
	margin-bottom: 18px;
}

h2{
	font-size: 18px;
}

#container {
	width: 865px;
	margin: 0px auto;
}

#header {
	padding: 20px;
	font-size: 36px;
	background-color: #000;
	color: #fff;
}

#header span {
	color: #666;
}
#main_content {
	background-color: #fff;
	padding: 60px 20px 20px;
}

#footer p {
	margin: 0;
	padding-top: 10px;
	padding-bottom: 50px;
	color: #333;
	font: 10px Arial, sans-serif;
}

.tabs {
	width: 100%;
	height: 31px;
	background-color: #444;
}
.tabs li {
	float:  left;
	margin: 0;
	overflow: hidden;
	background-color: #444;
}
.tabs li a {
	display: block;
	color: #fff;
	text-decoration: none;
	font: bold 11px/11px 'Arial';
	text-transform: uppercase;
	padding: 10px 15px;
	border-right: 1px solid #fff;
}

.tabs li a:hover {
		background-color: #00b3ff;

}

.tabs li.active a {
	color:  #000;
	background-color: #fff;
}

div.huge {

	font-size: 300px;
	line-height: 1em;
	padding: 0;
	letter-spacing: -.02em;
	overflow: hidden;
}
div.glyph_range {
	font-size: 72px;
	line-height: 1.1em;
}

.size10{ font-size: 10px; }
.size11{ font-size: 11px; }
.size12{ font-size: 12px; }
.size13{ font-size: 13px; }
.size14{ font-size: 14px; }
.size16{ font-size: 16px; }
.size18{ font-size: 18px; }
.size20{ font-size: 20px; }
.size24{ font-size: 24px; }
.size30{ font-size: 30px; }
.size36{ font-size: 36px; }
.size48{ font-size: 48px; }
.size60{ font-size: 60px; }
.size72{ font-size: 72px; }
.size90{ font-size: 90px; }

.psample_row1 {	height: 120px;}
.psample_row1 {	height: 120px;}
.psample_row2 {	height: 160px;}
.psample_row3 {	height: 160px;}
.psample_row4 {	height: 160px;}

.psample {
	overflow: hidden;
	position: relative;
}
.psample p {
	line-height: 1.3em;
	display: block;
	overflow: hidden;
	margin: 0;
}

.psample span {
	margin-right: .5em;
}

.white_blend {
	width: 100%;
	height: 61px;
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAVkAAAA9CAYAAAAH4BojAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAO1JREFUeNrs3TsKgFAMRUE/eer+NxztxMYuEWQG3ECKwwUF58ycAKixOAGAyAKILAAiCyCyACILgMgCiCyAyAIgsgAiCyCyAIgsgMgCiCwAIgsgsgAiC4DIAogsACIL0CWuZ3UGgLrIhjMA1EV2OAOAJQtgyQLwjOzmDAAiCyCyAIgsQFtkd2cAEFkAkQVAZAHaIns4A4AlC2DJAiCyACILILIAiCzAV5H1dQGAJQsgsgCILIDIAvwisl58AViyAJYsACILILIAIgvAe2T9EhxAZAFEFgCRBeiL7HAGgLrIhjMAWLIAliwAt1OAAQDwygTBulLIlQAAAABJRU5ErkJggg==);
	position: absolute;
	bottom: 0;
}
.black_blend {
	width: 100%;
	height: 61px;
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAVkAAAA9CAYAAAAH4BojAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAPJJREFUeNrs3TEKhTAQRVGjibr/9QoxhY2N3Ywo50A28IrLwP9g6b1PAMSYTQAgsgAiC4DIAogsgMgCILIAIgsgsgCILIDIAogsACILILIAIguAyAKILIDIAiCyACILgMgCZCnjLWYAiFGvB0BQZJsZAFyyAC5ZAO6RXc0AILIAIguAyAKkRXYzA4DIAogsACILkBbZ3QwALlkAlywAIgsgsgAiC4DIArwVWf8uAHDJAogsACILILIAv4isH74AXLIALlkARBZAZAFEFoDnyPokOIDIAogsACILkBfZZgaAuMhWMwC4ZAE+p4x3mAEgxinAAJ+XBbPWGkwAAAAAAElFTkSuQmCC);
	position: absolute;
	bottom: 0;
}
.fullreverse {
	background:  #000 !important;
	color:  #fff !important;
	margin-left: -20px;
	padding-left: 20px;
	margin-right: -20px;
	padding-right: 20px;
	padding: 20px;
	margin-bottom:0;
}

.sample_table td {
	padding-top: 3px;
	padding-bottom:5px;
	padding-left: 5px;
	vertical-align: middle;
	line-height: 1.2em;
}

.sample_table td:first-child {
	background-color: #eee;
	text-align: right;
	padding-right: 5px;
	padding-left: 0;
	padding: 5px;
	font: 11px/12px "Courier New", Courier, mono;
}

code {
	white-space: pre;
	background-color: #eee;
	display: block;
	padding: 10px;
	margin-bottom: 18px;
	overflow: auto;
}

.bottom,.last 	{margin-bottom:0 !important; padding-bottom:0 !important;}

.box  {
  padding: 18px;
  margin-bottom: 18px;
  background: #eee;
}

.reverse,.reversed { background:  #000 !important;color:  #fff !important; border: none !important;}

#bodycomparison {
	position: relative;
	overflow: hidden;
	font-size: 72px;
	height: 90px;
	white-space: nowrap;
}

#bodycomparison div{
	font-size: 72px;
	line-height: 90px;
	display: inline;
	margin: 0 15px 0 0;
	padding: 0;
}

#bodycomparison div span{
	font: 10px Arial;
	position: absolute;
	left: 0;
}
#xheight {
	float: none;
	position: absolute;
	color: #d9f3ff;
	font-size: 72px;
	line-height: 90px;
}

.fontbody {
 position: relative;
}
.arialbody{
	font-family: Arial;
	position: relative;
}
.verdanabody{
	font-family: Verdana;
	position: relative;
}
.georgiabody{
	font-family: Georgia;
	position: relative;
}

/* @group Layout page
 */

#layout h1 {
	font-size: 36px;
	line-height: 42px;
	font-weight: normal;
	font-style: normal;
}

#layout h2 {
	font-size: 24px;
	line-height: 23px;
	font-weight: normal;
	font-style: normal;
}

#layout h3 {
	font-size: 22px;
	line-height: 1.4em;
	margin-top: 1em;
	font-weight: normal;
	font-style: normal;
}

#layout p.byline {
	font-size: 12px;
	margin-top: 18px;
	line-height: 12px;
	margin-bottom: 0;
}
#layout p {
	font-size: 14px;
	line-height: 21px;
	margin-bottom: .5em;
}

#layout p.large{
	font-size: 18px;
	line-height: 26px;
}

#layout .sidebar p{
	font-size: 12px;
	line-height: 1.4em;
}

#layout p.caption {
	font-size: 10px;
	margin-top: -16px;
	margin-bottom: 18px;
}

/* @end */

/* @group Glyphs */

#glyph_chart div{
	background-color: #d9f3ff;
	color: black;
	float: left;
	font-size: 36px;
	height: 1.2em;
	line-height: 1.2em;
	margin-bottom: 1px;
	margin-right: 1px;
	text-align: center;
	width: 1.2em;
	position: relative;
	padding: .6em .2em .2em;
}

#glyph_chart div p {
	position: absolute;
	left: 0;
	top: 0;
	display: block;
	text-align: center;
	font: bold 9px Arial, sans-serif;
	background-color: #3a768f;
	width: 100%;
	color: #fff;
	padding: 2px 0;
}

#glyphs h1 {
	font-family: Arial, sans-serif;
}
/* @end */

/* @group Installing */

#installing {
	font: 13px Arial, sans-serif;
}

#installing p,
#glyphs p{
	line-height: 1.2em;
	margin-bottom: 18px;
	font: 13px Arial, sans-serif;
}

#installing h3{
	font-size: 15px;
	margin-top: 18px;
}

/* @end */

#rendering h1 {
	font-family: Arial, sans-serif;
}
.render_table td {
	font: 11px "Courier New", Courier, mono;
	vertical-align: middle;
}


text:
/*Notes about grid:
Columns:      12
Grid Width:   825px
Column Width: 55px
Gutter Width: 15px
-------------------------------*/

.section 		{margin-bottom: 18px;
}
.section:after	{content: ".";display: block;height: 0;clear: both;visibility: hidden;}
.section 		{*zoom: 1;}

.section .firstcolumn,
.section .firstcol {margin-left: 0;}

/* Border on left hand side of a column. */
.border {
  padding-left: 7px;
  margin-left: 7px;
  border-left: 1px solid #eee;
}

/* Border with more whitespace, spans one column. */
.colborder {
    padding-left: 42px;
  margin-left: 42px;
  border-left: 1px solid #eee;
}

/* The Grid Classes */
.grid1, .grid1_2cols, .grid1_3cols, .grid1_4cols, .grid2, .grid2_3cols, .grid2_4cols, .grid3, .grid3_2cols, .grid3_4cols, .grid4, .grid4_3cols, .grid5, .grid5_2cols, .grid5_3cols, .grid5_4cols, .grid6, .grid6_4cols, .grid7, .grid7_2cols, .grid7_3cols, .grid7_4cols, .grid8, .grid8_3cols, .grid9, .grid9_2cols, .grid9_4cols, .grid10, .grid10_3cols, .grid10_4cols, .grid11, .grid11_2cols, .grid11_3cols, .grid11_4cols, .grid12
{margin-left: 15px;float: left;display: inline; overflow: hidden;}

.width1, .grid1, .span-1 {width: 55px;}
.width1_2cols,.grid1_2cols {width: 20px;}
.width1_3cols,.grid1_3cols  {width: 8px;}
.width1_4cols,.grid1_4cols  {width: 2px;}
.input_width1 {width: 49px;}

.width2, .grid2, .span-2 {width: 125px;}
.width2_3cols,.grid2_3cols  {width: 31px;}
.width2_4cols,.grid2_4cols  {width: 20px;}
.input_width2 {width: 119px;}

.width3, .grid3, .span-3 {width: 195px;}
.width3_2cols,.grid3_2cols {width: 90px;}
.width3_4cols,.grid3_4cols  {width: 37px;}
.input_width3 {width: 189px;}

.width4, .grid4, .span-4 {width: 265px;}
.width4_3cols,.grid4_3cols  {width: 78px;}
.input_width4 {width: 259px;}

.width5, .grid5, .span-5 {width: 335px;}
.width5_2cols,.grid5_2cols {width: 160px;}
.width5_3cols,.grid5_3cols  {width: 101px;}
.width5_4cols,.grid5_4cols  {width: 72px;}
.input_width5 {width: 329px;}

.width6, .grid6, .span-6 {width: 405px;}
.width6_4cols,.grid6_4cols  {width: 90px;}
.input_width6 {width: 399px;}

.width7, .grid7, .span-7 {width: 475px;}
.width7_2cols,.grid7_2cols {width: 230px;}
.width7_3cols,.grid7_3cols  {width: 148px;}
.width7_4cols,.grid7_4cols  {width: 107px;}
.input_width7 {width: 469px;}

.width8, .grid8, .span-8 {width: 545px;}
.width8_3cols,.grid8_3cols  {width: 171px;}
.input_width8 {width: 539px;}

.width9, .grid9, .span-9 {width: 615px;}
.width9_2cols,.grid9_2cols {width: 300px;}
.width9_4cols,.grid9_4cols  {width: 142px;}
.input_width9 {width: 609px;}

.width10, .grid10, .span-10 {width: 685px;}
.width10_3cols,.grid10_3cols  {width: 218px;}
.width10_4cols,.grid10_4cols  {width: 160px;}
.input_width10 {width: 679px;}

.width11, .grid11, .span-11 {width: 755px;}
.width11_2cols,.grid11_2cols {width: 370px;}
.width11_3cols,.grid11_3cols  {width: 241px;}
.width11_4cols,.grid11_4cols  {width: 177px;}
.input_width11 {width: 749px;}

.width12, .grid12, .span-12 {width: 825px;}
.input_width12 {width: 819px;}

/* Subdivided grid spaces */
.emptycols_left1, .prepend-1 {padding-left: 70px;}
.emptycols_right1, .append-1 {padding-right: 70px;}
.emptycols_left2, .prepend-2 {padding-left: 140px;}
.emptycols_right2, .append-2 {padding-right: 140px;}
.emptycols_left3, .prepend-3 {padding-left: 210px;}
.emptycols_right3, .append-3 {padding-right: 210px;}
.emptycols_left4, .prepend-4 {padding-left: 280px;}
.emptycols_right4, .append-4 {padding-right: 280px;}
.emptycols_left5, .prepend-5 {padding-left: 350px;}
.emptycols_right5, .append-5 {padding-right: 350px;}
.emptycols_left6, .prepend-6 {padding-left: 420px;}
.emptycols_right6, .append-6 {padding-right: 420px;}
.emptycols_left7, .prepend-7 {padding-left: 490px;}
.emptycols_right7, .append-7 {padding-right: 490px;}
.emptycols_left8, .prepend-8 {padding-left: 560px;}
.emptycols_right8, .append-8 {padding-right: 560px;}
.emptycols_left9, .prepend-9 {padding-left: 630px;}
.emptycols_right9, .append-9 {padding-right: 630px;}
.emptycols_left10, .prepend-10 {padding-left: 700px;}
.emptycols_right10, .append-10 {padding-right: 700px;}
.emptycols_left11, .prepend-11 {padding-left: 770px;}
.emptycols_right11, .append-11 {padding-right: 770px;}
.pull-1 {margin-left: -70px;}
.push-1 {margin-right: -70px;margin-left: 18px;float: right;}
.pull-2 {margin-left: -140px;}
.push-2 {margin-right: -140px;margin-left: 18px;float: right;}
.pull-3 {margin-left: -210px;}
.push-3 {margin-right: -210px;margin-left: 18px;float: right;}
.pull-4 {margin-left: -280px;}
.push-4 {margin-right: -280px;margin-left: 18px;float: right;}


text:
Copyright (c) 2010 by Typemade (hi@typemade.mx). All rights reserved.

This Font Software is licensed under the SIL Open Font License, Version 1.1.
This license is copied below, and is also available with a FAQ at: http://scripts.sil.org/OFL

-----------------------------------------------------------
SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
-----------------------------------------------------------

PREAMBLE
The goals of the Open Font License (OFL) are to stimulate worldwide development of collaborative font projects, to support the font creation efforts of academic and linguistic communities, and to provide a free and open framework in which fonts may be shared and improved in partnership with others.

The OFL allows the licensed fonts to be used, studied, modified and redistributed freely as long as they are not sold by themselves. The fonts, including any derivative works, can be bundled, embedded, redistributed and/or sold with any software provided that any reserved names are not used by derivative works. The fonts and derivatives, however, cannot be released under any other type of license. The requirement for fonts to remain under this license does not apply to any document created using the fonts or their derivatives.

DEFINITIONS
"Font Software" refers to the set of files released by the Copyright Holder(s) under this license and clearly marked as such. This may include source files, build scripts and documentation.

"Reserved Font Name" refers to any names specified as such after the copyright statement(s).

"Original Version" refers to the collection of Font Software components as distributed by the Copyright Holder(s).

"Modified Version" refers to any derivative made by adding to, deleting, or substituting -- in part or in whole -- any of the components of the Original Version, by changing formats or by porting the Font Software to a new environment.

"Author" refers to any designer, engineer, programmer, technical writer or other person who contributed to the Font Software.

PERMISSION & CONDITIONS
Permission is hereby granted, free of charge, to any person obtaining a copy of the Font Software, to use, study, copy, merge, embed, modify, redistribute, and sell modified and unmodified copies of the Font Software, subject to the following conditions:

1) Neither the Font Software nor any of its individual components, in Original or Modified Versions, may be sold by itself.

2) Original or Modified Versions of the Font Software may be bundled, redistributed and/or sold with any software, provided that each copy contains the above copyright notice and this license. These can be included either as stand-alone text files, human-readable headers or in the appropriate machine-readable metadata fields within text or binary files as long as those fields can be easily viewed by the user.

3) No Modified Version of the Font Software may use the Reserved Font Name(s) unless explicit written permission is granted by the corresponding Copyright Holder. This restriction only applies to the primary font name as presented to the users.

4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font Software shall not be used to promote, endorse or advertise any Modified Version, except to acknowledge the contribution(s) of the Copyright Holder(s) and the Author(s) or with their explicit written permission.

5) The Font Software, modified or unmodified, in part or in whole, must be distributed entirely under this license, and must not be distributed under any other license. The requirement for fonts to remain under this license does not apply to any document created using the Font Software.

TERMINATION
This license becomes null and void if any of the above conditions are not met.

DISCLAIMER
THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM OTHER DEALINGS IN THE FONT SOFTWARE.


text:
/* Generated by Font Squirrel (https://www.fontsquirrel.com) on April 19, 2016 */

@font-face {
    font-family: 'josefin_slabbold';
    src: url('josefinslab-bold-webfont.eot');
    src: url('josefinslab-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('josefinslab-bold-webfont.woff2') format('woff2'),
         url('josefinslab-bold-webfont.woff') format('woff'),
         url('josefinslab-bold-webfont.ttf') format('truetype'),
         url('josefinslab-bold-webfont.svg#josefin_slabbold') format('svg');
    font-weight: normal;
    font-style: normal;

}