SHD Studio

Add custom fonts to Blogger

Adding Custom Fonts to Blogger can improve the look and feel of your blog. Before getting into font embedding lets know how this works.

In your templates you can use any font you want, but these would be properly displayed only if the viewer has those fonts installed on his/her System. Font embedding Techniques allows you to use any font on your Blog and these fonts will be view-able to the viewers even if they don’t have the font installed in their Systems.

You can see a list of available Fonts at the Google Font Directory .

1. Select any font and then copy its Embed Code provided by Google.
2. Now go to your Blogger Dashboard > Template > Edit HTML page.
3. Find <head> and immediately below that line paste the Embed Code and edit it by changing '>' at the end of the code to '/>' (i.e, /css'/>)
4. Save your template.

You can also add multiple custom fonts in your template. When you use multiple Custom Fonts, then there is no need to add the Google CSS embed codes multiple times.You can load multiple fonts using a single line of code. For example if you are planning to use 3 custom Fonts Tangerine, Inconsolata, Droid Sans, then you can load all these three fonts using a single embed code

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine|Inconsolata|Droid+Sans"/>

i.e, just separate the multiple fonts by a '|' (line= shift + \ )

Now to apply these fonts on your template, you can use these in your template CSS. For example you may use something like:

h3.post-title {font-family: 'Tangerine', serif;}
#header h1 {font-family: 'Inconsolata', serif;}
.sidebar h2 {font-family: 'Droid Sans', serif;}

If you have any doubts regarding Font Embedding, please let me know via the comments and I will try to help you out.

[GUEST POST] - How to use Photoshop Curves + a freebie

Hi everyone my name is Noor and Amna asked me to be a guest poster for today so I have put together a post that I thought you all may like as well as a freebie to go along with it. Today were going to be talking about Photoshop curves. If you’re wondering what a curve is well it’s a preset that alters the total range of an image. Curves are created using the curve tool in the Photoshop and are one the best and most powerful tools and by far one of the favorites when it comes to photos. Curves play with the contrast and light of an image which can really give it a complete new and fun look.

Today I am giving away a free curve to each one of you. This curve is ‘floral beauty’ and I named it that for a reason because it makes florals beautiful. This curve was made for and is best used on outdoor images such as the ones I have provided in my sample. It works great with an image that has a lot of green in it as it draws out more of blues. This curve will give your image a nice old film look which as you already know is pretty popular right now.

So maybe you’re wondering how you can even use curves. Sure let’s get to that now!

MAC users:

1. Open Photoshop and the picture you want to edit
2. Press command + m to open the curves window
3. Open the little box next to the "presets" bar
4. Choose the option "load preset", and find the curve you downloaded

Window users:

1. Open Photoshop and the picture you want to edit
2. Press command + m to open the curves window
3. Press the "load" button
4. Find your downloaded curve and press "ok"

I hope that you all enjoyed this tutorial and that you all enjoy the free curve that comes along with it. I would love to see how your images turn out when you use it.

Noor AlQahtani is a designer, freelance writer and blogger.

Images in Text

I am very excited to share one of my favorite trick to add image on texts in Photoshop. Follow the steps carefully for an awesome result. This technique is so versatile and can be used to give your blog, pictures and layout that extra spark to really set your design apart from others! I mean how pretty is that!?