Web Foundations TUESDAY, OCTOBER 29, 2013 LECTURE 20: EMBEDDING WEB FONTS.

Slides:



Advertisements
Similar presentations
Getting Familiar with Web Pages 1 2 The Internet Worldwide collection of interconnected computer networks that enables businesses, organizations, governments,
Advertisements

What is Multimedia ? Multi ( Multiple ) and Media ! So…. Information in multiple formats, including text, images, audio, video and animation :) It makes.
Font Usage on the Web. Used to be true that … Normally end users can only see the fonts that are already installed on their computers. Normally end users.
Session Objectives Setting the font family Setting the font size Working with Web fonts Setting font faces and sizes Setting font and text appearances.
Week 3.  – now is the time.
Internet Research Internet Applications. The Internet is not the Web Because of the great popularity of the World Wide Web, people think the Internet.
3.02 Publishing Animations
Video Streaming in Flash CSCI 4220 – Network Programming Kacper Harabasz.
CIS101 Introduction to Computing Week 05. Agenda Your questions Exam next week - Excel Introduction to the Internet & HTML Online HTML Resources Using.
Introduction to SVG & Batik Presented by Shang-Ming Huang.
SVG Scalable Vector Graphics. What is SVG? SVG stands for Scalable Vector Graphics SVG is used to define vector-based graphics for the Web SVG defines.
Introduction to HTML 2004 CIS101. What is the Internet? Global network of computers that are connected and communicate via a series of Protocols Protocols.
2.02 Understand Digital Vector Graphics
ESRM 250 & CFR 520: Introduction to GIS © Phil Hurvitz, KEEP THIS TEXT BOX this slide includes some ESRI fonts. when you save this presentation,
Vector Graphics 2.02 Understand Digital Vector Graphics.
CIS101 Introduction to Computing Week 06. Agenda Your questions Excel Exam during second hour Our status after the snow day Introduction to the Internet.
Boris Tshibangu. What is a proxy server? A proxy server is a server (a computer system or an application) that acts as an intermediary for requests from.
LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE HTML and CSS 8th Edition Chapter 13: Working with Web Fonts.
Web Design Basic Concepts.
Introductory Meeting. Why are we here? RIP FrontPage Versions prior to 2003 will not work with Windows7 No longer supported by Microsoft You can still.
Week 5 HTML5 and Video + Web Fonts. Video and HTML5 Until now, there has not been a standard for showing a video/movie on a web page. In the past most.
Google Confidential & Proprietary Best Practices for Reducing HTML5 File Size Q
Week 6.  Browser DOCTYPE switching What it means for you  – now is the time  CSS3 Web design for the 21 st Century.
Computer Concepts 2014 Chapter 7 The Web and .
1 Networks and the Internet A network is a structure linking computers together for the purpose of sharing resources such as printers and files Users typically.
Neal Stublen Font Limitations  Browsers can only display the fonts installed on the device Arial, Verdana, Times, Georgia  Custom.
Using Styles and Style Sheets for Design
Ajax Technology for the Web Nic Shulver, FCET, Staffordshire University Introduction What is it? Pros and Cons Why is it important? Traditional Client-Server.
2.02G Publishing Animated Videos 2.02 Develop Computer Animations.
Lights, Camera, Action! The Role of Multimedia in Web Applications Leading Multimedia Formats in Use Today What You Need to Know to Include Them in Your.
An Introduction To Building An Open Standard Web Map Application Joe Daigneau Pennsylvania State University.
PACS - 09/19/15 1 favicon A ‘Favorite icon’ is a file containing one or more small icons associated with a particular website or web page. Web browsers.
School of Computer Science & Information Technology G6DPMM - Lecture 17 Scaleable Vector Graphics.
Chapter 13-Tools for the World Wide Web. Overview Web servers. Web browsers. Web page makers and site builders. Plug-ins and delivery vehicles. Beyond.
Class three: CSS review, backgrounds, font formatting, the box model.
Audio and Video on the Web Presentation by Cheryl Deas and Pasha Souvorin Multimedia for Web Designers.
Generating HTML Format Reports for Travel Demand Models May 18, 2009 Chunyu Lu Gannett Fleming, Inc.
Introduction to Interactive Media Interactive Media Components: Text.
Streaming Media A technique for transferring data on the Internet so it can be processed as a steady and continuous stream.
OceanBrowser viewing service, overview and upgrades Alexander Barth (1), Charles Troupin (2), Aida Alvera Azcárate (1), Jean-Marie Beckers (1) (1) University.
File Formats Different applications (programs) store data in different formats. Applications support some file formats and not others. Open…, Save…, Save.
SVG & INKSCAPE Student Talk: Erica Weiss DIG 4104c Spring 2014.
Introduction to Multimedia Review 1 - Lecture Notes Semester 1.
UPLOAD / DOWNLOAD april  HTML5 is just the next iteration of HTML  Previous version was technically HTML 4.01, which incorporated XHTML 1.0.
XML and SVG as an Aid to Distance Learning Lez Bullwer MSc Information Technology.
I can make a link to video and audio clips from other applications I can use hyperlinks for shortcuts to pages on the internet or for video and audio.
Web Based Systems for Engineering and Management Professors Iris D. Tommelein and Arpad Horvath Fall 2000.
Web FONT Nasser Hadjloo Hadjloo.ir.
Computer Graphics Unit 23 Computer Graphics. Computer Graphics Computer generated imagery can be categorized into several different types: Vector or Bitmap.
Future Web Trends Brian Kelly UK Web Focus UKOLN University of Bath UKOLN is funded by Resource: The Council for Museums, Archives.
Web Design and Development. World Wide Web  World Wide Web (WWW or W3), collection of globally distributed text and multimedia documents and files 
HTML5 & CSS3 A Practical Guide. HTML5 is more than HTML5 HTML5 Spec CSS3 Spec Web Fonts JavaScript to tie it all together.
Styling Fonts & Text CHAPTER 4 1 CHARLES WYKE-SMITH: STYLIN’ WITH CSS: A DESIGNER’S GUIDE (3 ND EDITION)
Understanding Web-Based Digital Media Production Methods, Software, and Hardware Objective
Internet Searching the World Wide Web. The Internet and the World Wide Web The Internet is a worldwide collection of networks that allows people to communicate.
GeoSpatial Analysis UNICEF Security Advisors Workshop 20 October 2010.
TEI 工作坊 TEI and Images October The Concept.
File Formats Different applications (programs) store data in different formats. Applications support some file formats and not others. Open…, Save…, Save.
Digital Illustration Chapter 6 File format.
3.02 Publishing Animations
HTML5 Application Development Fundamentals
2.02G Publishing Animated Videos
2.02F Publishing Animated Videos
CSS – Properties & Values
Chapter 3 – part2.
Web Development Standards
EXPLORING THE INTERNET
ATLAS WEB Web Typography.
Presentation transcript:

Web Foundations TUESDAY, OCTOBER 29, 2013 LECTURE 20: EMBEDDING WEB FONTS

Web "Safe" Fonts Serif Font Families

Web "Safe" Fonts Serif Font Families

Web "Safe" Fonts Monospace Font Families

Web/Browser Specific "Embedded" Fonts ttf [ wikipedia ] otf [wikipedia] wikipedia True Type Font and Open Type Font are normal old fonts developed by Apple and Microsoft used in the 1980s and used in most computer operating systems and applications, but some people got annoyed that this meant anyone could download and use them. Support for ttf and otf can be checked at eot [wikipedia]wikipedia Embedded Open Type fonts were designed by Microsoft for use as embedded fonts by web pages. These font files can be created from existing TrueType font files using Microsoft's Web Embedding Fonts Tool (WEFT), and other proprietary and open source software (lile ttf2eot).WEFTttf2eot eot is needed for Internet Explorers that are older than IE9 but eot is an "unfriendly" format that strips out much of the original font features. Support for eot can be checked at

Web/Browser Specific "Embedded" Fonts woff [wikipedia]wikipedia Web Open Font Format was developed during 2009 and is a World Wide Web Consortium (W3C) Recommendation. WOFF is essentially OpenType or TrueType with compression and additional metadata. The goal is to support font distribution from a server to a client over a network with bandwidth constraints. It also has a mode that prevents people from pirating the font. Support for woff can be checked at svg [ wikipedia ] wikipedia Scalable Vector Graphics is an XML-based vector image format for two-dimensional graphics that has support for interactivity and animation. The SVG specification is an open standard developed by the World Wide Web Consortium since iOS on the iPhone and iPad implemented svg fonts. Support for svg can be checked at

Web Fonts DEMO Google FontsGoogle Fonts

Web Fonts DEMO 1001 Free Fonts1001 Free Fonts DEMO Font Squirrel Web Font GeneratorFont Squirrel Web Font Generator DEMO Font 2 WebFont 2 Web Font to Web Font Converters Microsoft WEFT (ttf to eot) Microsoft WEFT TTF2EOT (ttf to eot) TTF2EOT Batik (ttf to svg) Batik Font2Web (ttf/oft to ttf, otf,.eot, woff, svg) Font2Web

@font-face The "standard" way of Rule What ? What ? The Essential Guide The Essential Guide Rule Revisted and Useful Web Font Tricks Rule Revisted and Useful Web Font { font-family: 'BebasNeueRegular'; src: url('BebasNeue-webfont.eot'); src: url('BebasNeue-webfont.eot?#iefix')format('embedded-opentype'), url('BebasNeue-webfont.woff') format('woff'), url('BebasNeue-webfont.ttf') format('truetype'), url('BebasNeue-webfont.svg#BebasNeueRegular') format('svg'); font-weight: normal; font-style: normal; }

Web Font Links 1001 Free Fonts (ttf fonts) 1001 Free Fonts Google Fonts Google Fonts A Beginner's Guide to Using Google Web Fonts A Beginner's Guide to Using Google Web Fonts Font 2 Web Font 2 Web Quick guide to Web Fonts Quick guide to Web Fonts Installing Web Fonts Start to Finish Installing Web Fonts Start to Finish How to Fonts How to Fonts Font Squirrel Web Font Generator Font Squirrel Web Font Generator Adobe Edge Web Fonts Adobe Edge Web Fonts Adobe Typekit Adobe Typekit Font Deck Font Deck Open Font Library Open Font Library