Join Chris Converse for an in-depth discussion in this video Using web fonts with your HTML email, part of Creating a Responsive HTML Email.
Now another thing you might want to use inside of your HTML email is custom fonts.…Now, it's not recommended that you use…fonts that require JavaScript to be loaded,…but there are some font services out there that will supply fonts through CSS tag.…So for this demonstration, let's go over to Google fonts.…Google fonts are free, and they offer a CSS solution to adding fonts.…And you can find this at google.com/fonts.…So on this main screen, I'm going to come over here to All categories.…Let's click this, and I'm going to turn…off all the options except for Handwriting.…I want sort of a scripty font to match the curls on the stem of the grapes.…
So I'll come down here and let's choose Parisienne.…Next to the name, I'm going to click on Quick Use On this page, let's scroll down.…Then here we can see some tabbed panels that…show us a standard, and that import, and JavaScript option.…We want the add import option here.…Let's come down here and copy this line of code.…Let's go back to our HTML email.…Now, to use an add import, we need to put this inside of this CSS area.…
Author
Chris Converse
Updated
12/3/2014Released
8/30/2013This course was created and produced by Chris Converse. We are honored to host this content in our library.
- Creating the graphics
- Setting up the base layout structure
- Styling the table rows for the headline, banner, etc.
- Creating buttons
- Adding CSS media queries
- Styling the content
- Incorporating animation and web fonts
- Validating your code
- Testing in various email clients
Skill Level Beginner
Duration
Views
Q: What are the sizes of the images used in this course?
Q: This course was updated on 11/26/2013. What changed?
A: We added two new movies to Chapter 5, "Adding HTML5 video into HTML email" and "Encoding and embedding base64 images."
Q: This course was updated on 12/03/2014. What changed?
A: We added one bonus movie, "Using high-definition graphics in your HTML email."
-
Introduction
-
What you should know1m 31s
-
1. Creating the Graphics
-
2. Creating the HTML Email
-
3. Creating Buttons with HTML and CSS
-
4. Adding CSS to the Email
-
5. Pushing the Envelope
-
Adding inbox preview text1m 39s
-
-
6. Validation and Testing
-
Validating your HTML code1m 42s
-
-
Conclusion
-
Where to go from here1m 5s
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
Press 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.
Share this video
Embed this video
Video: Using web fonts with your HTML email