Importing additional Fonts to SmugMug - Tomasz Nowicki Photography

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.

Powered by SmugMug Log In