Using Fonts.com Web Fonts with Blogger.com
This is the first in a series of articles about using Fonts.com Web Fonts in popular web authoring sites. I'll start with blogger.com.
There are two ways to specify fonts on your web site. One way is to create a style sheet on the Fonts.com Web Fonts portal. The other way is to specify them directly using font-family. You can use one or the other – or both at the same time.
Start by navigating to your Fonts.com Web Fonts account at www.webfonts.fonts.com. If you haven't done it already, create a project for your blog, add your blog's domain (i.e. http://yourblog.blogspot.com/ and choose the fonts you'll use. If you are planning to use the style sheet method, assign them to selectors. You can use the handy 'CSS Sucker' tool to extract your selectors if needed (for more detail, see our blog post entitled "Fonts.com Web Fonts Adds CSS Sucker and Import/Export Features"). If you're not sure about which selectors affect which pieces of your text, use (for example) the 'Inspect Element' feature of the Firebug plug-in for Firefox. Once your style sheet is all set (and even if you are not using the style sheet method), save it by pressing "save changes and update style sheet". Now head over to the 'Publish' tab. Choose your publishing option, click on 'Select code', and copy your code.
Log in to Blogger.com and click on 'Design' to get to your blog's design page. Choose 'Edit HTML'. You'll want to save a copy of your template in case you mess things up. Now, in the 'Edit Template' box, locate the string "". Paste the code before the statement. Save it away, refresh and you should see the effects of your style sheet changes. If not, give it a couple minutes – sometimes the CDN needs some time to propagate your changes.
You can now use the font-family property as you 'Edit HTML' on Blogger.com. The Fonts.com Web Fonts 'Publishing' page tells you the font-family names to use:
- ·20 Houses. A New Residential Landscape exhibition, Wallpaper* Architects Directory
- ·Top 100 Fonts.com Web Fonts for May 2016
- ·Cocoa Marsh Instant Fudge Candy Mix packaging
- ·The Future of Sex poster
- ·Food Not Bombs hypothetical redesign
- ·Japanese Typography Writing System
- ·Bevésett nevek (Carved Names), vol. 2
- ·How to Read a Painting by Patrick de Rynck
- ·Antropofagia. Palimpsesto Selvagem
- ·Königsblut identity
游客's review on Article Billboard.com这个Billboard.com网站的字体是啥字体
lwhzyn's review on Article HZ-GB-2312系统好像缺少字库，看看能不能下载
游客's review on Article 2017年设计师绝对不能错过的手写字体搭配的挺好看，这些字体是免费商用的么
¤月映丹心∴'s review on Article 毛笔字体进化论怎么下载法？
糖果's review on Article 25个能让设计师用一辈子的字体免费用吗
游客's review on Article 三星发布自主字体SamsungOne：全平台通用哪里可以下载三星字体