{"id":1799,"date":"2012-07-06T11:33:56","date_gmt":"2012-07-06T11:33:56","guid":{"rendered":"http:\/\/sgis.co.uk\/blog\/?p=1799"},"modified":"2014-08-14T11:09:55","modified_gmt":"2014-08-14T11:09:55","slug":"beyond-web-safe-fonts","status":"publish","type":"post","link":"https:\/\/sgis.co.uk\/blog\/2012\/07\/beyond-web-safe-fonts\/","title":{"rendered":"Beyond web safe fonts"},"content":{"rendered":"

When creating a fancy title heading, designers and developers use to have to resort to adding an image rather than actual text due to the limited amount of web friendly fonts the are available (follow this link for a list of current web safe fonts http:\/\/www.w3schools.com\/cssref\/css_websafe_fonts.asp<\/a>). Using images, rather than text, obviously has negative affects on your web page’s SEO as search engines won’t be able to find the page title.<\/p>\n

For a while now companies have been offering a solution to this problem by allowing fonts to be loaded remotely onto a webpage to give your site a fresh look. We have put this post together to show how easily it can be implemented. There are plenty out there but we are going to be looking at Google Fonts<\/a>, mainly because it’s free to use!<\/p>\n

\"\"<\/a><\/p>\n

Guide to adding a new font to your website<\/h2>\n

1.<\/strong> Visit Google Fonts<\/a> and find the font you want to use. (we are using “Erica One” in this example)<\/p>\n

2.<\/strong> Once you’ve found the font you like you’re now ready to embed it. You are given the option to add the font to your collection. Adding a font to your collection allows you to easily find it again for future use. If you’re planning to use the font as a one off you can just click “Quick Use”<\/p>\n

\"\"
\n
<\/p>\n

3.<\/strong> You will then be given some options, 1 & 2 are mostly not used as the majority of the fonts only have one type so skip to the third option if this is the case. The third option tells you to copy and paste a link into the header of your website. This link loads the font remotely to then be used by your website.<\/p>\n

<link href='http:\/\/fonts.googleapis.com\/css?family=Erica+One'\r\n rel='stylesheet' type='text\/css'>\r\n<\/pre>\n
 <\/p>\n
4.<\/strong> Once the link is in the header of your site you can then use this font in CSS as you would any other font, for example;<\/p>\n
h1 {\r\n  font-family: ‘Erica One’, cursive;\r\n}<\/pre>\n
 <\/p>\n
5.<\/strong> Once the above code is live your new font will be available on your site.\n\n
SGIS<\/p>\n
\"\"This is very easy to implement and is another great free tool from Google. The only small negative to doing this is it requires the page to load a 3rd party script which will have a very slight impact on the page loading speed. Luckily Google has a handy meter for each font to give you an idea of the effect it will have on your page speed. The meter shows the file size of the loaded font in KB and the likely impact on page speed.<\/p>\n
Google currently offers over 500 free fonts but if you can’t find the kind of font you’re looking for there are also plenty of paid fonts available. We have listed some below;<\/p>\n
www.fontsquirrel.com<\/a>
\nwww.myfonts.com<\/a>
\nwww.fontspring.com<\/a>
\nwww.fontshop.co.uk<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
When creating a fancy title heading, designers and developers use to have to resort to adding an image rather than …<\/p>\n
Read article<\/a><\/p>\n","protected":false},"author":1,"featured_media":1831,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,5],"tags":[55,8,9,72,59],"class_list":["post-1799","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-latest-news","category-web-design-guides","tag-css","tag-design","tag-development","tag-fonts","tag-seo"],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t