LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE HTML and CSS 8th Edition Chapter 13: Working with Web Fonts.

Slides:

Advertisements

Similar presentations

3.02D HTML Overview 3.02 Develop webpages.

Advertisements

HTML I. HTML Hypertext mark-up language. Uses tags to identify elements of a page so that a browser such as Internet explorer can render the page on a.

Cascading Style Sheets (CSS). Cascading Style Sheets With the explosive growth of the World Wide Web, designers and programmers quickly explored and reached.

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.

Chapter 3 – Designing your web pages Dr. Stephanos Mavromoustakos.

Introduction to CSS.

CSW131 Steven Battilana 1 CSW 131 – Chapter 5 (More) Advanced CSS Prepared by Prof. B. for use with Teach Yourself Visually Web Design by Ron Huddleston,

Chapter 8 Creating Style Sheets.

Web Design with Cascading Style Sheet Lan Vu. Overview Introduction to CSS Designing CSS Using Visual Studio to create CSS Using template for web design.

Tutorial 3 Introducing Cascading Style Sheets. XP New Perspectives on Blended HTML, XHTML, and CSS2 Objectives Learn about Cascading Style Sheets Write.

Objective Understand web-based digital media production methods, software, and hardware. Course Weight : 10%

Week 7 Web Typography. 2 Understanding Type Design Principles.

Introduction to Cascading Style Sheets (CSS) Module 2: HTML Basics LESSON 4.

Using Cascading Style Sheets CSS Structure. Goals Understand how contextual, class and ID selectors work Understand how contextual, class and ID selectors.

Chapter 1 Understanding the Web Design Environment

LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE HTML and CSS 8th Edition Chapter 21: Publishing Your Pages on the Web.

Using Cascading Style Sheets (CSS) Dept. of Computer Science and Computer Information CSCI N-100.

With Alex Conger – President of Webmajik.com FrontPage 2002 Level I (Intro & Training) FrontPage 2002 Level I (Intro & Training)

Designing a Classroom Web Site Using NVU Beginning Level.

LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE HTML and CSS 8th Edition Chapter 2: Working with Webpage Files.

Getting Started with Dreamweaver

 Using Microsoft Expression Web you can: › Create Web pages and Web sites › Set what you site will look like as you design it › Add text, images, multimedia.

XHTML and CSS Introduction to XHTML and CSS Bharti Patel 1 phones off (please)

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.

Chapter 11 Cascading Style Sheets: Part I The Web Warrior Guide to Web Design Technologies.

Different ways to implement CSS. There are four different ways to use CSS in your web pages: – Inline CSS – Embedded CSS/Internal CSS – Linked CSS/External.

Copyright © Texas Education Agency, All rights reserved. 1 Web Technologies Website Development with Dreamweaver.

Cascading Style Sheets (CSS) 1.  What is CSS?  Why CSS?  How to write a CSS? 2.

Chapter 7 Web Typography Principles of Web Design, 4 th Edition.

HTML Web Authoring Tonya L. DeZarn Janice Thompson Juana Wallace.

Creating an Expression Web Site

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

INTRODUCTION TO FRONTPAGE. TOPICS TO BE DISCUSSED……….  Introduction Introduction  Features Features  Starting Front Page Starting Front Page  Components.

CSS Sprites. What are sprites? In the early days of video games, memory for graphics was very low. So to make things load quickly and make graphics look.

CHAPTER 3 Working with Templates and Styles. CHAPTER OBJECTIVES  Create an Expression Web site from a template  Rename a page  Rename a folder  Add.

Chapter 2 Developing a Web Page. A web page is composed of two distinct sections: –The head content –The body Creating Head Content and Setting Page Properties.

Programming in HTML.  Programming Language  Used to design/create web pages  Hyper Text Markup Language  Markup Language  Series of Markup tags 

Chapter 12 Cascading Style Sheets: Part II The Web Warrior Guide to Web Design Technologies.

Section 4.1 Format HTML tags Identify HTML guidelines Section 4.2 Organize Web site files and folder Use a text editor Use HTML tags and attributes Create.

Programming in HTML.  Programming Language  Used to design/create web pages  Hyper Text Markup Language  Markup Language  Series of Markup tags 

Web Page Design. Some Terms Cascading Style Sheet, (CSS) –a style sheet language used to describe the look and formatting of a document written in html;

Just A Few More Fun Objectives 1 Having Some Fun With Java Script 2 Using Style Sheets.

Cascading Style Sheets Orientation Learning Web Design: Chapter 11.

Tutorial 5 Formatting with CSS. Objectives Session 5.1 – Evaluate why CSS styles are used – Determine where to write styles – Create an element selector.

Tutorial #3 Cascading Style Sheets. Tutorial #2 Review - Anchors Links to Site DMACC Internal Links Go to Top Mail To me Local.

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

UPLOAD / DOWNLOAD april  HTML5 is just the next iteration of HTML  Previous version was technically HTML 4.01, which incorporated XHTML 1.0.

INTRODUCTION TO CSS. TOPICS TO BE DISCUSSED……….  Introduction Introduction  Features of CSS Features of CSS  Creating Style Sheet Creating Style Sheet.

LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE HTML and CSS 8th Edition Chapter 8: Working with Style Sheets.

Introduction to CSS. What is CSS? CSS ("Cascading Style Sheets") determines how the elements in our XHTML documents are displayed and formatted. By using.

Cascading Style Sheets

CHAPTER 4 CREATING STYLES AND LAYOUTS WITH CSS. CHAPTER OBJECTIVES Create ID-based styles Position content with CSS Format text with CSS Identify CSS.

Cascading Style Sheets Primary readings Presentations Explain & review projects with class mates.

Working with DIV Structures, CSS, Webfonts and Templates 9/16/2015Web Development and Interactive Media.

Creating Web Pages with Links, Images, and Embedded Style Sheets

Tutorial #1 Using HTML to Create Web Pages. HTML, XHTML, and CSS HTML – HyperText Markup Language The tags the browser uses to define the content of the.

XP New Perspectives on Creating Web Pages With Word Tutorial 1 1 Creating Web Pages With Word Tutorial 1.

Internet & World Wide Web How to Program, 5/e Copyright © Pearson, Inc All Rights Reserved.

What is CSS? A set of style rules that tell the web browser how to present a web page or document. – In earlier versions of HTML, style characteristics,

Introduction to CSS.

Introduction to CSS.

CSS – Properties & Values

Objective Understand web-based digital media production methods, software, and hardware. Course Weight : 10%

Introduction to Cascading Style Sheets (CSS)

Introduction to CSS.

Made By : Lavish Chauhan & Abhay Verma

5.00 Apply procedures to organize content by using Dreamweaver. (22%)

Presentation transcript:

LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE HTML and CSS 8th Edition Chapter 13: Working with Web Fonts

LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Objectives Use web fonts on webpages. Work rule. Choose between web font file formats. Understand the legal issues around licensing fonts. Find web fonts. Download web fonts. Work with multiple web fonts. Style web fonts and manage file sizes. Add italic and bold to web fonts.

LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Working with Web Fonts

LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE What Is a Web Font? Web font: A font on a server for use in a CSS rule allows CSS to link to a web font on a server for use in a webpage. Web fonts have been around since 1998, but it was nearly a decade before browsers supported them.

LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Web Font File Formats and Browser Support Embedded OpenType (.eot): Web font file format used by IE8 and earlier TrueType (.ttf) and OpenType (.otf): Standard font file types used for desktop computers. Scalable Vector Graphics (.svg): Format used in special situations where other formats aren’t supported, such as earlier versions of mobile Safari. Web Open Font Format (.woff): Newer, widely- supported standard designed for use as a web font. –TrueType or OpenType font that has been compressed.

LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Legal Issues browsers can link to and download a font, whether purchased or not. Make sure fonts are properly licensed for the web. –Most foundries and font services offer licensing with purchase or à la carte. –Information often mentioned on foundry’s website. –When in doubt, contact foundry to see what they allow. Alternatively, restrict fonts to free ones. –Free fonts available at Font Squirrel’s generator.

LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Managing File Size Web fonts need to be downloaded to the user’s computer before they can be rendered on the webpage, slowing down the website considerably, especially for mobile users. Be prudent when choosing web fonts, and look for ways to consolidate your font choices.

LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Subsetting Subsetting is a way to trim the size of the actual font by including only the characters you know you will use. You can also select language-specific subsets for many fonts.

LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Where to Find Web Fonts Two options for using web fonts in a website: self- hosting and web font services. –Both are perfectly valid, but quite different options. –Not all web fonts are available everywhere. May require finding a close substitute or rethinking approach. It pays to be flexible and to weigh all your options before committing to a direction.

LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Self-Hosting Self-hosting web fonts: Fonts that are served up from own server. –More traditional approach. –One-time purchase. –Up to you to upload font files and include code on site. Some of the more popular ones are: –Font Squirrel –MyFonts –The League of Moveable Type –FontShop

LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Font Squirrel

LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Web Font Services Web font services: Subscriptions to web fonts. –Pay monthly or annually for rights to use fonts. –Services hosts the font. –Gives a piece of JavaScript or CSS code for webpages. –Cheaper than purchasing fonts outright. Offer more features than self-hosting. –Everything is hosted on the server, including font files. –Services can easily upgrade font files and code. Some popular web font services: Typekit, Fontdeck, Fonts.com, WebINK, and Google Fonts.

LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Google Fonts

LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Icon Fonts and Where to Get Them Icon fonts are web fonts that have icons instead of letters, numbers, and punctuation. You can style them with the same CSS you use for styling text. No matter what font-size value you use, an icon font will scale nicely and look sharp, making them a better option than icon images.

LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Web Font Quality and Rendering There can be noticeable differences in how web fonts look across web browsers. –Some fonts just don’t look good in earlier versions of Internet Explorer. Some fonts look better at some sizes than at other sizes. They might be too frail and become difficult to read when used for body text, or lack authority at heading size. When selecting fonts, do your best to vet potential web fonts by examining how they will look in a variety of browsers.

LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Downloading Your First Web Font Downloading a free web font is quick and easy. Font Squirrel even provides a demo.html file for you to see how these fonts look in action.

LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE To Download a Web Font from Font Squirrel Go to Font Squirrel ( From the font’s page, choose Webfont Kit. Deselect the SVG option under Choose Font Formats. Choose the subset for the font. Click the KIT button, and your download should begin. Once the download is finished, open the ZIP archive. Your folder should contain at least one web font file (likely more), plus three other files.

LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE PT Sans Fontface Kit

LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE To View the Selected Fonts in the demo.html File Open the demo.html file from the downloaded font in your browser. This demo file shows that the web font works.

LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Understanding syntax is different from traditional CSS. –Doesn’t follow traditional format of selector followed by property/value pairs. rule sets up a tool that can be used by the rest of CSS. This rule doesn’t affect the style of any specific element, but does allow web fonts for CSS. First line is for font family. –Establishes name for this particular web font. Next few lines tell browser where font files live. –Include font file formats that give support to all different browsers that support web fonts.

LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Styling Text with a Web Font There are a few methods for using web fonts in a style sheet. One is the way Font Squirrel does it, as shown in stylesheet.css and demo.html. Other way reflects how you style text with regular fonts, is easier to manage, and provides the appropriate fallback if the web font fails to load. –Potential limitation: If you use more than a total of four weights and styles of a single web font family—not of all web font families in your page—Internet Explorer 6–8 might convert certain weights to regular (normal) weight.

LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE To Use a Web Font to Style Text Open the stylesheet.css file that you downloaded from Font Squirrel. If it includes rule for regular text, copy and paste it into your style sheet, and save the file. Copy the font files from the Font Squirrel folder to the folder that contains your style sheet. Rename the font-family value so its name is generic to the font. Create rules to style text elements as desired.

LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Copy Font Files to Folder that Contains the Style Sheet

LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Applying Italics and Bold with a Web Font Web fonts come in only one weight and one style per font file. To use bold or italic, you need to create rules for them, each referencing their own web font. Otherwise, the browser may apply faux bold or faux italic.

LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE To Apply Italic with a Web Font Open the stylesheet.css file from Font Squirrel. If it includes rule for italic text, copy and paste it into your style sheet. Copy the italic font files from the Font Squirrel folder to the folder that contains your style sheet. Rename the font-family value in the italic face rule so it is the same as in the rule for regular text. Change font-style value in the italic rule to font-style: italic. Save your changes.

LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE To Apply Bold with a Web Font Follow steps 1–3 for applying italic, but paste rule for bold text into your style sheet and copy the bold font files to your folder. Rename the font-family value in the bold face rule so it is the same as in the other rules for the font. Change the font-weight value in the bold face rule to font-weight: bold. Save your changes.

LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Italic and Bold with a Web Font

LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE To Apply Bold Italic with a Web Font Follow steps 1–3 for applying italic, but paste rule for bold italic text into your style sheet and copy the bold italic font format files to your folder. Rename the font-family value in the bold face rule so it is the same as in the other rules for the font. Change the font-weight value in the bold italic rule to font-weight: bold. Also, change the font-style value to font-weight: italic. Save changes.

LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Bold Italic with a Web Font Faked effectProper font

LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Using Web Fonts from Google Fonts Google Fonts is one of several web font services that host the web fonts for you. It saves you the trouble of creating or modifying rules. It has become a popular choice because it’s free, has hundreds of fonts, and allows you to add a web font to your page in less than a minute once you know how it works.

LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE To Use a Web Font from Google Fonts To use a web font from Google Fonts: –Browse for a font. Select Add to Collection. –Scroll to the bottom of the page and click Use. –Select only the weights and styles you intend to use. –Select only the character sets your content requires. –Copy link element code and paste into head of webpage. –Style your text with web font by using the font-family name specified by Google Fonts. Set the font-weight to one of the weights you selected. If it’s an italic web font, set font-style: italic; in your CSS rule as well. –Save your HTML page and style sheet.

LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE The Glory of Web Fonts