There are browser default styles for fonts, but you can use CSS to change that. In this video, learn how to update your projects to customize the font family and font-size.
- [Instructor] The first thing we'll do in this exercise…is update the font family.…So I have my project file open in the browser…and the Google Font site.…I'll be using two fonts,…Open Sans and Caveat.…Since I already know which fonts I want to use,…I'll just do a search for them,…in the search bar on the top right hand corner.…Open Sans,…click the plus icon to add it to my collection,…and Caveat.…
Your fonts are added to a collection…in this bottom drawer.…Click the bar to open the drawer…and copy the standard embed link.…This should look familiar…since it's using the same link tag…we use to add our CSS file.…This snippet will actually link to Google Style Sheet,…and this is how the font families…are loaded onto our webpage.…So copy that entire line and go back to your editor,…and let's add it to the head section…of our index.html file.…Back in your text editor,…add the code snippet to the head section of your index file…and put it right before the styles.css file.…
This way it will load first…before it loads our custom style sheet.…
- Creating a CSS file
- Writing basic selectors
- Setting properties
- Using different typefaces and web-safe fonts
- Understanding cascading and inheritance
- Setting a font family, font size, text color, and more
- Understanding the box model
- Using the float property
Skill Level Beginner
1. Getting Started
2. CSS Core
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.