10 Free Fonts for your Website

steps-to-create-a-logo

On our last post, we have shown how to create a logo with a very simple tool. The visual impact of a business is always quite important since it is the first the that the majority of the people pay attention to.

And when it comes to create a website it's vital to pay attention to the small visual details that will create a major impact on the user. One of the things that we think it´s quite important to get the best of the visual impact of your website is the type of font.

Always bear in mind that the font used will be carrying your message to the readers of your website, so it needs not only to look good but also needs to be pleasant to be read.

We will go through a few types of fonts that you could be using on your website in order to make it really appeal for the users. All the fonts we chose are free to be downloaded for free on Google Fonts.

And at the end of this article we also show you how to change the font with our editor.

1. Rosario

Rosario is a very simple and straightforward font, is described as a classic semi-serif typeface. This font is perfect for long paragraphs, being both easy to read and pleasant to the eyes.

2. Lato

font-latoThis is the font we accross our website and it´s the font you are reading right now. We chose this one since has a very modern look but it keeps it´s simplicity. It works well with our minimalist type of website

3. Open Sans

open-sansOpen Sans is commissioned by Google and according to them has “open forms and a neutral, yet friendly appearance". It´s a type of font that can be well read across multi platforms like print, web and mobile.

4. Lobster

lobsterThis is a very popular font and one of the most used ones from designers across a wide range of platforms. This is a more recommend font for titles or banner and not for a long text. However is a very catchy font.

5. PT Sans

ptsansThe Public Type fonts were released in 2009 and were designed in Russia. It´s a transitional serif typeface with humanistic terminals. This font can be used both for texts or titles and it combines well with other fonts.

6. Oswald

oswaldThis is one of the first fonts to be featured on Google Web Fonts and it´s a great option for headlines. Has been recently updated and was created by the designer Vernon Adams.
Works well both on bold and light.

7. Arvo

arvoArvo is a font that is suitable both for print and web and it´s optimized to enhance it´s on screen readability. A great choice for long texts like a blog for instance. Arvo used to be a popular Estonian number and in Finnish means “number, value, worth”.

8. Ubuntu

ubuntoUbunto is also the name of the popular linux based OS, Ubuntu comes by default as the official font on this OS. It took nine months to be developed by the very much respected company Dalton Maag.
This font was designed exclusively for screens and for plain text.

9. League Gothic

league-gothicThis font is a revival of an old classic which was Alternate Gothic No. 1 and was designed by Moris Fuller. You can either use for long texts or titles and banners since it´s a quite flexible font.

10. Roboto

robotoLast but not least it comes Roboto, a font that was developed by Google and there are three differents types that can be downloaded. Roboto was presented by Google alongside with it´s Android OS Ice Cream Sandwich.

How to change your Font with our editor

On our editor is quite simple to change the font if you fancy. The first thing you need to do is to go to Google WebsFonts and select the font you like to add, lets choose for instance “Arvo”. Now just click on “Add fo Collection” as shown on the picture below.

step-1Now just pay attention to the bottom of your screen. On the left handed side you should be having on your collection at least one font. Just click on the button “Use” as shown on the picture.

step-2

You will be taken to another screen and just scroll down a little bit till the point 3.
Here the only thing you will have to do is to copy this code.

step-3Now you come back to your Mobsyte´s editor and click on the top right handed corner where it says “SEO Settings”

On the box “HTML/Javascript code” paste the code you have copied and add this one to it. Just Replace “FONT” by the name of the font as shown on the picture

font-family: 'FONT' !important;
color: #00000;
}
</style>

Note that you can also change the colours of your text, just change the colour code. You can find the codes here.

Final thoughts

We have created a list of very neat fonts to tune up your website and now is just about of doing some experiments to see what works better on yours.

We would like to know what is your favourite font. Which one do you use, or which one you're thinking of using?

comments powered by Disqus