Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Jason Hernandez Berland
1,575 PointsHow do you incorporate custom fonts?
I have some font licenses I purchased and want to incorporate them in this project. What's the best practice for custom fonts?
Do I want to download the fonts? If you download, how do you adjust this line:
<link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,100italic' rel='stylesheet' type='text/css'>
Or should I upload the fonts to dropbox and point the href there?
<link href='https://www.dropbox.com/s/4lcd2hnzq11x82o/Lightyear-Regular.otf?dl=0' rel='stylesheet' type='text/css'>
3 Answers
Ron McCranie
7,837 PointsThe first thing with fonts is to know exactly what is allowed by the license you have. Most fonts purchased do not allow you to how them on a site and use them as a web font. I searched 'Lightyear-Regular.otf' and it looks like the #1 result is Creative Market. I looked at their license and it doesn't look like it permits using a purchased font as a web font.
If you are able to use it based on the licensing then you have some options on getting them on your site but the easiest and most widely supported method can be found on css-tricks.
Basically you upload them to your server and include them at the top of your css file using @font-face. You could use Dropbox but it could be inconsistent, therefore I would suggest putting them on a proper webserver.
Brett Smith
4,261 PointsTake a look at this post from CSS tricks.
Jason Hernandez Berland
1,575 PointsThanks Brett Smith
Jason Hernandez Berland
1,575 PointsHey Ron McCranie and/or Brett Smith, can not get this custom font to appear in WorkSpaces
Removed this line from the index.html since I am not using Google Fonts and dragged the .otf directly on WorkSpaces: <link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,100italic' rel='stylesheet' type='text/css'>
Added this code you sent me to the main.css. Changed the .eot, .woff, and .ttf to .otf. Was that a mistake?: @font-face {
font-family: 'LightyearFont';
src: url('Lightyear-Light.otf'); /* IE9 Compat Modes */
src: url('Lightyear-Light.otf') format('embedded-opentype'), /* IE6-IE8 */
url('Lightyear-Light.otf') format('woff'), /* Modern Browsers */
url('Lightyear-Light.otf') format('truetype'), /* Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
body {
font-family: 'Lightyear-Light', sans-serif;
h1 {
font-family: 'Lightyear-Light', sans-serif;
margin: 15px 0;
font-size: 1.75em;
font-weight: lighter;
line-height: 0.8em;
Where did I f up?
Brett Smith
4,261 PointsWhere is your font located? If your font isn't located in the same folder as your main CSS folder you need to specify.
Take a look at this answer on stack overflow: http://stackoverflow.com/questions/8626075/path-to-folder-outside-of-folder
Let me know if this helps.
Jason Hernandez Berland
1,575 PointsJason Hernandez Berland
1,575 PointsThanks Ron McCranie. Just checked out the license. It's a SimpleLicense:
"The SimpleLicense gives you the right to use any item purchased on Creative Market in a personal or commercial project for yourself or a client, but the item cannot be resold or redistributed on its own, or used in a product offered for sale where the item contributes to the core value of the product being sold."
When you say "upload them to server", would that mean uploading to WorkSpaces? Right now, I'm on the Web Design track and not using my own server yet.