Importing additional Fonts to SmugMug - Tomasz Nowicki Photography and Web Design

IMPORTING ADDITIONAL FONTS TO SMUGMUG

October 12, 2015


!!!THIS TUTORIAL HAS BEEN MOVED HERE!!!

If you are like me and like making your SmugMug site look unique - then you have already been thinking about how to customise your SmugMug site to make it look different.  The great starting point is to use different fonts.

SmugMug uses Google fonts which are great - but everybody uses them and everybody knows them { although there are hundreds of them }.  The other reason for this tutorial is that SmugMug offers only 2 fonts to be imported into the theme section - in most cases this is enough but in other situations it is not sufficient.

TIP:  Importing too many fonts can slow the loading time of your site - so make sure that you keep a balance - 1 or 2 custom fonts should be enough.

I have divided this tutorial into three sections:

   - picking your new font;

   - uploading your font to DROPBOX;

   - embedding your new font to your SmugMug site and applying it to a TEXT content block; 


PART I - CHOOSING YOUR NEW FONT

I am a huge fan of a font service called FONTSQUIRREL - it is a place where I go to find new fonts which I use on my designs.  They offer loads of paid fonts - as well as plenty of free fonts. 

For this tutorial I have picked a completely different font to what I have on my website - so you can see the difference straight away.

The font that I have picked is LEARNING CURVE PRO and this is how it looks:

"HERE is Edward Bear, coming downstairs now, bump, bump, bump, on the back of his head, behind Christopher Robin. It is, as far as he knows, the only way of coming downstairs, but sometimes he feels that there really is another way, if only he could stop bumping for a moment and think of it. And then he feels that perhaps there isn't. Anyhow, here he is at the bottom, and ready to be introduced to you. Winnie-the-Pooh."
From: Winnie the Pooh

After you have picked your font - open the WEBFONT KIT tab, where you will be able to generate all the files that we will need for our project.

Make sure that TTF, EOT, WOFF and SVG files are selected and then click the DOWNLOAD @FONT-FACE KIT button.

The download process will start and you will end up with a zip file that you will need to unarchive.

Now we will move to the second section of the tutorial. 


PART II - PREPARING YOUR FONT FILES AND UPLOADING THEM TO DROPBOX

In order to continue with this tutorial - you will need to have a DROPBOX account - if you do not have one - you can open one using this LINK.  You do not need a paid version of DROBOX - the free version is more than enough for this purpose.

Place the unpacked folder with your font files in the PUBLIC folder on your DROPBOX account and open the SYLESHEET.CSS file in a text editor - the code will look like this:


@font-face { font-family: 'learning_curve_dashed_proRg'; src: url('LearningCurveDashed_OT-webfont.eot'); src: url('LearningCurveDashed_OT-webfont.eot?#iefix') format('embedded-opentype'), url('LearningCurveDashed_OT-webfont.woff') format('woff'), url('LearningCurveDashed_OT-webfont.ttf') format('truetype'), url('LearningCurveDashed_OT-webfont.svg#learning_curve_dashed_proRg') format('svg'); font-weight: normal; font-style: normal; }

All the items that I have highlighted in the code above you will need to replace with the links to the font files that you have saved on your DROPBOX account.

For each of the font types TTF, EOT, WOFF and SVG you have to generate a PUBLIC LINK from your DROPBOX account [ right click on one of the font files → COPY PUBLIC LINK ] as shown on the animation.

Paste the public link for each font type to the CSS code.  Your code should look something like this:


@font-face { font-family: 'learning_curve_dashed_proRg'; src: url('https://dl.dropboxusercontent.com/u/10270090/fonts/learningcurvepro_regular_macroman/LearningCurve_OT-webfont.eot'); src: url('https://dl.dropboxusercontent.com/u/10270090/fonts/learningcurvepro_regular_macroman/LearningCurve_OT-webfont.eot?#iefix') format('embedded-opentype'), url('https://dl.dropboxusercontent.com/u/10270090/fonts/learningcurvepro_regular_macroman/LearningCurve_OT-webfont.woff') format('woff'), url('https://dl.dropboxusercontent.com/u/10270090/fonts/learningcurvepro_regular_macroman/LearningCurve_OT-webfont.ttf') format('truetype'), url('https://dl.dropboxusercontent.com/u/10270090/fonts/learningcurvepro_regular_macroman/LearningCurve_OT-webfont.svg#learning_curve_dashed_proRg') format('svg'); font-weight: normal; font-style: normal; }

PART III - EMBEDDING YOUR NEW FONT AND APPLYING IT TO TEXT

Copy the whole code that you have just edited and open your SmugMug account  → click CUSTOMIZE → CONTENT AND DESIGN → THEME → ADVANCED tab → scroll to the CSS section and click EDIT.

This will open a small CSS editor where you will need to PASTE the code.  Make sure that you are doing this on the theme, which is applied to the ENTIRE SITE section of your site.

Now add a TEXT CONTENT block to your site and add some text to it.  The last thing you will need to add to your page is a CSS content block which you will use to assign your new font to the text on your page.


p { font-family: 'learning_curve_dashed_proRg'; }

Once the font is imported to your site - you can use it on any element on your site HEADERS, NAVIGATION, LABELS etc.  You just need to find the ID tag for the item that you want to target with the new font.

  • jameywarner

    on January 10, 2017

    Mark/Lawless: Try the below to apply the font you've added to the Menu/Sub-menus

    /* Change the navbar fonts */
    .sm-page-widget-nav-toplink, .yui3-menu-item .yui3-menu-label,
    .sm-page-widget-nav-toplink > a {
    font-family: 'YOUR FONT NAME HERE';

    }

  • Mark Iandolo

    on August 20, 2016

    I made it through this entire tutorial until the end. I can't figure out how to get the font I installed to work for the website's "heading" font. I've been able to place in photo titles, all body text, etc. But I can't figure out how to use it for my website's title in the header, as well as the other places the default header font shows up .

  • Lawless

    on July 17, 2016

    Hey Tomasz, I followed your instructions but Im unsure of the last part. What do you mean by: " You just need to find the ID tag for the item that you want to target with the new font." ? I am trying to use the font in the main header but in theme/advanced I dont see it in the list of fonts. Also my dropbox links dont look like yours. They are shortened. They look like this: https://www.dropbox.com/s/y11uybr3sjksfuo/. Does this matter? Thx

  • Tomasz Nowicki

    on May 8, 2016

    Hi Glenn as far as I know - dropbox will not harm your computer. You may want to check your antivirus settings.

  • Glenn Fritzsche

    on May 8, 2016

    Hi guys, Ive been trying to follow along here however the LINK for the dropbox tells me that this kind of dropbox can harm my computer...Im a bit leary about this. Im on a iMac desktop I just purchased. Any insight to this? Thank you, Glenn

  • Kris Miller

    on February 19, 2016

    Here is the site incase you were curious: https://ublibraries.smugmug.com

  • Kris Miller

    on February 19, 2016

    I actually already sent it in, Kaydin is the contact. I actually tried to copy and paste your @font-face css code (all 3 of them) into my template and it also removed them.

  • Tomasz Nowicki

    on February 19, 2016

    Kris when you write to SmugMug - please write attn TOM - I am a support hero too :} So I will be able to check this for you.

  • Kris Miller

    on February 19, 2016

    I thought so too, but I've gotten each individual font to work. But if I try to add them all, they get removed. Weird. I have a ticket in with SmugMug. Thanks for the post on using Dropbox for the fonts.

  • Tomasz Nowicki

    on February 19, 2016

    Kristopher, I do not think so. I have used multiple fonts in the past and they worked. Maybe something is wrong with your code?

Powered by SmugMug Owner Log In