Change font in text content block

LoveLula

Hi all,

im new to the Smugmug and web design.

I would like to change font on one page (http://www.lovelulaphotography.co.uk/Pages/LoveLetters) for my content text block but im not sure how to do this. Would you be able to point me to the right direction how can I do this?

Thanks
Greg

Hikin' Mike

You need to read this so you can add extra fonts: http://www.dgrin.com/showpost.php?p=1909438&postcount=8

Then when you've got your font CSS, you need to add this to your CSS:

.sm-user-ui .sm-page-widget-content {
	font-family: your font here;
	}

What font do you want to use?

Hikin' Mike

If you're using non-Google fonts, you can read about how to use them here: http://gallery.imagesinthebackcountry.com/Smugmug-customization/Adding-Fonts

LoveLula

Hi Mike,

Thank you for your advise. That worked for me but it change font for menu as well. Is there a way to leave menu font as it is on all pages?


Thanks

Edit: Got it I changed .sm-widget-content to .sm-widget.text and that worked for me.

Allen

LoveLula wrote: »

Hi Mike,

Thank you for your advise. That worked for me but it change font for menu as well. Is there a way to leave menu font as it is on all pages?


Thanks

Edit: Got it I changed .sm-widget-content to .sm-widget.text and that worked for me.

This narrows the CSS change to only this page and the center area.

.sm-page-node-g952NR .sm-page-layout-region-center .sm-page-widget-text {
font-family: your font here;
}

Every page whether a page, folder or gallery has a unique class name.
.sm-page-node-XXXXXX

LoveLula

Hi all,

Ok, I have managed to change fonts from google fonts but when I'm trying to use custom font that I have uploaded to OneDrive its not working. I have followed this guide (http://gallery.imagesinthebackcountry.com/Smugmug-customization/Adding-Fonts) but couldn't get it working for some reason. Below I have pasted my CSS codes.

Would you mind to have a look and let me know what I did wrong? (Just in case the link to my page (http://www.lovelulaphotography.co.uk/Pages/LoveLetters)

Thanks a lot.

@font-face {
font-family: 'Tangerine';
font-style: normal;
font-weight: 400;
src:
url(http://themes.googleusercontent.com/static/fonts/tangerine/v3/HGfsyCL5WASpHOFnouG-RPY6323mHUZFJMgTvxaG2iE.eot?#iefix) format('embedded-opentype'),
url(http://themes.googleusercontent.com/static/fonts/tangerine/v3/HGfsyCL5WASpHOFnouG-RLO3LdcAZYWl9Si6vvxL-qU.woff) format('woff'),
url(http://themes.googleusercontent.com/static/fonts/tangerine/v3/HGfsyCL5WASpHOFnouG-RCZ2oysoEQEeKwjgmXLRnTc.ttf) format('truetype');
}

@font-face {
font-family: 'Featherly';
font-style: normal;
font-weight: 400;
src:
url(https://1drv.ms/u/s!AjenTlAENED6g9tsEk5Kqz6pxsWSCQ?#iefix) format('embedded-opentype'),
url(https://1drv.ms/u/s!AjenTlAENED6g9txLnVkH6V3j_vSFQ) format('woff'),
url(https://1drv.ms/u/s!AjenTlAENED6g9tuP1KJ2pX6S23aSQ) format('truetype');
}

.sm-user-ui .sm-page-widget-text {
font-family: 'Featherly';
}

LoveLula

ok i think i found the reason why its not working.

Timestamp: 11/07/2016 22:32:56
Error: downloadable font: download failed (font-family: "Featherly" style:normal weight:normal stretch:normal src index:2): bad URI or cross-site access not allowed source: https://1drv.ms/u/s!AjenTlAENED6g9tuP1KJ2pX6S23aSQ
Source File: http://cdn.smugmug.com/css/skin/p/219153/1468271549-91a7cb20c54f972a17df756413807cc6.css
Line: 13, Column: 12
Source Code:
@font-face { font-family: "Featherly"; font-style: normal; font-weight: 400; src: url("https://1drv.ms/u/s!AjenTlAENED6g9tsEk5Kqz6pxsWSCQ?#iefix") format("embedded-opentype"), url("https://1drv.ms/u/s!AjenTlAENED6g9txLnVkH6V3j_vSFQ") format("woff"), url("https://1drv.ms/u/s!AjenTlAENED6g9tuP1KJ2pX6S23aSQ") format("truetype"); }

Is there any workaround that I can do?

Hikin' Mike

LoveLula wrote: »

Is there any workaround that I can do?

Not familiar with OneDrive, but when I clicked one one of the font URL's it said 'not found'. You might try using 'DropBox', but I've never tried it.

If you own your domain, you might be able to create a sub-domain of your site and then upload the fonts there? As an example "fonts.lovelulaphotography.co.uk" then you can FTP the fonts there.