CODEWITHSUNDEEP
csswebfontsfont-family
user2199660
user2199660

Reputation:

A list of Web Safe Fonts and importing fonts?

I am working on making my own text editor for my website. This text editor is based upon Microsoft Word 2010 with a similar layout and features. I am currently working on the drop down list for the types of font which you can choose and I would like to know if there is a anywhere on the web safe fonts of which you can use.

enter image description here

Serif Fonts

Sans-Serif Fonts

View this page by clicking here.

The above content is a preview of some fonts of which you can use, listed on w3schools.com. It lists fonts such as "Tahoma, Geneva, sans-serif", of which I do not know what part of this, is the actual font name. On my editor, I would simply like to display a list of most used fonts in a list "Arial, Arial Black, Arial Narrow" and so on. Some of these fonts will not be on safe web fonts and therefore I will have to import the font.

I would like to not only know if there is a better list of web-safe font types your able to have including their simplified name and how to import fonts. Also, regarding importing fonts, once I import them, will they show correctly on all applications/devices?

Upvotes: 4

Views: 7010

Answers (3)

herinkc
herinkc

Reputation: 346

You can check which fonts work with which OS here and here.

These websites have the list of web safe fonts along with which OS it can be used with. It is always best and safe to choose fonts that can work on all types of OS.

As mentioned by @Stefen V., Google fonts are awesome. However, it has a drawback that it may effect the page load time (makes the page load slower than using web safe fonts).

Upvotes: 2

Billy Moat
Billy Moat

Reputation: 21050

The examples above which you have given are examples of font trees.

So "Georgia, serif" means use georgia if it's available and if it's not then use any 'serif' font that is available.

And "Arial, Helvetica, sans-serif" means use Arial if it's available, if it's not available use Helvetica and lastly if that's not available use ans sans-serif font that is available.

Google fonts as mentioned by Stefan V. is a good option although I'm not 100% sure you'll be able to integrate them with your editor. Anything is possible though so you may be able to.

You can either download the indivudual Google fonts to use on your website or just link to them hosted on Google's web servers.

Upvotes: 0

Stefan
Stefan

Reputation: 1106

I would look at Google Web Fonts for something like this:

Google Web Fonts

Hope this helps

Upvotes: 3

Related Questions