Using
a Custom Font that isn't on Google Web Fonts
Some of the good places
to find free fonts are DaFont, FontSquirrel and UrbanFonts.
Click to download the kit (unzip it if necessary), and save the TFF or OFT file
on your desktop.
Step 1: Convert the Font File
The font file that
you've downloaded is most likely in a TFF or OFT file since this is the most
popular type. You need to convert this file into a @Font-Face kit. Many online
services can help you do this, but here are two recommended sites:
If you are using the Font Squirrel Webfont Generator: press the "Add Fonts" button, choose the font file that you saved on your desktop and check the "Yes, the fonts I'm uploading are legally eligible for web embedding." checkbox. After the font has been successfully uploaded, click the "Download your kit" button.
This should open the kit containing 4 formats of fonts (inside the fonts folder), a CSS stylesheet & the html file for the demo page. The only files that you need to extract are the ones with the .woff, .tff, .svg, .eot extension and the stylesheet.css file.
Step 2: Upload The Font Files To Blogger
Custom fonts in Blogger
have to be uploaded before you can use them. For this, we are going to use Dropbox and upload them to Public folder (upload only the files with the .woff, .tff, .svg and .eot extension).
Once you've uploaded them, copy the Public URL's of all 4 fonts: right click on each file, choose "Copy public link..." and press the "Copy to clipboard" button. Paste each link separately in a Notepad, so that you can link to that location later.
Next, open up the stylesheet.css file that came with the kit and it
will show you a similar code:
/* Generated by Font Squirrel (http://www.fontsquirrel.com) on September 2, 2014 */
@font-face {
font-family: 'fontname';
src: url('font-name.eot');
src: url('font-name.eot?#iefix') format('embedded-opentype'),
url('font-name.woff') format('woff'),
url('font-name.ttf') format('truetype'),
url('font-name.svg#fontname') format('svg');
font-weight: normal;
font-style: normal;
}
Edit the link location to point toward the font
file that you just uploaded to the Dropbox Public folder and pay attention to
each extension which should correspond with that found in the stylesheet.css
file.
For example, if you uploaded the font .tff file with this name:
For example, if you uploaded the font .tff file with this name:
https://dl.dropboxusercontent.com/u/62316253/amatic-bold-webfont.ttf
...change the CSS link in blue in this line:
url('font-name.ttf') format('truetype'),
to point to:
url('https://dl.dropboxusercontent.com/u/62316253/amatic-bold-webfont.ttf') format('truetype'),
After you've added all
the links, copy the stylesheet.css code that you modified to your clipboard.
Step 3: Editing Blogger's CSS
Open up the CSS on your Blogger site. This can
be found by navigating to Template > Edit HTML. Next, click inside the code
area and press the CTRL + F keys to open the search box, then type the tag
below and hit Enter to find it:
]]></b:skin>
Just ABOVE this tag,
add the code that you copied in the stylesheet.css file.
Finally, we need to declare the custom font using CSS. For example, if I want to change the font of the post title, I will add the line in red from above, just below the "h3.post-title, .comments h4 {" CSS selector:
h3.post-title, .comments h4 {font-family: 'fontname';
font-size: 28; }
Obviously, the fontname will be the actual name
of the font. This will make sure that your blog can use the custom fonts in
Blogger. After we've made these changes, press the "Save Template"
button and exit.
Step 4: Test Out the
Site
Navigate back to your
sites homepage and you should now see the custom fonts in Blogger that you
uploaded during the last few steps. Every time you go to make a new post, the
site will now be able to use your font.
In Conclusion:
Website design is an important part to maintain
a successful blog. As a blog owner, you are responsible for providing content
that isn't just fun to read, but looks good. Modifying the font is just one
easy way that you can help your blog stand out without making any major changes
to your blog itself.
Do you have any other methods for adding custom fonts? Let us know by leaving a comment below!
Do you have any other methods for adding custom fonts? Let us know by leaving a comment below!
0 comments:
एक टिप्पणी भेजें