Adding non-Google Fonts to Your SmugMug Site - Prints for Sale

Adding non-Google Fonts to Your SmugMug Site

If you’re looking for a way to add more Google Fonts to your SmugMug site, here is a great tutorial: Use Additional Google Fonts.

You can add non-Google fonts to your SmugMug site too. I used Font Squirrel to create my own @font-face kit. SmugMug doesn’t have an option to upload fonts, so you need upload your new fonts online. I have a non-SmugMug site too, so I upload them to my other website, but you can probably use Dropbox.

Once you’ve upload your font(s) you need to add this to your Theme’s CSS infact, I tried to add a CSS Block to “Just This Page”, but it didn’t work. For this example I created a class called .karate-font and put my text in there.

CSS


	/* Fonts */
@font-face {
    font-family: 'KarateMedium';
    font-weight: normal;
    font-style: normal;
    src: url('http://www.YourWebsiteHere.com/fonts/karate-webfont.eot'),
		 url('http://www.YourWebsiteHere.com/fonts/karate-webfont.eot?#iefix') format('embedded-opentype'),
         url('http://www.YourWebsiteHere.com/fonts/karate-webfont.woff') format('woff'),
         url('http://www.YourWebsiteHere.com/fonts/karate-webfont.ttf') format('truetype'),
         url('http://www.YourWebsiteHere.com/fonts/karate-webfont.svg#KarateMedium') format('svg'),
		 local('Karate Medium'),	
		 local('Karate-Medium');
	}
	
.karate-font {
	font-family: 'KarateMedium' !important;
	}	

HTML


<div class="karate-font"><p>This is a font called “Karate”.</p></div>

The Results:

This is a font called “Karate”.

ActionActionAltAdjustAlertAlert2AngleBracketDownAngleBracketLeftAngleBracketLeftSlimAngleBracketRightAngleBracketRightSlimAngleBracketUpic AspectRectable 18dpic AspectSquare 18dpBrowserCalendarCameraPhotoCameraPhoto2CameraVideo2CartCart2CartAddCartAdd2CheckmarkCommentComment2CreditCardCropDesktopDownloadDownload2EditEdit2EmailEmail2FlagFlag2FolderFolder2FolderOpenFullScreenGalleryGallery2GearHeartHeartOutlinedHelpHelpEncircledHideHistoryHistory2HomeHome2ImageImage2InfoInfoEncircledInfoEncircled2LaptopLayoutLinkLockLock2MenuMenu2MinusMinusSlimMobileMoreHorizMoreVertPagePage2PausePlayPlusPlusSlimPrinterSearchSearch2ShareSizesStarStarOutlinedSyncTabletTagTrashTrash2UploadUpload2UserUsersVideoCameraViewWarningWrenchXCrossActionActionAltAddAdjustAlertAlert2AmazonAndroidAppleArrowBackArrowNextBrowserCameraPhotoCameraPhoto2CartCart2CartAddCheckCloseCommentComment2CropCursorMoveDesktopDownloadDropboxFacebookFlickrFolderFolder2FullScreenSlimGalleryGallery2GoogleDriveGooglePhotosHelpEncircledHelpEncircled2HistoryHistory2HomeHome2InfoEncircledInfoEncircled2LaptopLayoutLightroomLinkLockLock2MenuMobileMoreHorizMoreVertNavigateBackNavigateNextPaintPausePeoplePeople2PersonPerson2PhoneSavePlayPrinterRemoveSearchSettingsSettings2ShareSharePrivateSizesSmugMugStarStar2TabletTrashTrash2TwitterUploadUpload2Wrench Page 1Page 1 CopyCombined ShapeCombined ShapeCombined ShapeCombined ShapetemplatestemplatesEZprints-98404-landscapeEZprints-98404-portraittemplatestemplatesEZprints-98406-landscapeEZprints-98406-portraitEZprints-98407-landscapeEZprints-98407-portraittemplatestemplatestemplatestemplatesEZprints-98416-landscapeEZprints-98416-portraitEZprints-98417-landscapeEZprints-98417-portraitEZprints-98418-landscapeEZprints-98418-portraitEZprints-98419-landscapeEZprints-98419-portraitshared-style-defs
Powered by SmugMug Log In