Hello again Design Cutters!
Jo here with little bonus for you this week! You’ve already had a couple of tutorials for some inspiration on how to use the resources in the current 30 Best Selling Creative Fonts (With Web Fonts and Extended Licensing) deal, which we hope you’re enjoying.
One of the great features of this bundle is the inclusion of desktop fonts and webfonts allowing you to utilise them not just to make your print/graphic designs stand out, but your web designs too.
After several community members asked about exactly how to use the web fonts available in this bundle, we decided to put together a helpful guide, for all you guys who are new to working with web fonts. There’s no need to be intimidated or put off from using web fonts, and as this guide will show you, they’re quite easy to use once you understand the basics.
Ok, lets get started!
There is a full text version of this tutorial below, but I’ve also put together a short video walking you through each step of the process. You’ll be using your new web fonts in no time :).
Step 1: Select your webfonts
Here we have our basic webpage:
As you can see, it could do with a little webfont love to liven it up.
The first step is to decide which fonts you want to use (there’s a list of resources on how to match fonts in ‘Step 9’ in my previous tutorial). In this example we’re going to use ‘Atlas Slab’ and ‘Polly’ as our fonts:
Once you’ve decided on the font, navigate to the webfonts folder within it, and you should see something like this:
You’ll notice there are a variety of different formats that webfonts come in:
WOFF
Stands for: Web Open Font Format
WOFF fonts were created specifically for web use, and often load faster than other formats because they use a compressed version of the structure used by OpenType (OTF) and TrueType (TTF) fonts. This format is generally preferred because it can also include metadata and license info within the font file itself.
SVG / SVGZ
Stands for: Scalable Vector Graphics (Font)
An SVG is a vector re-creation of the font, which makes it a smaller file size, and is also great for mobile use. This format is the only one allowed by version 4.1 and below of Safari for iPhone. Currently SVG fonts are not supported by Firefox, IE or IE Mobile. SVGZ is a zipped version of SVG.
EOT
Stands for: Embedded Open Type
This format was created by Microsoft and is the only format that IE8 and below will recognize when using @font-face (we’ll cover this in Step 3) within a stylesheet.
OTF / TTF
Stands for: OpenType Font and TrueType Font
Although being phased out in preference for WOFF, OpenType has the capability to include swashes, ligatures and alternate characters, which is a bonus for many designers.
Although you may be able to get away with just using the .woff file, if you want to be as requirements of different web browsers, as each have limitations as to what file types they can support.
Once you’ve decided on and found the webfonts you want to use, we’re ready to move on to the next step…
Step 2: Uploading your webfonts
The next thing we need to do is to get the webfont files on to your website’s server either via FTP or File Manager if you use cPanel (I’ll be using cPanel in this tutorial). Let’s take a look what’s already there:
Ignoring the cgi-bin folder, we’ve got our html file and css file. We need to upload our webfont files within the same directory as our css (this helps reduce the chance of problems and errors occurring):
Once you have your files in uploaded in the right place, we need to edit our css stylesheet to assign our webfonts to the text…
Step 3: Modifying your css file with @font-face
With your files in the right place, the first thing you need to do is update your css file to let browsers know where they can find the webfonts. We do this by using the @font-face declaration.
Let’s take a look at our css stylesheet as it stands:
body {
background-color: white;
padding: 2%;}
h1 {
color: #1F1F1F;}
p {
color: #1F1F1F;
line-height: 120%;}
So far, no specific fonts have been specified for the header (h1) and paragraph text (p), so all text is displayed at the browser’s default font and size, which is usually less than inspiring! :p
Let’s start taking some control of how we want our fonts to look. At the very top of your stylesheet, type or copy and paste:
@font-face {
font-family: 'My Webfont';
src: url('mywebfont.eot'); /* IE9 Compat Modes */
src: url('mywebfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('mywebfont.woff') format('woff'), /* Modern Browsers */
url('mywebfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('mywebfont.svg#svgFontName') format('svg'); /* Legacy iOS */}
If you’re not used to css, this may look a little scary – but don’t worry! Once you’ve pasted this text in to your stylesheet, the modifications you need to make are very simple:
1. Where is says font-family: ‘My Webfont’; change ‘My Webfont’ to the name of the font you’re using. In this case ‘Atlas Slab’ (you could call it anything you want, we’re using the font name here because it makes most sense. You could use an abbreviation if you wanted.)
So:
font-family: 'My Webfont';
Becomes:
font-family: 'Atlas Slab';
2. Where it says url(‘mywebfont.eot’);, you need to change ‘mywebfont’ to the name of the font exactly as it’s typed in the original webfont file we uploaded earlier:
So:
url('mywebfont.eot');
Becomes:
url('atlas_slab-webfont.eot');
It’s extremely important that you make sure the file names match exactly to the original files – double-check capital letters, underscores and hyphens.
Update the name for all the files, so that:
Becomes:
Note: What we’ve just updated is the location of the webfont files. If you uploaded the files to a directory that’s different to where your css file is located, you’ll need to specify the directory too (eg: url(‘webfonts/atlas_slab-webfont.eot’);)
Once you’ve added the @font-face declaration to your css file for your webfonts, we can apply them to our text!
Step 4: Modifying our css file to display the webfonts
Our css file should now look like:
@font-face {
font-family: 'Atlas Slab';
src: url('atlas_slab-webfont.eot'); /* IE9 Compat Modes */
src: url('atlas_slab-webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('atlas_slab-webfont.woff') format('woff'), /* Modern Browsers */
url('atlas_slab-webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('atlas_slab-webfont.svg#svgFontName') format('svg'); /* Legacy iOS */}
body {
background-color: white;
padding: 2%;}
h1 {
color: #1F1F1F;}
p {
color: #1F1F1F;
line-height: 120%;}
We now want to specify which text we want to apply the webfonts to. In this case, we want our header text to use ‘Atlas Slab’. Let’s specify this by updating our h1 style, adding the line:
font-family: 'Atlas Slab';
This needs to be the the same name we specified earlier in ‘font-family:’ in the @font-face declaration. Our header style now looks like:
h1 {
color: #1F1F1F;
font-family: 'Atlas Slab';}
Make sure you save the file, then let’s take a look at our site:
“Yeah Webfonts” indeed! We’ll tweak this slightly by specifying a size that displays the font at its best (this will vary font-to-font). Add the line:
font-size: 40pt;
to your h1 style, so it looks like this:
h1 {
color: #1F1F1F;
font-family: 'Atlas Slab';
font-size: 40pt;}
The result is much better! :)
Step 5: More fonts!
Since we now have a very funky looking header, it’d be nice to style our paragraph text too. Adding webfonts will increase the load time of your sites, so do choose carefully to create the most impact :)
Following the steps as before, we’ll add the ‘Polly’ webfont to our site:
1. Choose your webfont and locate the files:
2. Upload the webfont files to the same directory as your css file:
3. Add the @font-face declaration to your css and specify the webfont and file names (Note: each new webfont requires its own ‘@font-face’ declaration):
4. Apply the fonts to your css, specifying the font size as necessary:
5. Save the files and admire your webfonts!
And we’re done!
Hopefully this tutorial showed you how to get started using the webfonts which are included in this huge bundle. If you’ve got any questions, please leave a comment below and I’ll keep an eye out over the next few days and do my best to help :).
Remember, you can get this deal for 97% off this week! Grab it below, while you still can:
30 Best Selling Creative Fonts (With Web Fonts and Extended Licensing)
Thanks for this, very helpful! Unfortunately though for some reason the web fonts won’t work for me on mobile :(
Any ideas?
Thanks
Infant, it’s only working on my desktop as I had the font installed. When I de-activate the font on my computer it then doesn’t work online at all :(
Resolved! Sorry, all to do with the path to the fonts!
Hey Mark,
Thank you so much for your comments and we are so glad to hear that this is working for you now :)
As always though if there was ever anything I could assist you with, please do get in touch- I’m always happy to help!
Hello!
I’ve been struggling with @font-face for days just unable to make it work! This video cleared EVERYTHING up for me and I’ve got my fonts up and running on my site. Thank you, thank you for being thorough and concise- this is just made my day :-)
Also, it’s nice to see a woman delivering the info!
Thanks again!
Hey Daniela,
Thanks for the comment! We are so pleased that you enjoyed the tutorial and that you were able to get working with your fonts :).
Your email has actually made our day over here Daniela so thank you! if you ever do have any questions, please let us know- we are always here and happy to help!
Many thanks Jo for this most interesting tutorial.
I came across a WP plugin which might do the trick.
It is called “Use Any Font”
https://wordpress.org/plugins/use-any-font/
Do you think it is usable for that collection of fonts ?
Many thanks again
Hey Serge,
Thank you so much for getting in touch with your kind words and for your suggestion! We really appreciate you taking the time :) We don’t currently work with any plugins like this and would always recommend this tutorial for your webfonts but I will certainly pass this over to our technical team to see if this could work.
Thank you again for your feedback, Serge! If you had any other suggestions please do let me know. It would be great to hear from you :)
Hey there, is this the updated tutorial based on the above comment …
Is there another way to do this without @font-face? I just read this off their website…
I just want to know before I start following these instructions
Thank you and very thorough tutorial! Love having the video and the text.
Hey Noelle,
Thank you so much for getting in touch with your query, I can certainly assist you with this :)
I’m pleased to report that this tutorial is completely up to date so you should be good to go! We would always recommend working with @font-face but if you do expirience any issues please do let me know and I will happily lend a hand :)
I hope this helps, Noelle, and please don’t hesitate to contact me should you have any other questions. I’m always happy to help!
Yes Jo Fallon!
Thanks for your instructions . A “style” folder where to put css and fonts is much simple. This help me a lot than adding ../ for going out from the “css” folder. Example: “../fonts/font-name.woff”.
Place include this video link into the installation file: Important-Installing-your-fonts.txt
Brilliant putting everything together on such short video !
Alan Mattanó
Hey Alan,
Thank you so much for your incredibly kind words! It’s so great to hear Jo’s tutorial was a big help in getting you set up with your web fonts :)
If you do have any questions or if there is ever anything myself or the team could assist you with please do get in touch. We’re always happy to help!