Solved

Web Fonts - @font-face

Posted on 2013-12-17
3
585 Views
Last Modified: 2013-12-17
I have been supplied some fonts for a website.

They are ".otf" files.

I have read this article regarding how to install and use the fonts on a website:

http://www.fontspring.com/support/installing_webfonts/how-do-i-use-the-webfonts

It looks as though if I bought the fonts directly myself they would include other file types like “.woff”, “.ttf” and “.svg”.

I only have the  ".otf" files. Do I need all of them for the web fonts to work correctly on my website or can I just use the ".otf" files?

When are each of these file types used? Are they browser specific?

Also do I use @font-face or is there another font solution that I can use.

I have used google fonts in the past, but they do not have this font in there library or can any font be used via google fonts if you buy the licence?

All advice appreciated.
0
Comment
Question by:petewinter
  • 2
3 Comments
 
LVL 82

Accepted Solution

by:
Dave Baldwin earned 500 total points
Comment Utility
That's a good article.  In my experience, you need all the fonts shown in the article except maybe the svg version.  'otf' by itself is not enough.  IE uses the 'eot' and you need both versions shown in the example code, Firefox uses the 'woff', and Chrome will use either the 'ttf' or the 'svg'.  In my application, the CSS file for the web-fonts needed to be in the same directory as the fonts themselves.

The Google fonts are only the ones that they supply.  You can't buy a font from Adobe or Lintype and upload it to Google.  And a lot of fonts are not licensed for use as 'web-fonts' anyway.
0
 

Author Closing Comment

by:petewinter
Comment Utility
Perfect. Many thanks
0
 
LVL 82

Expert Comment

by:Dave Baldwin
Comment Utility
You're welcome, glad to help.
0

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
XSLT: how to increment number value if attribute present 4 24
jQuery CSS Scroll Issue 3 30
Creating a slider 12 32
HTML CSS 7 14
Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

763 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now