\n \n\n
\n \n\n
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.
\nThis tab hasn't got any Lorem Ipsum in it. But the content isn't very exciting all the same.
\nLorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque turpis nibh, porttitor nec venenatis eu, pulvinar in augue. And now an ordered list: how exciting!
\n\nFields marked with an asterisk (*) are required.
\n\n \n \n \n \n\n" }, { "path": "accessibility/aria/form-validation-updated.html", "content": "\n\n \n \n \nFields marked with an asterisk (*) are required.
\n\n \n \n \n\n" }, { "path": "accessibility/aria/quotes.json", "content": "[\n {\n \"quote\" : \"Life is about making an impact, not making an income.\",\n \"author\" : \"Kevin Kruse\"\n },\n {\n \"quote\" : \"Whatever the mind of man can conceive and believe, it can achieve.\",\n \"author\" : \"Napoleon Hill\"\n },\n {\n \"quote\" : \"Strive not to be a success, but rather to be of value.\",\n \"author\" : \"Albert Einstein\"\n },\n {\n \"quote\" : \"Two roads diverged in a wood, and I—I took the one less traveled by, And that has made all the difference\",\n \"author\" : \"Robert Frost\"\n },\n {\n \"quote\" : \"I attribute my success to this: I never gave or took any excuse.\",\n \"author\" : \"Florence Nightingale\"\n },\n {\n \"quote\" : \"You miss 100% of the shots you don’t take.\",\n \"author\" : \"Wayne Gretzky\"\n },\n {\n \"quote\" : \"I’ve missed more than 9000 shots in my career. I’ve lost almost 300 games. 26 times I’ve been trusted to take the game winning shot and missed. I’ve failed over and over and over again in my life. And that is why I succeed.\",\n \"author\" : \"Michael Jordan\"\n },\n {\n \"quote\" : \"The most difficult thing is the decision to act, the rest is merely tenacity.\",\n \"author\" : \"Amelia Earhart\"\n },\n {\n \"quote\" : \"Every strike brings me closer to the next home run.\",\n \"author\" : \"Babe Ruth\"\n },\n {\n \"quote\" : \"Definiteness of purpose is the starting point of all achievement.\",\n \"author\" : \"W. Clement Stone\"\n },\n {\n \"quote\" : \"Life isn’t about getting and having, it’s about giving and being.\",\n \"author\" : \"Kevin Kruse\"\n },\n {\n \"quote\" : \"Life is what happens to you while you’re busy making other plans.\",\n \"author\" : \"John Lennon\"\n },\n {\n \"quote\" : \"We become what we think about.\",\n \"author\" : \"Earl Nightingale\"\n },\n {\n \"quote\" : \"Twenty years from now you will be more disappointed by the things that you didn’t do than by the ones you did do, so throw off the bowlines, sail away from safe harbor, catch the trade winds in your sails. Explore, Dream, Discover.\",\n \"author\" : \"Mark Twain\"\n },\n {\n \"quote\" : \"Life is 10% what happens to me and 90% of how I react to it.\",\n \"author\" : \"Charles Swindoll\"\n },\n {\n \"quote\" : \"The most common way people give up their power is by thinking they don’t have any.\",\n \"author\" : \"Alice Walker\"\n },\n {\n \"quote\" : \"The mind is everything. What you think you become.\",\n \"author\" : \"Buddha\"\n },\n {\n \"quote\" : \"The best time to plant a tree was 20 years ago. The second best time is now.\",\n \"author\" : \"Chinese Proverb\"\n },\n {\n \"quote\" : \"An unexamined life is not worth living.\",\n \"author\" : \"Socrates\"\n },\n {\n \"quote\" : \"Eighty percent of success is showing up.\",\n \"author\" : \"Woody Allen\"\n },\n {\n \"quote\" : \"Your time is limited, so don’t waste it living someone else’s life.\",\n \"author\" : \"Steve Jobs\"\n },\n {\n \"quote\" : \"Winning isn’t everything, but wanting to win is.\",\n \"author\" : \"Vince Lombardi\"\n },\n {\n \"quote\" : \"I am not a product of my circumstances. I am a product of my decisions.\",\n \"author\" : \"Stephen Covey\"\n },\n {\n \"quote\" : \"Every child is an artist. The problem is how to remain an artist once he grows up.\",\n \"author\" : \"Pablo Picasso\"\n },\n {\n \"quote\" : \"You can never cross the ocean until you have the courage to lose sight of the shore.\",\n \"author\" : \"Christopher Columbus\"\n }\n]\n" }, { "path": "accessibility/aria/validation-checkbox-disabled.js", "content": "const inputs = document.querySelectorAll('input');\nconst labels = document.querySelectorAll('label');\nconst form = document.querySelector('form');\n\nlet formItems = [];\n\nconst errorField = document.querySelector('.errors');\nconst errorList = document.querySelector('.errors ul');\n\nlet checkbox;\nlet checkboxLabel;\n\nconst hiddenAlert = document.querySelector('.hidden-alert');\n\nfor(let i = 0; i < inputs.length-1; i++) {\n if(inputs[i].type !== 'checkbox') {\n let obj = {};\n obj.label = labels[i];\n obj.input = inputs[i];\n formItems.push(obj);\n } else {\n checkbox = inputs[i];\n checkboxLabel = labels[i];\n }\n}\n\nerrorField.style.left = '-100%';\n\ntoggleMusician(false);\n\nform.onsubmit = validate;\n\nfunction validate(e) {\n errorList.innerHTML = '';\n for(let i = 0; i < formItems.length; i++) {\n let testItem = formItems[i];\n if(testItem.input.value === '' && testItem.input.disabled === false) {\n errorField.style.left = '390px';\n createLink(testItem);\n }\n }\n\n if(errorList.innerHTML !== '') {\n e.preventDefault();\n }\n}\n\nfunction createLink(testItem) {\n const listItem = document.createElement('li');\n const anchor = document.createElement('a');\n anchor.textContent = testItem.input.name + ' field is empty: fill in your ' + testItem.input.name + '.';\n anchor.href = '#' + testItem.input.name;\n anchor.onclick = function() {\n testItem.input.focus();\n };\n listItem.appendChild(anchor);\n errorList.appendChild(listItem);\n}\n\ncheckbox.onchange = function() {\n if(checkbox.checked) {\n toggleMusician(true);\n } else {\n toggleMusician(false);\n }\n};\n\nfunction toggleMusician(bool) {\n let instruItem = formItems[formItems.length-1];\n if(bool) {\n instruItem.input.disabled = false;\n instruItem.label.style.color = '#000';\n instruItem.input.setAttribute('aria-disabled', 'false');\n hiddenAlert.textContent = 'Instruments played field now enabled; use it to tell us what you play.';\n } else {\n instruItem.input.disabled = true;\n instruItem.label.style.color = '#999';\n instruItem.input.setAttribute('aria-disabled', 'true');\n hiddenAlert.textContent = 'Instruments played field now disabled.';\n }\n}\n" }, { "path": "accessibility/aria/validation.js", "content": "const inputs = document.querySelectorAll('input');\nconst labels = document.querySelectorAll('label');\nconst form = document.querySelector('form');\n\nlet formItems = [];\n\nconst errorField = document.querySelector('.errors');\nconst errorList = document.querySelector('.errors ul');\n\nfor(let i = 0; i < inputs.length-1; i++) {\n let obj = {};\n obj.label = labels[i];\n obj.input = inputs[i];\n formItems.push(obj);\n}\n\nerrorField.style.left = '-100%';\n\nform.onsubmit = validate;\n\nfunction validate(e) {\n errorList.innerHTML = '';\n for(let i = 0; i < formItems.length; i++) {\n let testItem = formItems[i];\n if(testItem.input.value === '') {\n errorField.style.left = '360px';\n createLink(testItem);\n }\n }\n\n if(errorList.innerHTML !== '') {\n e.preventDefault();\n }\n}\n\nfunction createLink(testItem) {\n const listItem = document.createElement('li');\n const anchor = document.createElement('a');\n anchor.textContent = testItem.input.name + ' field is empty: fill in your ' + testItem.input.name + '.';\n anchor.href = '#' + testItem.input.name;\n anchor.onclick = function() {\n testItem.input.focus();\n };\n listItem.appendChild(anchor);\n errorList.appendChild(listItem);\n}\n" }, { "path": "accessibility/aria/website-aria-roles/index.html", "content": "\n\n \n \n \n\nLorem 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.
\n\nDonec 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.
\n\nPelientesque 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.
\n\nDonec 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.
\n\nVivamus 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.
\nLorem 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.
\n\nDonec 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.
\n\nPelientesque 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.
\n\nDonec 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.
\n\nVivamus 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.
\nBy Evan Wild
\n\nTall, 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.
\n\nSo 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.
\n\nBears 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.
\n\nBears 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.
\n\n| Bear Type | \nCoat | \nAdult size | \nHabitat | \nLifespan | \nDiet | \n
|---|---|---|---|---|---|
| Wild | \nBrown or black | \n1.4 to 2.8 meters | \nWoods and forests | \n25 to 28 years | \nFish, meat, plants | \n
| Urban | \nNorth Face | \n18 to 22 | \nCondos and coffee shops | \n20 to 32 years | \nStarbucks, sushi | \n
Wild bears eat a variety of meat, fish, fruit, nuts, and other naturally 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.
\n\n![](\"media/wild-bear.jpg\")
\n\n 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.
\n\n![](\"media/urban-bear.jpg\")
\n\n Urban bears will sleep anywhere they can, from bus shelters and parks, to the toilets in McDonald's, to their own apartment.
\n\nBears 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.
\n\nThe 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.
\n\n \n\n \n<br> tags) all need to be removed (2).<font> elements need to be replaced with appropriate heading elements (<h1>, <h2>, <h3>) (2).<p>)(2).font[size=\"7\"]/font[size=\"6\"]/font[size=\"5\"] need to be replaced with h1/h2/h3.<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.<div class=\"nav\"></div> needs be replaced with <nav></nav>div[class=\"nav\"] need to be replaced with nav.aria-labelledby to link the two is good. you could also use a plain old alt attribute.aria-label attribute on the input element. This will then be read out by screenreaders when the input is encountered.<label> elements, with for attributes containing the ID values of the input elements they are the labels for.<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. summary attribute or <caption> element.\n <th>).scope=\"col\" to the headings in the first row, and scope=\"row\" to the headings in the first column.role attribute with \"alert\" value on the h2 element in the comments section and update its text like so \"Comments (1 available)\".This isn't really an audio fact file about bears, but it is an audio file that you can transcribe.
\n \n\n" }, { "path": "accessibility/assessment-start/assessment-files/index.html", "content": "\n\n \n \n \n\n| Bear Type | \nCoat | \nAdult size | \nHabitat | \nLifespan | \nDiet | \n
| Wild | \nBrown or black | \n1.4 to 2.8 meters | \nWoods and forests | \n25 to 28 years | \nFish, meat, plants | \n
| Urban | \nNorth Face | \n18 to 22 | \nCondos and coffee shops | \n20 to 32 years | \nStarbucks, sushi | \n
\n \n Bob Fossil
\n\nOh 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.
\n\n| Bear Type | \nCoat | \nAdult size | \nHabitat | \nLifespan | \nDiet | \n
| Wild | \nBrown or black | \n1.4 to 2.8 meters | \nWoods and forests | \n25 to 28 years | \nFish, meat, plants | \n
| Urban | \nNorth Face | \n18 to 22 | \nCondos and coffee shops | \n20 to 32 years | \nStarbucks, sushi | \n
\n \n Bob Fossil
\n\nOh 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.
\n\n![\"A](\"pirate.jpg\")
\n \n \n\n"
},
{
"path": "accessibility/css/table-css.html",
"content": "\n\n \n \n \n | Name | \nAge | \nGender | \n
|---|---|---|
| Gabriel | \n13 | \nMale | \n
| Elva | \n8 | \nFemale | \n
| Freida | \n5 | \nFemale | \n
![](\"dinosaur.png\")
\n\n ![\"A](\"dinosaur.png\"\n)
\n\n \n\n \n\n The Mozilla red Tyrannosaurus Rex: A two legged dinosaur standing upright like a human, with small arms, and a large head with lots of sharp teeth.
\n\n \n\n" }, { "path": "accessibility/html/bad-form.html", "content": "\n\n \n \n \n| Name | \nAge | \nGender | \n
| Gabriel | \n13 | \nMale | \n
| Elva | \n8 | \nFemale | \n
| Freida | \n5 | \nFemale | \n
A red Tyrannosaurus Rex: A two legged dinosaur standing upright like a human, with small arms, and a large head with lots of sharp teeth.
\n\n \n\n" }, { "path": "accessibility/html/good-form.html", "content": "\n\n \n \n \nProw scuttle parrel provost Sail ho shrouds spirits boom mizzenmast yardarm. Pinnace holystone mizzenmast quarter crow's nest nipperkin grog yardarm hempen halter furl. Swab barque interloper chantey doubloon starboard grog black jack gangway rutters. Deadlights jack lad schooner scallywag dance the hempen jig carouser broadside cable strike colors. Bring a spring upon her cable holystone blow the man down spanker Shiver me timbers to go on account lookout wherry doubloon chase. Belay yo-ho-ho keelhaul squiffy black spot yardarm spyglass sheet transom heave to.
\n\nTrysail Sail ho Corsair red ensign hulk smartly boom jib rum gangway. Case shot Shiver me timbers gangplank crack Jennys tea cup ballast Blimey lee snow crow's nest rutters. Fluke jib scourge of the seven seas boatswain schooner gaff booty Jack Tar transom spirits. Crack Jennys tea cup Sail ho killick transom trysail Chain Shot. Measured fer yer chains lateen sail Davy Jones' Locker prow wench weigh anchor. Port me hang the jib Davy Jones' Locker skysail pirate. Sail ho run a shot across the bow fluke belaying pin boom carouser. Chase guns broadside Corsair mizzen provost Admiral of the Black. Red ensign list brigantine line booty hands. Booty topgallant grapple coffer pinnace fire ship.
\n\nYard Pirate Round hearties Sail ho log salmagundi. Ye scuttle smartly Jack Tar man-of-war measured fer yer chains. Shrouds sloop transom quarter wench case shot. Hempen halter Cat o'nine tails red ensign strike colors lugsail hogshead. Barbary Coast parrel bilge ho aft gibbet. Tack red ensign crimp yo-ho-ho Buccaneer gaff. Keel careen scuppers port hands reef sails. Hands square-rigged draft lugsail heave to bounty. Clap of thunder scuppers trysail cable yo-ho-ho coxswain. Jury mast cable mizzenmast hail-shot keelhaul execution dock. Black jack ho shrouds bilge water avast hardtack. Clipper deadlights brigantine measured fer yer chains poop deck Blimey. Topsail Arr yo-ho-ho pillage bucko handsomely. Draft pinnace holystone Cat o'nine tails Letter of Marque loaded to the gunwalls.
\n\nTopgallant American Main coxswain poop deck sloop come about. Piracy hail-shot handsomely Spanish Main flogging interloper. Run a rig lee yo-ho-ho gangplank Pieces of Eight gabion. Sloop Spanish Main reef capstan deadlights rope's end. Six pounders red ensign mizzenmast mizzen chase guns topmast. Broadside fore splice the main brace heave down Chain Shot bounty. Poop deck ballast Jack Tar pressgang jack walk the plank.
\n \n\n" }, { "path": "accessibility/html/native-keyboard-accessibility.html", "content": "\n\n \n \n \nThis is a link to Mozilla.
\n\nAnother link, to the Mozilla Developer Network.
\n\n\n \n \n \n
\n\n\n\n Header\n\n | \n |||||
| \n Home\n | \n\n Our team\n | \n\n Projects\n | \n\n Contact\n | \n\n \n | \n\n \n | \n
| \n\n | \n|||||
\n\n Article heading\n\nLorem 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. \n\nsubsection\n\nDonec 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. \n\nPelientesque 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. \n\nAnother subsection\n\nDonec 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. \n\nVivamus 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. \n\n | \n \n Related\n\n \n\n | \n ||||
| \n\n | \n|||||
| \n ©Copyright 2050 by nobody. All rights reversed. \n | \n
Person1: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque at convallis libero, ut ultricies massa. Integer vel tempor nisi. Nunc scelerisque enim est. Duis lorem ipsum, semper vitae sem at, ultricies interdum ex.
\n\nPerson 2: In consectetur maximus blandit. Curabitur convallis iaculis quam, eu porta erat suscipit sit amet. Morbi viverra placerat ipsum, non bibendum libero egestas eu. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed quis condimentum ante. Nullam ullamcorper faucibus eros. Quisque egestas non risus a faucibus. Curabitur luctus tincidunt turpis in scelerisque.
\n\nPerson 1: Suspendisse sapien ipsum, lacinia eu bibendum in, congue eu purus. Sed fringilla sollicitudin faucibus. Cras sodales sapien neque, eget gravida augue lobortis ac. Mauris blandit faucibus porta.
\n\nPerson 2: Fusce non libero eget nisl porta egestas ut sed elit. Nullam molestie lectus ut elementum sagittis. Donec dictum nunc leo, quis gravida diam varius non. Nam ac nisl vel nibh iaculis convallis vel eget arcu. Mauris pharetra purus ac ornare pellentesque. Fusce in leo nunc. Nunc eget vehicula sem, quis aliquam lorem.
\n\nPerson 3: Ut auctor ornare pulvinar. Morbi nisl ipsum, pellentesque et bibendum eget, vestibulum in massa. Cras egestas cursus est sed ultrices. Etiam vel dui felis.
\nMy favorite animals:
\n\nMy favorite animals:
\n\nProw scuttle parrel provost Sail ho shrouds spirits boom mizzenmast yardarm. Pinnace holystone mizzenmast quarter crow's nest nipperkin grog yardarm hempen halter furl.
\n\nSwab barque interloper chantey doubloon starboard grog black jack gangway rutters.
\n\nDeadlights jack lad schooner scallywag dance the hempen jig carouser broadside cable strike colors.
\nProw scuttle parrel provost Sail ho shrouds spirits boom mizzenmast yardarm. Pinnace holystone mizzenmast quarter crow's nest nipperkin grog yardarm hempen halter furl.
\n\nSwab barque interloper chantey doubloon starboard grog black jack gangway rutters.
\n\nDeadlights jack lad schooner scallywag dance the hempen jig carouser broadside cable strike colors.
\nFor more information about our activities, check out our fundraising page (click here), education page (click here), sponsorship pack (click here), and assessment sheets (click here).
\n\n \n\n\n" }, { "path": "accessibility/tasks/html-css/html/html-a11y3.html", "content": "\n\n \n \nFor more information about our activities, check out our fundraising page (click here), education page (click here), sponsorship pack (click here), and assessment sheets (click here).
\n\n![\"A](\"images/star.png\")
\n ![](\"images/teapot.jpg\")
\n ![](\"images/football.jpg\")
\n \n \n \n \n If you have any problems with our products, our support center can offer you\n all the help you need, whether you want:\n
\n\nOur help center contains live chat, e-mail addresses, and phone numbers.
\n\n\n\n\n Our Forums section contains a large knowledge base of searchable previously\n asked questions, and you can always ask a new question if you can't find the\n answer you're looking for.\n
\n\n\n```\n\nYou can get a couple of extra marks for:\n\n1. Just using `\n\n \n\n \n \n\n" }, { "path": "css/css-layout/practical-positioning-examples/tabbed-info-box-start.html", "content": "\n\n \n \n \n\n Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n Pellentesque turpis nibh, porttitor nec venenatis eu, pulvinar in\n augue. Vestibulum et orci scelerisque, vulputate tellus quis,\n lobortis dui. Vivamus varius libero at ipsum mattis efficitur ut nec\n nisl. Nullam eget tincidunt metus. Donec ultrices, urna maximus\n consequat aliquet, dui neque eleifend lorem, a auctor libero turpis\n at sem. Aliquam ut porttitor urna. Nulla facilisi.\n
\n\n This tab hasn't got any Lorem Ipsum in it. But the content isn't\n very exciting all the same.\n
\n\n Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n Pellentesque turpis nibh, porttitor nec venenatis eu, pulvinar in\n augue. And now an ordered list: how exciting!\n
\n\n Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n Pellentesque turpis nibh, porttitor nec venenatis eu, pulvinar in\n augue. Vestibulum et orci scelerisque, vulputate tellus quis,\n lobortis dui. Vivamus varius libero at ipsum mattis efficitur ut nec\n nisl. Nullam eget tincidunt metus. Donec ultrices, urna maximus\n consequat aliquet, dui neque eleifend lorem, a auctor libero turpis\n at sem. Aliquam ut porttitor urna. Nulla facilisi.\n
\n\n This tab hasn't got any Lorem Ipsum in it. But the content isn't\n very exciting all the same.\n
\n\n Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n Pellentesque turpis nibh, porttitor nec venenatis eu, pulvinar in\n augue. And now an ordered list: how exciting!\n
\nThis is a paragraph.
\nOne selector to rule them all!
\nParagraph 1
\nParagraph 2
\nParagraph 3
\nParagraph 4
\nThis is a paragraph.
\n\nMy first paragraph.
\nMy second paragraph.
\nMy third paragraph
\nWinner: Velma Victory
\n2nd: Colin Contender
\n3rd: Phoebe Player
\nThis is my very important paragraph. I am a distinguished gentleman of such renown that my paragraph needs to be styled in a manner befitting my majesty. Bow before my splendour, dear students, and go forth and learn CSS!
\nHello, and welcome! I hope you enjoy your time here.
\n\nI am a believer in chilling out, and not getting grumpy. I think everyone else should follow this ideal, and drink green tea.
\n \nThis is a paragraph.
\nThis is a paragraph.
\nThis is a paragraph.
\nBlue ocean silo royal baby space local evergreen relationship housekeeping native advertising diversify ideation session. Soup-to-nuts herding cats resolutionary virtuoso granularity catalyst wow factor loop back brainstorm. Core competency baked in push back silo irrational exuberance circle back roll-up.
\nHello
\nThis paragraph has a red background
\nThis paragraph has a blue background
\nThis paragraph has a kind of pinky lilac background
\n![\"firefox](\"https://mdn.mozillademos.org/files/11947/ff-logo.png\"){kind=logo}
\n\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla.
\n\nClass aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor.
\n \n\n\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla.
\n\nClass aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor.
\n \n![\"A](\"chris.jpg\")
\n 50 My Street
\n The Town
\n Gray Peach
\n UK
\n ZO50 1MU
\n Tel: 01234 567 890
\n Mail: chris@nothere.com
\n 50 My Street
\n The Town
\n Gray Peach
\n UK
\n ZO50 1MU
\n Tel: 01234 567 890
\n Mail: chris@nothere.com
<link> element\" (2 marks).card article img goes with the fourth ruleset..card footer goes with the third ruleset..card header goes with the second ruleset..card goes with the first ruleset.background-colour in the first ruleset: colour > color.max-height: 100% in the fourth rule needs a semi-colon at the end of it.<html> element is 10px, 1em is 10px, so the height (30px) should be represented by 3em, and the padding by 1em. 10 + 30 + 10 = 50. \n<h2> and <p> elements by the browser will interfere with our design\" (3 marks)<h2> should be fine.<article> element), we need to give it a specific height.\" (3 marks)<h2> an effective font size of 20px (but expressed in ems) and an appropriate line height to place it in the center of the header's content box...\" (3 marks)<p> an effective font size of 15px (but expressed in ems) and an appropriate line height to place it in the center of the footer's content box...\" (3 marks)<article> an appropriate padding value so that its left edge lines up with the <h2> and footer paragraph, and set its color to be fairly light so it is easy to read.\" (3 marks).card at the start of the selector chain in all your rules, so that these rules wouldn't interfere with the styling of any other elements if the business card were to be put on a page with a load of other content.\" (1 mark)This is my first CSS example
\n \n\n" }, { "path": "css/introduction-to-css/how-css-works/style.css", "content": "\nh1 {\n color: blue;\n background-color: yellow;\n border: 1px solid black;\n}\n\np {\n color: red;\n}" }, { "path": "css/styling-boxes/advanced_box_effects/background-clip-text.html", "content": "\n\n \n \n \nWarning: The thermostat on the cosmic transcender has reached a critical level.
\nWarning: The thermostat on the cosmic transcender has reached a critical level.
\n![\"a](\"colorful-heart.png\")
\n \n \n \n \n \n \n \n \n background-attachment: scroll causes the element's background to be fixed to the page, so that it scrolls when the page is scrolled. If the element content is scrolled, the background does not move.
background-attachment: fixed causes an element's background to be fixed to the viewport, so that it doesn't scroll when the page or element content is scrolled. It will always remain in the same position on the screen.
background-attachment: local, new to CSS3, causes an element's background to be fixed to the actual element itself. So When the page is scrolled, the element's background will move along with it only if the element does so (so not in the case of elements with position: fixed.) When the element's content is scrolled, the background will scroll along with it.
Exciting box!
\n \n" }, { "path": "css/styling-boxes/backgrounds/repeating-background.html", "content": "\n\n \n \n \nA single instance of the image looks like this: ![\"a](\"tile.png\")
. If we use it as a repeating background image along with a solid background color, it could look like this:
Border image
\nChapter 1: I was born
\nChapter 2: School
\nChapter 3: University
\nChapter 4: Rock and roll
\nChapter 5: Fell in love
\nChapter 6: Children
\nChapter 7: Tired!
\nRounded corners are groovy!
\nTacos actually microdosing, pour-over semiotics banjo chicharrones retro fanny pack portland everyday carry vinyl typewriter. Tacos PBR&B pork belly, everyday carry ennui pickled sriracha normcore hashtag polaroid single-origin coffee cold-pressed. PBR&B tattooed trust fund twee, leggings salvia iPhone photo booth health goth gastropub hammock.
\n\n![\"A](\"teddy-bear.jpg\")
\n\n Cray food truck brunch, XOXO +1 keffiyeh pickled chambray waistcoat ennui. Organic small batch paleo 8-bit. Intelligentsia umami wayfarers pickled, asymmetrical kombucha letterpress kitsch leggings cold-pressed squid chartreuse put a bird on it. Listicle pickled man bun cornhole heirloom art party.
\n \n" }, { "path": "css/styling-boxes/box-model-recap/min-max-image-container.css", "content": "html {\n font-family: sans-serif;\n background: #ccc;\n}\n\nh1 {\n margin-top: 0;\n padding-top: 24px;\n}\n\np {\n line-height: 1.5;\n letter-spacing: 1px;\n}\n\nbody {\n background: white;\n padding: 10px;\n \n /* First bit of CSS from the article */\n width: 70%;\n max-width: 1280px;\n min-width: 480px;\n margin: 0 auto;\n}\n\nimg {\n /* Second bit of CSS from the article */\n display: block;\n margin: 0 auto;\n max-width: 100%;\n}" }, { "path": "css/styling-boxes/box-model-recap/min-max-image-container.html", "content": "\n\n \n \n \nTacos actually microdosing, pour-over semiotics banjo chicharrones retro fanny pack portland everyday carry vinyl typewriter. Tacos PBR&B pork belly, everyday carry ennui pickled sriracha normcore hashtag polaroid single-origin coffee cold-pressed. PBR&B tattooed trust fund twee, leggings salvia iPhone photo booth health goth gastropub hammock.
\n\n\n\n Cray food truck brunch, XOXO +1 keffiyeh pickled chambray waistcoat ennui. Organic small batch paleo 8-bit. Intelligentsia umami wayfarers pickled, asymmetrical kombucha letterpress kitsch leggings cold-pressed squid chartreuse put a bird on it. Listicle pickled man bun cornhole heirloom art party.
\n \n" }, { "path": "css/styling-boxes/cool-information-box-finished/index.html", "content": "\n\n \n \n \nThis is a cool box
<link> element, or <style> element to apply the CSS with.div a width of around 150-300px. This is fairly hard to not get, as long as it isn't set to 1000px, or 50px.div a line-height of around 8-10. Again, award the mark as long as it doesn't look ridiculous.div margin of 0 auto, or auto, or similar.font-size (somewhere between 1.0625-1.125rem), and one mark for a good explanation. Something like recalling that the default font size is 16px, and calculating an exact rem value (e.g. 17/16), or approximating it and checking it in the browser dev tools, will do fine.background-color. Easy.text-shadow. Something like 1px 1px 1px black is fine, but nothing too diffuse.border-radius value like 10-15px, or 1rem perhaps. 20px at the most; nothing too ridiculous.border as 1px solid [a color], and one mark for setting the color to a slightly darker shade than the base color, e.g. if your base color is rgb(255,0,0), set it to rgb(200,0,0).background-image: linear-gradient(to top left, rgba(0,0,0,0.2), rgba(0,0,0,0.2) 30%, rgba(0,0,0,0));. The student can get:\n linear-gradient.to top left (to left top is also fine)rgba() or hsla() colors correctly, with an opacity channel value of 0.2 or similar.box-shadow syntax correct.2px 2px 5px black. But not too diffuse.inset 2px 2px 3px rgba(255,255,255,0.6).inset -2px -2px 3px rgba(0,0,0,0.6).The Awesome Company
\n102-112 Frail Bend Bridge
\n The Dwindlings
\n Little Hornet
\n HX3 9ZQ
\n UK
<link> element, or <style> element to apply the CSS with.background property with multiple values. This is the most complicated part of this assessment, and there are a number of marks involved:\n url(top-image.png) no-repeat left top.url(bottom-image.png) no-repeat left bottom.linear-gradient(to bottom, rgba(0,0,0,0.2), rgba(0,0,0,0) 20%, rgba(0,0,0,0) 80%, rgba(0,0,0,0.2))background property that just specifies url(top-image.png) no-repeat left top in it's value; one mark for putting it before the main background declaration.background-color: white;.border-top and border-bottom declaration (one for each), and one mark for choosing an appropriate color to go with the top and bottom graphics (e.g. a red or brown for the default provided options).<h1>, add the logo as a background image.\" (1 mark)background to add the logo image. For example background-image: url(logo.png);.filter property, and one mark for a suitable value, e.g. drop-shadow(3px 3px 3px black).border-radius: 64px; or border-radius: 50%; would both be fine.box-shadow property.The Awesome Company
\n102-112 Frail Bend Bridge
\n The Dwindlings
\n Little Hornet
\n HX3 9ZQ
\n UK
| Band | \nYear formed | \nNo. of Albums | \nMost famous song | \n
|---|---|---|---|
| Buzzcocks | \n1976 | \n9 | \nEver fallen in love (with someone you shouldn't've) | \n
| The Clash | \n1976 | \n6 | \nLondon Calling | \n
| The Damned | \n1976 | \n10 | \nSmash it up | \n
| Sex Pistols | \n1975 | \n1 | \nAnarchy in the UK | \n
| Sham 69 | \n1976 | \n13 | \nIf The Kids Are United | \n
| Siouxsie and the Banshees | \n1976 | \n11 | \nHong Kong Garden | \n
| Stiff Little Fingers | \n1977 | \n10 | \nSuspect Device | \n
| The Stranglers | \n1974 | \n17 | \nNo More Heroes | \n
| Total albums | \n77 | \n
| Band | \nYear formed | \nNo. of Albums | \nMost famous song | \n
|---|---|---|---|
| Buzzcocks | \n1976 | \n9 | \nEver fallen in love (with someone you shouldn't've) | \n
| The Clash | \n1976 | \n6 | \nLondon Calling | \n
| The Damned | \n1976 | \n10 | \nSmash it up | \n
| Sex Pistols | \n1975 | \n1 | \nAnarchy in the UK | \n
| Sham 69 | \n1976 | \n13 | \nIf The Kids Are United | \n
| Siouxsie and the Banshees | \n1976 | \n11 | \nHong Kong Garden | \n
| Stiff Little Fingers | \n1977 | \n10 | \nSuspect Device | \n
| The Stranglers | \n1974 | \n17 | \nNo More Heroes | \n
| Total albums | \n77 | \n
Well I remember it as though it were a meal ago...
\n\nSaid Tommy the Cat as he reeled back to clear whatever foreign matter may have nestled its way into his mighty throat. Many a fat alley rat had met its demise while staring point blank down the cavernous barrel of this awesome prowling machine. Truly a wonder of nature this urban predator — Tommy the cat had many a story to tell. But it was a rare occasion such as this that he did.
\n\n\n \n\n" }, { "path": "css/styling-text/styling-links/default-styles.html", "content": "\n\n \n \n \nA link to the Mozilla homepage
\n \n" }, { "path": "css/styling-text/styling-links/external-link-icon.html", "content": "\n\n \n \n \nFor more information on the weather, visit our weather page, look at weather on Wikipedia, or check out weather on Extreme Science.
\n \n" }, { "path": "css/styling-text/styling-links/link-buttons.html", "content": "\n\n \n \n \nThere are several browsers available, such as Mozilla Firefox, Google Chrome, and Microsoft Edge.
\n \n" }, { "path": "css/styling-text/styling-lists/index.html", "content": "\n\n \n \n \nParagraph for reference, paragraph for reference, paragraph for reference, paragraph for reference, paragraph for reference, paragraph for reference.
\n\nParagraph for reference, paragraph for reference, paragraph for reference, paragraph for reference, paragraph for reference, paragraph for reference.
\n\nParagraph for reference, paragraph for reference, paragraph for reference, paragraph for reference, paragraph for reference, paragraph for reference.
\n\nParagraph for reference, paragraph for reference, paragraph for reference, paragraph for reference, paragraph for reference, paragraph for reference.
\n\nParagraph for reference, paragraph for reference, paragraph for reference, paragraph for reference, paragraph for reference, paragraph for reference.
\n\nParagraph for reference, paragraph for reference, paragraph for reference, paragraph for reference, paragraph for reference, paragraph for reference.
\n\nIt'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.
\n\nAs 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.
\n\nAt 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:
\n\nIf you are interested, then you next steps will likely be to:
\n \n@font-face code\" (2 marks)@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.<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.font-size of 10px\" (1 mark)font-size: 10px; should be applied to the <html> element.line-height.\" (1 mark)text-align: center; on the h1 will get the mark. Flexbox would also do. Anything else is probably too convoluted to get the mark.letter-spacing...\" (1 mark)<section> a little bit of text-indentation, say 20px.\" (2 marks)h2 + p, and the declaration used should be text-indent: 20px;. One mark for each.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.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.outline: none on all links (a).href attribute.background-* properties or background shorthand to place the background image, and to make it not repeat.background-size property to resize the icon to something appropriate dynamically, OR resizing it in an image editor to an appropriate size.<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.<ul> and <ol> a simple list-style-type or something a bit more interesting; whatever they feel like.nav to make sure only the nav menu is affected.<ul> to 0.<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.list-style-type: none; on the <li> to get rid of the bullets.display: inline-block.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.
\n\n\t\t\t\t\tYou must upload your webfont kit to your website. They should be in or near the same directory as your CSS files.
\n\n\t\t\t\t\tA 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:
\n\n\n\n@font-face{\n\tfont-family: 'MyWebFont';\n\tsrc: url('WebFont.eot');\n\tsrc: url('WebFont.eot?#iefix') format('embedded-opentype'),\n\t url('WebFont.woff') format('woff'),\n\t url('WebFont.ttf') format('truetype'),\n\t url('WebFont.svg#webfont') format('svg');\n}\n\n\tWe'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:
\n\t<link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" />\n\n\t\t\t\t\tTo 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:
\np { font-family: 'MyWebFont', Arial, sans-serif; }\n\nGetting 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.
\n\t\t\t\tHaving trouble getting your webfonts to load in your new website? Here are some tips to sort out what might be the problem.
\n\n\t\t\t\t\t\tThis 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.
\n\n\t\t\t\t\t\tThe 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.
\n\n\t\t\t\t\t\tThe 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.)
\n\n\t\t\t\t\t\tAre 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.
\n\n\t\t\t\t\t\tIE9, like Firefox, requires that fonts be served from the same domain as the website. Make sure that is the case.
\n\t\t\t\t\t| 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 |
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.
\n\t\t\t\n\t\t\t\t\t11.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.
\n\t\t\t\n\t\t\t\t\t12.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.
\n\t\t\t\n\t\t\t\t\t13.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.
\n\t\t\t\n\t\t\t\t\t14.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.
\n\t\t\t\n\t\t\t\t\t16.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.
\n\t\t\t\n\t\t\t\t\t18.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.
\n\t\t\t\n\t\t\t\t\t20.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.
\n\t\t\t\t\t24.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.
\n\t\t\t\t\t30.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.
\n\t\t\t\t\t10.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.
\n\t\t\t\n\t\t\t\t\t11.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.
\n\t\t\t\n\t\t\t\t\t12.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.
\n\t\t\t\n\t\t\t\t\t13.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.
\n\t\t\t\n\t\t\t\t\t14.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.
\n\t\t\t\n\t\t\t\t\t16.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.
\n\t\t\t\n\t\t\t\t\t18.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.
\n\t\t\t\n\t\t\t\t\t20.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.
\n\t\t\t\t\t24.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.
\n\t\t\t\t\t30.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.
\n\t\t\t\t\tDonec 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.
\n\n\t\t\t\t\t\t\n\t\t\t\t\t\tMaecenas 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.
\n\n\t\t\t\t\t\tAenean 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.
\n\n\t\t\t\t\t\tNulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean lacinia bibendum nulla sed consectetur.
\n\n\t\t\t\t\t\tNullam 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.
\n\n\t\t\t\t\t\tAenean 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.
\n\n\t\t\t\t\t\tNullam 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.
\n\t\t\t\t\tNullam 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.
\n\t\t\t\t\t\tMaecenas sed diam eget risus varius.
\n\n\t\t\t\t\t\tVestibulum 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.
\n\n\t\t\t\t\t\n\n\t\t\t\t\t\tDuis 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.
\n\n\t\t\t\t\t\tPraesent 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.
\n\n\t\t\t\t\tThe subset of Lovato Light in this kit supports the following languages:
\n\t\t\t\t\t\n\t\t\t\t\tAlbanian, 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\t\t\t\t
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.
\n\t\t\t\tWebfonts 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.
\n\t\t\t\t\t\n\t\t\t\t\tYou must upload your webfont kit to your website. They should be in or near the same directory as your CSS files.
\n\t\t\t\t\t\n\t\t\t\t\tA 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:
\n\t\t\t\t\t\n\t\t\t\t\t\n\n@font-face{ \n\tfont-family: 'MyWebFont';\n\tsrc: url('WebFont.eot');\n\tsrc: url('WebFont.eot?#iefix') format('embedded-opentype'),\n\t url('WebFont.woff') format('woff'),\n\t url('WebFont.ttf') format('truetype'),\n\t url('WebFont.svg#webfont') format('svg');\n}\n\n\n\tWe'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:
\n\t<link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" />\n\n\t\t\t\t\tTo 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:
\np { font-family: 'MyWebFont', Arial, sans-serif; }\n\nGetting 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.
\n\t\t\t\tHaving trouble getting your webfonts to load in your new website? Here are some tips to sort out what might be the problem.
\n\n\t\t\t\t\t\tThis 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.
\n\n\t\t\t\t\t\tThe 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.
\n\n\t\t\t\t\t\tThe 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.)
\n\n\t\t\t\t\t\tAre 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.
\n\n\t\t\t\t\t\tIE9, like Firefox, requires that fonts be served from the same domain as the website. Make sure that is the case.
\n\t\t\t\t\t| 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 |
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.
\n\t\t\t\n\t\t\t\t\t11.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.
\n\t\t\t\n\t\t\t\t\t12.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.
\n\t\t\t\n\t\t\t\t\t13.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.
\n\t\t\t\n\t\t\t\t\t14.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.
\n\t\t\t\n\t\t\t\t\t16.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.
\n\t\t\t\n\t\t\t\t\t18.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.
\n\t\t\t\n\t\t\t\t\t20.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.
\n\t\t\t\t\t24.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.
\n\t\t\t\t\t30.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.
\n\t\t\t\t\t10.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.
\n\t\t\t\n\t\t\t\t\t11.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.
\n\t\t\t\n\t\t\t\t\t12.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.
\n\t\t\t\n\t\t\t\t\t13.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.
\n\t\t\t\n\t\t\t\t\t14.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.
\n\t\t\t\n\t\t\t\t\t16.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.
\n\t\t\t\n\t\t\t\t\t18.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.
\n\t\t\t\n\t\t\t\t\t20.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.
\n\t\t\t\t\t24.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.
\n\t\t\t\t\t30.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.
\n\t\t\t\t\tDonec 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.
\n\n\t\t\t\t\t\t\n\t\t\t\t\t\tMaecenas 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.
\n\n\t\t\t\t\t\tAenean 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.
\n\n\t\t\t\t\t\tNulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean lacinia bibendum nulla sed consectetur.
\n\n\t\t\t\t\t\tNullam 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.
\n\n\t\t\t\t\t\tAenean 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.
\n\n\t\t\t\t\t\tNullam 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.
\n\t\t\t\t\tNullam 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.
\n\t\t\t\t\t\tMaecenas sed diam eget risus varius.
\n\n\t\t\t\t\t\tVestibulum 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.
\n\n\t\t\t\t\t\n\n\t\t\t\t\t\tDuis 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.
\n\n\t\t\t\t\t\tPraesent 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.
\n\n\t\t\t\t\tThe subset of Josefin Slab Bold in this kit supports the following languages:
\n\t\t\t\n\t\t\t\t\tAlbanian, Basque, Breton, Chamorro, Danish, English, Faroese, Finnish, Frisian, Galician, German, Icelandic, Italian, Malagasy, Norwegian, Portuguese, Spanish, Swedish\t\t\t\t
The subset of Josefin Slab Bold 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.
\n\t\t\t\t
 
!
!"
"#
#$
$%
%&
&'
'(
()
)*
*+
+,
,-
-.
./
/0
01
12
23
34
45
56
67
78
89
9:
:;
;<
<=
=>
>?
?@
@A
AB
BC
CD
DE
EF
FG
GH
HI
IJ
JK
KL
LM
MN
NO
OP
PQ
QR
RS
ST
TU
UV
VW
WX
XY
YZ
Z[
[\
\]
]^
^_
_`
`a
ab
bc
cd
de
ef
fg
gh
hi
ij
jk
kl
lm
mn
no
op
pq
qr
rs
st
tu
uv
vw
wx
xy
yz
z{
{|
|}
}~
~ 
¡
¡¢
¢£
£¤
¤¥
¥¦
¦§
§¨
¨©
©ª
ª«
«¬
¬­
®
®¯
¯°
°±
±²
²³
³´
´µ
µ¶
¶·
·¸
¸¹
¹º
º»
»¼
¼½
½¾
¾¿
¿À
ÀÁ
ÁÂ
ÂÃ
ÃÄ
ÄÅ
ÅÆ
ÆÇ
ÇÈ
ÈÉ
ÉÊ
ÊË
ËÌ
ÌÍ
ÍÎ
ÎÏ
ÏÐ
ÐÑ
ÑÒ
ÒÓ
ÓÔ
ÔÕ
ÕÖ
Ö×
×Ø
ØÙ
ÙÚ
ÚÛ
ÛÜ
ÜÝ
ÝÞ
Þß
ßà
àá
áâ
âã
ãä
äå
åæ
æç
çè
èé
éê
êë
ëì
ìí
íî
îï
ïð
ðñ
ñò
òó
óô
ôõ
õö
ö÷
÷ø
øù
ùú
úû
ûü
üý
ýþ
þÿ
ÿ 
 
 
 
 
 
 
 
 
 
 
‐
‐‑
‑‒
‒–
–—
—‘
‘’
’‚
‚“
“”
”„
„•
• 
‹
‹›
› 
◼
◼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.
\n\t\t\t\t\t\n\t\t\t\t\tYou must upload your webfont kit to your website. They should be in or near the same directory as your CSS files.
\n\t\t\t\t\t\n\t\t\t\t\tA 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:
\n\n\n\n@font-face{ \n\tfont-family: 'MyWebFont';\n\tsrc: url('WebFont.eot');\n\tsrc: url('WebFont.eot?#iefix') format('embedded-opentype'),\n\t url('WebFont.woff') format('woff'),\n\t url('WebFont.ttf') format('truetype'),\n\t url('WebFont.svg#webfont') format('svg');\n}\n\n\n\tWe'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:
\n\t<link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" />\n\n\t\t\t\t\tTo 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:
\np { font-family: 'WebFont', Arial, sans-serif; }\n\nGetting 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.
\n\t\t\t\tHaving trouble getting your webfonts to load in your new website? Here are some tips to sort out what might be the problem.
\n\n\t\t\t\t\t\tThis 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.
\n\n\t\t\t\t\t\tThe 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.
\n\n\t\t\t\t\t\tThe 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.)
\n\n\t\t\t\t\t\tAre 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.
\n\n\t\t\t\t\t\tIE9, like Firefox, requires that fonts be served from the same domain as the website. Make sure that is the case.
\n\t\t\t\t\tIt'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.
\n\nAs 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.
\n\nAt 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:
\n\nIf you are interested, then you next steps will likely be to:
\n \n| 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 |
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.
\n\t\t\t\n\t\t\t\t\t11.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.
\n\t\t\t\n\t\t\t\t\t12.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.
\n\t\t\t\n\t\t\t\t\t13.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.
\n\t\t\t\n\t\t\t\t\t14.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.
\n\t\t\t\n\t\t\t\t\t16.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.
\n\t\t\t\n\t\t\t\t\t18.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.
\n\t\t\t\n\t\t\t\t\t20.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.
\n\t\t\t\t\t24.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.
\n\t\t\t\t\t30.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.
\n\t\t\t\t\t10.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.
\n\t\t\t\n\t\t\t\t\t11.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.
\n\t\t\t\n\t\t\t\t\t12.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.
\n\t\t\t\n\t\t\t\t\t13.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.
\n\t\t\t\n\t\t\t\t\t14.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.
\n\t\t\t\n\t\t\t\t\t16.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.
\n\t\t\t\n\t\t\t\t\t18.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.
\n\t\t\t\n\t\t\t\t\t20.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.
\n\t\t\t\t\t24.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.
\n\t\t\t\t\t30.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.
\n\t\t\t\t\tDonec 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.
\n\n\t\t\t\t\t\t\n\t\t\t\t\t\tMaecenas 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.
\n\n\t\t\t\t\t\tAenean 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.
\n\n\t\t\t\t\t\tNulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean lacinia bibendum nulla sed consectetur.
\n\n\t\t\t\t\t\tNullam 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.
\n\n\t\t\t\t\t\tAenean 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.
\n\n\t\t\t\t\t\tNullam 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.
\n\t\t\t\t\tNullam 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.
\n\t\t\t\t\t\tMaecenas sed diam eget risus varius.
\n\n\t\t\t\t\t\tVestibulum 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.
\n\n\t\t\t\t\t\n\n\t\t\t\t\t\tDuis 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.
\n\n\t\t\t\t\t\tPraesent 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.
\n\n\t\t\t\t\tThe subset of Cicle Fina in this kit supports the following languages:
\n\t\t\t\n\t\t\t\t\tAlbanian, Basque, Chamorro, English, Faroese, Galician, German, Icelandic, Italian, Spanish\t\t\t\t
The subset of Cicle Fina 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.
\n\t\t\t\t 
!
!"
"#
#$
$&
&'
'(
()
)*
*+
+,
,-
-.
./
/0
01
12
23
34
45
56
67
78
89
9:
:;
;<
<=
=>
>?
?@
@A
AB
BC
CD
DE
EF
FG
GH
HI
IJ
JK
KL
LM
MN
NO
OP
PQ
QR
RS
ST
TU
UV
VW
WX
XY
YZ
Z[
[\
\]
]^
^_
_`
`a
ab
bc
cd
de
ef
fg
gh
hi
ij
jk
kl
lm
mn
no
op
pq
qr
rs
st
tu
uv
vw
wx
xy
yz
z{
{|
|}
}~
~ 
¡
¡¢
¢£
£¥
¥¦
¦§
§¨
¨ª
ª«
«¬
¬­
°
°±
±²
²³
³´
´¶
¶·
·¹
¹º
º»
»¼
¼½
½¾
¾¿
¿À
ÀÁ
ÁÂ
ÂÃ
ÃÄ
ÄÆ
ÆÇ
ÇÈ
ÈÉ
ÉË
ËÌ
ÌÍ
ÍÎ
ÎÏ
ÏÐ
ÐÑ
ÑÒ
ÒÓ
ÓÕ
ÕÖ
Ö×
×Ø
ØÙ
ÙÚ
ÚÜ
ÜÝ
ÝÞ
Þß
ßà
àá
áâ
âã
ãä
äæ
æç
çè
èé
éê
êë
ëì
ìí
íî
îï
ïð
ðñ
ñò
òó
óô
ôõ
õö
ö÷
÷ø
øù
ùú
úû
ûü
üý
ýþ
þÿ
ÿŒ
Œœ
œŸ
Ÿˆ
ˆ˜
˜ 
 
 
 
 
 
 
 
 
 
 
‐
‐‑
‑‒
‒–
–—
—‘
‘’
’‚
‚“
“”
”„
„•
•…
… 
‹
‹›
› 
€
€™
™◼
◼fi
fifl
flWebfonts 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.
\n\t\t\t\t\t\n\t\t\t\t\tYou must upload your webfont kit to your website. They should be in or near the same directory as your CSS files.
\n\t\t\t\t\t\n\t\t\t\t\tA 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:
\n\n\n\n@font-face{ \n\tfont-family: 'MyWebFont';\n\tsrc: url('WebFont.eot');\n\tsrc: url('WebFont.eot?#iefix') format('embedded-opentype'),\n\t url('WebFont.woff') format('woff'),\n\t url('WebFont.ttf') format('truetype'),\n\t url('WebFont.svg#webfont') format('svg');\n}\n\n\n\tWe'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:
\n\t<link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" />\n\n\t\t\t\t\tTo 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:
\np { font-family: 'WebFont', Arial, sans-serif; }\n\nGetting 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.
\n\t\t\t\tHaving trouble getting your webfonts to load in your new website? Here are some tips to sort out what might be the problem.
\n\n\t\t\t\t\t\tThis 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.
\n\n\t\t\t\t\t\tThe 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.
\n\n\t\t\t\t\t\tThe 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.)
\n\n\t\t\t\t\t\tAre 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.
\n\n\t\t\t\t\t\tIE9, like Firefox, requires that fonts be served from the same domain as the website. Make sure that is the case.
\n\t\t\t\t\t| 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 |
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.
\n\t\t\t\n\t\t\t\t\t11.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.
\n\t\t\t\n\t\t\t\t\t12.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.
\n\t\t\t\n\t\t\t\t\t13.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.
\n\t\t\t\n\t\t\t\t\t14.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.
\n\t\t\t\n\t\t\t\t\t16.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.
\n\t\t\t\n\t\t\t\t\t18.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.
\n\t\t\t\n\t\t\t\t\t20.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.
\n\t\t\t\t\t24.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.
\n\t\t\t\t\t30.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.
\n\t\t\t\t\t10.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.
\n\t\t\t\n\t\t\t\t\t11.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.
\n\t\t\t\n\t\t\t\t\t12.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.
\n\t\t\t\n\t\t\t\t\t13.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.
\n\t\t\t\n\t\t\t\t\t14.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.
\n\t\t\t\n\t\t\t\t\t16.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.
\n\t\t\t\n\t\t\t\t\t18.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.
\n\t\t\t\n\t\t\t\t\t20.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.
\n\t\t\t\t\t24.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.
\n\t\t\t\t\t30.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.
\n\t\t\t\t\tDonec 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.
\n\n\t\t\t\t\t\t\n\t\t\t\t\t\tMaecenas 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.
\n\n\t\t\t\t\t\tAenean 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.
\n\n\t\t\t\t\t\tNulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean lacinia bibendum nulla sed consectetur.
\n\n\t\t\t\t\t\tNullam 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.
\n\n\t\t\t\t\t\tAenean 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.
\n\n\t\t\t\t\t\tNullam 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.
\n\t\t\t\t\tNullam 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.
\n\t\t\t\t\t\tMaecenas sed diam eget risus varius.
\n\n\t\t\t\t\t\tVestibulum 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.
\n\n\t\t\t\t\t\n\n\t\t\t\t\t\tDuis 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.
\n\n\t\t\t\t\t\tPraesent 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.
\n\n\t\t\t\t\tThe subset of Zantroke Regular in this kit supports the following languages:
\n\t\t\t\n\t\t\t\t\tAlbanian, Basque, Breton, Chamorro, Danish, Dutch, English, Faroese, Finnish, French, Frisian, Galician, German, Icelandic, Italian, Malagasy, Norwegian, Portuguese, Spanish, Swedish\t\t\t\t
The subset of Zantroke Regular 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.
\n\t\t\t\t
 
!
!"
"#
#$
$%
%&
&'
'(
()
)*
*+
+,
,-
-.
./
/0
01
12
23
34
45
56
67
78
89
9:
:;
;<
<=
=>
>?
?@
@A
AB
BC
CD
DE
EF
FG
GH
HI
IJ
JK
KL
LM
MN
NO
OP
PQ
QR
RS
ST
TU
UV
VW
WX
XY
YZ
Z[
[\
\]
]^
^_
_`
`a
ab
bc
cd
de
ef
fg
gh
hi
ij
jk
kl
lm
mn
no
op
pq
qr
rs
st
tu
uv
vw
wx
xy
yz
z{
{|
|}
}~
~ 
¡
¡¢
¢£
£¤
¤¥
¥¦
¦§
§¨
¨©
©ª
ª«
«¬
¬­
®
®¯
¯°
°±
±²
²³
³´
´µ
µ¶
¶·
·¸
¸¹
¹º
º»
»¿
¿À
ÀÁ
ÁÂ
ÂÃ
ÃÄ
ÄÅ
ÅÆ
ÆÇ
ÇÈ
ÈÉ
ÉÊ
ÊË
ËÌ
ÌÍ
ÍÎ
ÎÏ
ÏÐ
ÐÑ
ÑÒ
ÒÓ
ÓÔ
ÔÕ
ÕÖ
Ö×
×Ø
ØÙ
ÙÚ
ÚÛ
ÛÜ
ÜÝ
ÝÞ
Þß
ßà
àá
áâ
âã
ãä
äå
åæ
æç
çè
èé
éê
êë
ëì
ìí
íî
îï
ïð
ðñ
ñò
òó
óô
ôõ
õö
ö÷
÷ø
øù
ùú
úû
ûü
üý
ýþ
þÿ
ÿŒ
Œœ
œŸ
Ÿˆ
ˆ˜
˜ 
 
 
 
 
 
 
 
 
 
 
‐
‐‑
‑‒
‒–
–—
—‘
‘’
’‚
‚“
“”
”„
„•
•…
… 
‹
‹›
› 
€
€™
™◼
◼fi
fifl
flffi
ffiffl
fflWebfonts 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.
\n\t\t\t\t\t\n\t\t\t\t\tYou must upload your webfont kit to your website. They should be in or near the same directory as your CSS files.
\n\t\t\t\t\t\n\t\t\t\t\tA 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:
\n\n\n\n@font-face{ \n\tfont-family: 'MyWebFont';\n\tsrc: url('WebFont.eot');\n\tsrc: url('WebFont.eot?#iefix') format('embedded-opentype'),\n\t url('WebFont.woff') format('woff'),\n\t url('WebFont.ttf') format('truetype'),\n\t url('WebFont.svg#webfont') format('svg');\n}\n\n\n\tWe'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:
\n\t<link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" />\n\n\t\t\t\t\tTo 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:
\np { font-family: 'WebFont', Arial, sans-serif; }\n\nGetting 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.
\n\t\t\t\tHaving trouble getting your webfonts to load in your new website? Here are some tips to sort out what might be the problem.
\n\n\t\t\t\t\t\tThis 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.
\n\n\t\t\t\t\t\tThe 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.
\n\n\t\t\t\t\t\tThe 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.)
\n\n\t\t\t\t\t\tAre 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.
\n\n\t\t\t\t\t\tIE9, like Firefox, requires that fonts be served from the same domain as the website. Make sure that is the case.
\n\t\t\t\t\tTacos actually microdosing, pour-over semiotics banjo chicharrones retro fanny pack portland everyday carry vinyl typewriter. Tacos PBR&B pork belly, everyday carry ennui pickled sriracha normcore hashtag polaroid single-origin coffee cold-pressed. PBR&B tattooed trust fund twee, leggings salvia iPhone photo booth health goth gastropub hammock.
\n\nCray food truck brunch, XOXO +1 keffiyeh pickled chambray waistcoat ennui. Organic small batch paleo 8-bit. Intelligentsia umami wayfarers pickled, asymmetrical kombucha letterpress kitsch leggings cold-pressed squid chartreuse put a bird on it. Listicle pickled man bun cornhole heirloom art party.
\n\nBespoke green juice aesthetic leggings DIY williamsburg selvage. Bespoke health goth tote bag, fingerstache venmo ennui thundercats butcher trust fund cardigan. Wolf vinyl you probably haven't heard of them taxidermy, ugh quinoa neutral meditation asymmetrical mixtape church-key kitsch man bun occupy. Knausgaard butcher raw denim ramps, offal seitan williamsburg venmo gastropub mlkshk cardigan chillwave chartreuse single-origin coffee twee. Ethical asymmetrical banjo typewriter fap. Polaroid waistcoat tousled selfies four dollar toast locavore thundercats. Truffaut post-ironic skateboard trust fund.
\n\nTrust fund celiac farm-to-table PBR&B. Brunch art party mumblecore, fingerstache cred echo park literally stumptown humblebrag chambray. Vinyl distillery humblebrag crucifix. Mustache craft beer put a bird on it, irony deep v poutine ramps williamsburg heirloom brooklyn.
\n\nTaxidermy tofu YOLO, sustainable etsy art party stumptown portland. Ethical williamsburg retro paleo. Put a bird on it leggings actually, skateboard jean shorts paleo salvia plaid you probably haven't heard of them.\n \n" }, { "path": "css/styling-text/web-fonts/web-font-finished.css", "content": "/* font imports, generated by transfonter.org */\n\n@font-face {\n font-family: 'ciclefina';\n src: url('fonts/cicle_fina-webfont.woff2') format('woff2'),\n url('fonts/cicle_fina-webfont.woff') format('woff');\n font-weight: normal;\n font-style: normal;\n font-display: swap;\n}\n\n@font-face {\n font-family: 'zantrokeregular';\n src: url('fonts/zantroke-webfont.woff2') format('woff2'),\n url('fonts/zantroke-webfont.woff') format('woff');\n font-weight: normal;\n font-style: normal;\n font-display: swap; \n}\n\n/* General setup */\n\nhtml {\n font-size: 10px;\n margin: 0;\n font-family: sans-serif;\n}\n\nbody {\n width: 80%;\n max-width: 800px;\n margin: 0 auto;\n}\n\n/* Typography */\n\nh1 {\n font-size: 3.2rem;\n}\n\nh2 {\n font-size: 2.4rem;\n}\n\nh1,h2 {\n font-family: 'zantrokeregular', serif;\n letter-spacing: 0.2rem;\n}\n\np {\n font-size: 1.6rem;\n line-height: 1.6;\n letter-spacing: 0.1rem;\n word-spacing: 0.3rem;\n font-family: 'ciclefina', sans-serif;\n}\n" }, { "path": "css/styling-text/web-fonts/web-font-finished.html", "content": "\n\n
\n \n \nTacos actually microdosing, pour-over semiotics banjo chicharrones retro fanny pack portland everyday carry vinyl typewriter. Tacos PBR&B pork belly, everyday carry ennui pickled sriracha normcore hashtag polaroid single-origin coffee cold-pressed. PBR&B tattooed trust fund twee, leggings salvia iPhone photo booth health goth gastropub hammock.
\n\nCray food truck brunch, XOXO +1 keffiyeh pickled chambray waistcoat ennui. Organic small batch paleo 8-bit. Intelligentsia umami wayfarers pickled, asymmetrical kombucha letterpress kitsch leggings cold-pressed squid chartreuse put a bird on it. Listicle pickled man bun cornhole heirloom art party.
\n\nBespoke green juice aesthetic leggings DIY williamsburg selvage. Bespoke health goth tote bag, fingerstache venmo ennui thundercats butcher trust fund cardigan hella. Wolf vinyl you probably haven't heard of them taxidermy, ugh quinoa neutra meditation asymmetrical mixtape church-key kitsch man bun occupy. Knausgaard butcher raw denim ramps, offal seitan williamsburg venmo gastropub mlkshk cardigan chillwave chartreuse single-origin coffee twee. Ethical asymmetrical banjo typewriter fap. Polaroid waistcoat tousled selfies four dollar toast locavore thundercats. Truffaut post-ironic skateboard trust fund.
\n\nTrust fund celiac farm-to-table PBR&B. Brunch art party mumblecore, fingerstache cred echo park literally stumptown humblebrag chambray. Mlkshk vinyl distillery humblebrag crucifix. Mustache craft beer put a bird on it, irony deep v poutine ramps williamsburg heirloom brooklyn.
\n\nTaxidermy tofu YOLO, sustainable etsy flexitarian art party stumptown portland. Ethical williamsburg retro paleo. Put a bird on it leggings yuccie actually, skateboard jean shorts paleo lomo salvia plaid you probably haven't heard of them.
\n \n" }, { "path": "css/styling-text/web-fonts/web-font-start.css", "content": "/* General setup */\n\nhtml {\n font-size: 10px;\n margin: 0;\n font-family: sans-serif;\n}\n\nbody {\n width: 80%;\n max-width: 800px;\n margin: 0 auto;\n}\n\n/* Typography */\n\nh1 {\n font-size: 3.2rem;\n}\n\nh2 {\n font-size: 2.4rem;\n}\n\np {\n font-size: 1.4rem;\n line-height: 1.6;\n word-spacing: 0.6rem;\n}" }, { "path": "css/styling-text/web-fonts/web-font-start.html", "content": "\n\n \n \n \nTacos actually microdosing, pour-over semiotics banjo chicharrones retro fanny pack portland everyday carry vinyl typewriter. Tacos PBR&B pork belly, everyday carry ennui pickled sriracha normcore hashtag polaroid single-origin coffee cold-pressed. PBR&B tattooed trust fund twee, leggings salvia iPhone photo booth health goth gastropub hammock.
\n\nCray food truck brunch, XOXO +1 keffiyeh pickled chambray waistcoat ennui. Organic small batch paleo 8-bit. Intelligentsia umami wayfarers pickled, asymmetrical kombucha letterpress kitsch leggings cold-pressed squid chartreuse put a bird on it. Listicle pickled man bun cornhole heirloom art party.
\n\nBespoke green juice aesthetic leggings DIY williamsburg selvage. Bespoke health goth tote bag, fingerstache venmo ennui thundercats butcher trust fund cardigan hella. Wolf vinyl you probably haven't heard of them taxidermy, ugh quinoa neutra meditation asymmetrical mixtape church-key kitsch man bun occupy. Knausgaard butcher raw denim ramps, offal seitan williamsburg venmo gastropub mlkshk cardigan chillwave chartreuse single-origin coffee twee. Ethical asymmetrical banjo typewriter fap. Polaroid waistcoat tousled selfies four dollar toast locavore thundercats. Truffaut post-ironic skateboard trust fund.
\n\nTrust fund celiac farm-to-table PBR&B. Brunch art party mumblecore, fingerstache cred echo park literally stumptown humblebrag chambray. Mlkshk vinyl distillery humblebrag crucifix. Mustache craft beer put a bird on it, irony deep v poutine ramps williamsburg heirloom brooklyn.
\n\nTaxidermy tofu YOLO, sustainable etsy flexitarian art party stumptown portland. Ethical williamsburg retro paleo. Put a bird on it leggings yuccie actually, skateboard jean shorts paleo lomo salvia plaid you probably haven't heard of them.
\n \n" }, { "path": "css/styling-text/web-fonts/zantroke/SIL Open Font License.txt", "content": "Copyright (c) 2011, gluk (gluksza@wp.pl),\nwith Reserved Font Zantroke.\n\nThis Font Software is licensed under the SIL Open Font License, Version 1.1.\nThis license is copied below, and is also available with a FAQ at: http://scripts.sil.org/OFL\n\n-----------------------------------------------------------\nSIL OPEN FONT LICENSE Version 1.1 - 26 February 2007\n-----------------------------------------------------------\n\nPREAMBLE\nThe 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.\n\nThe 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.\n\nDEFINITIONS\n\"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.\n\n\"Reserved Font Name\" refers to any names specified as such after the copyright statement(s).\n\n\"Original Version\" refers to the collection of Font Software components as distributed by the Copyright Holder(s).\n\n\"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.\n\n\"Author\" refers to any designer, engineer, programmer, technical writer or other person who contributed to the Font Software.\n\nPERMISSION & CONDITIONS\nPermission 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:\n\n1) Neither the Font Software nor any of its individual components, in Original or Modified Versions, may be sold by itself.\n\n2) 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.\n\n3) 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.\n\n4) 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.\n\n5) 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.\n\nTERMINATION\nThis license becomes null and void if any of the above conditions are not met.\n\nDISCLAIMER\nTHE 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." }, { "path": "html/forms/basic-input-examples/index.html", "content": "\n\n \n \n \n{{say}} {{to}}
\n \n \n" }, { "path": "html/forms/styling-examples/appearance-tester.html", "content": "\n\n \n \n \n
Add comment
\n\n \n\nComments
\n\n\n\n- \n\n
\n\n
\n\nBob Fossil
\n\nOh 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.
\n\n