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.
Serif Fonts
Georgia, serif
"Palatino Linotype", "Book Antiqua", Palatino, serif
"Times New Roman", Times, serif
Sans-Serif Fonts
Arial, Helvetica, sans-serif
"Arial Black", Gadget, sans-serif
"Comic Sans MS", cursive, sans-serif
Impact, Charcoal, sans-serif
"Lucida Sans Unicode", "Lucida Grande", sans-serif
Tahoma, Geneva, sans-serif
"Trebuchet MS", Helvetica, sans-serif
Verdana, Geneva, sans-serif
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?
I would look at Google Web Fonts for something like this:
Google Web Fonts
Hope this helps
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).
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.
Related
I understand that web safe fonts have a high chance of being install on most OS. Looking at http://www.cssfontstack.com/ shows what OS has which font installed. However, what I can't seem to find any information for is if web safe fonts are internationally safe as well, that is, will the font render in any language?
I looked at tons of international sites to look at their font stacks, and this is what I found:
Arabic & Persian: Verdana, Arial, Tahoma
https://www.drupal.org/node/695128
Pashto (Afghanistan): Arial, Helvetica, Tahoma, Verdana
http://atra.gov.af/ps
Chinese: "Helvetica Neue", Helvetica, "Hiragino Sans GB", "Microsoft YaHei" ,"微软雅黑", Arial "宋体","Arial Narrow"
https://gist.github.com/feimoslong/3496114
http://www.kendraschaefer.com/2012/06/chinese-standard-web-fonts-the-ultimate-guide-to-css-font-family-declarations-for-web-design-in-simplified-chinese/
Japanese: "Lato", "Meiryo", "メイリオ", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; Helvetica, HirakakuProN-W3
Japanese standard web fonts
http://www.gov-online.go.jp/data_room/calendar/event/201603.html#nousongyoson
https://kotobank.jp/word/%E6%94%BF%E5%BA%9C-86390
Hindi (India): Arial,Verdana,Tahoma, Helvetica, mangal (lots of website use nato sans or source sans web font)
http://www.sewayojan.org/Default3.aspx?l=0
http://delhi.gov.in/wps/wcm/connect/DoIT/delhi+govt+hindi/home
http://www.livehindustan.com/news/national/article1-mp-govt-in-trouble-with-nilgai-because-of-cow-will-change-name-519355.html
Hebrew: Verdana, Arial, Helvetica
http://www.gov.il/firstgov
http://www.pmo.gov.il/Pages/default.aspx
Urdu (Pakistan): "Helvetica Neue",Helvetica,Arial,sans-serif
http://javedch.com/pakistan/2016/03/01/143024
Thai: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif
http://newdelhi.thaiembassy.org/th/
http://www.iadopa.org/
From inspecting these sites, I see that each web safe font gets mapped to a font file on my OS that has the characters needed to render the language. For example, when Arial is used for a site in Hindi, I see that the font Kohinoor Devanagari is used for any missing characters from the Arial font.
So here are my questions: will a web safe font always map to a font on any OS/device that can render the language? By using a web safe font can I translate my site into any language without needing to change the font for that language?
You probably already know this, but different regions don't really have their own specific fonts. In a lot of regions websites will go with the system default font, because the language of the region is pictorial (if you thought downloading a webfont was slow, imagine downloading the entire Japanese character set)
The best you can probably do is go with a common stack of fonts that OS's have installed. Medium have a great post on how they prioritize system fonts for their UI components, and the accidental time travel they encountered on the way.
In the end, sans-serif is your friend. I once had to check how a website looked on a PlayStation Vita console on it's built in Internet Browser, which actually avoids downloading webfonts and opts instead for it's own sans-serif font, which has characters for both Latin and non-Latin based languages in one (very big) character library.
Of course, there are many cases where even in non-Latin languages English words are used instead of a local translation (brand names, acronyms) - this is often where I've seen Times New Roman bleed into Asian websites, because it was my browser's (and probably yours) default font to render in the absence of any specific CSS declaration.
If you think from the context of someone seeing a English word in the middle of a Chinese article, they're probably more likely to recognize an English word in Times New Roman than, say, Tahoma. I've even seen that some Asian Cartoons have English text in Times New Roman. While in the West that's we may find it an eye-sore, in countries that don't use latin characters any deviation from the style of the character can compromise the meaning of the word, or change it entirely.
But anyways. I'd recommend trying a leaf from Medium's book. If you feel like displaying a different font, then by all means you can, CSS is great in that respect that it will silently fall back to the next best thing. You'll never get it perfect, but as long as everyone can read your text, they'll be able be able to understand it.
P.S Always keep sans-serif at the end ;)
How do I make it so Windows will always show Helvetica instead of Arial? Is this even possible? I know it automatically substitutes it, but is there any way to do this.
I know that I could use font squirrel but apparently that is illegal. Is there another solution?
You cannot. Even embedding a font would not force anything, since settings in the user’s system may prevent the use of downloadable fonts. Besides, embedding Helvetica is illegal, unless permitted by its copyright holder.
If you declare font-family: Helvetica, then Helvetica will be used only if the user’s system has Helvetica installed, and Windows systems usually don’t. Due to Windows settings, when Helvetica is not installed, Arial will be used instead.
Use this snippet to make sure your website is using Helvetica instead of Arial (if possible):
body {
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;
}
In addition there are many alternatives to Helvetica, if you need something free try Google WebFonts , they have at least a few fonts that look more or less like Helvetica: Actor, Asap, Cabin, Droid Sans, Lato, Open Sans, PT Sans, Varela.
As has already been said. If you are using an actual font and not an image of a font, you can not force a font onto a system legally.
What you should do is use a proper CSS font-stack as shown in other answers and the computer will use the first font that it comes to that it has on the system.
Always put Helvetica before Arial, so that when available it will be chosen first. Helvetica and Arial DO look very similar, but people who care can tell the difference.
http://www.ironicsans.com/helvarialquiz/
link is :
http://www.woolovers.com/silk-cotton/womens/sleeveless-silk-cotton-camisole.aspx
Left is iPhone display and right is PC. The fonts circled are having same css but have different display. A(pc)=B(pc) but A!=B. Any ideas?
As Jukka has said it is not a supported font on iOS so you have three options.
Choose a different font which is available on ALL (iOS, Android, MacOS, Windows etc.) platforms.
Host the font file on your web server and point to it with CSS #font-face.
Use an online font hosting service such as Google Webfonts
To point to a custom font with CSS use the code below and copy the Lucida Sans font file to your web server.
#font-face{
font-family: "Lucida Sans"; src:url('LucidaSans.ttf');
}
Note: Google Web Fonts does not have Lucida Sans available.
It seems that iPhone just hasn’t got a font named Lucida Sans and therefore uses another font. Cf. to What fonts do iPhone applications support?
My computer doesn't show the text using Lucisa Sans either, because the version of the font that I have is named Lucida Sans Unicode. All computers doesn't have a font named Helvetica either.
You should use a font stack will fallbacks all the way to the default font sans-serif defined in CSS. That way you know that one of the fonts specified will always be used, and it won't fall back to something completely different:
font-family: Lucida Sans, Lucida Sans Unicode, Helvetica, Arial, sans-serif;
See https://developer.mozilla.org/en-US/docs/Web/CSS/font-family:
You should always include at least one generic family name in a font-family list, since there's no guarantee that any given font is available. This lets the browser select an acceptable fallback font when necessary.
I went with the following fallback fonts:
font-family: "Lucida Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
This is what I have:
body {
font-family: Frutiger, "Frutiger Linotype",
"Frutiger LT Std", Univers, Calibri, "Myriad Pro",
Myriad, "DejaVu Sans Condensed", "Liberation Sans",
"Nimbus Sans L", "Helvetica Neue", Helvetica, Arial,
sans-serif;
}
That's a whopping 14 fonts! Does using long font stacks like this one have a significant effect on page load time or performance, or is it always a good idea to include as many fonts as needed?
Interestingly, the font stack seems to be from here: http://www.sitepoint.com/eight-definitive-font-stacks-2/ (modified to remove Gill Sans, which makes sense because that font really doesn't fit this group).
It's overkill in a sense (unless you just really, really hate Arial), but knowing a lot of these fonts, I can see the logical assumptions the creator had in mind (not to say that I would do this). Frutiger and Univers are very uncommon, but are nice designer fonts. Calibri is a font shipped since Office 2007 and Myriad Pro has been shipped with Acrobat Reader for ages, so you're covered on Windows machines. There are three Linux fonts (DejaVu Sans, Liberation Sans, Nimbus Sans) to cover your bases there. As I mentioned, Gill Sans was eliminated here, but that font ships with Macs. So does Helvetica Neue.
So, to share in the consensus, it's probably not hurting anything, but unless you want to test it extensively, all you're doing is adding page weight and a lot of unknown variables to your design.
I say it is overkill unless you plan to break it down like I do:
/* Web Safe Font Stacks */
.head {font-family: Georgia,'Times New Roman',serif}
.para {font-family: Verdana,Arial,sans-serif}
.mono {font-family:'Courier New',Courier,monospace}
.fant {font-family: Papyrus,Impact,fantasy}
.curs {font-family:'Apple Chancery','Lucida Calligraphy',cursive}
You are welcome to use this example code in your CSS.
I want to use Helvetica Neue Condensed Bold on my webpage but it doesn't seem to be working. I have tried this: http://jsfiddle.net/ndFTL/ but it does not work, it simply shows up as Helvetica Neue Bold.
I have Helvetica Neue Condensed Bold installed:
Could anyone please help me out?
After a lot of fiddling, got it working (only tested in Webkit) using:
font-family: "HelveticaNeue-CondensedBold";
font-stretch was dropped between CSS2 and 2.1, though is back in CSS3, but is only supported in IE9 (never thought I'd be able to say that about any CSS prop!)
This works because I'm using the postscript name (find the font in Font Book, hit cmd+I), which is non-standard behaviour. It's probably worth using:
font-family: "HelveticaNeue-CondensedBold", "Helvetica Neue";
As a fallback, else other browsers might default to serif if they can't work it out.
Demo: http://jsfiddle.net/ndFTL/12/
I had the same problem and trouble getting it to work on all browsers.
So this is the best font stack for Helvetica Neue Condensed Bold I could find:
font-family: "HelveticaNeue-CondensedBold", "HelveticaNeueBoldCondensed", "HelveticaNeue-Bold-Condensed", "Helvetica Neue Bold Condensed", "HelveticaNeueBold", "HelveticaNeue-Bold", "Helvetica Neue Bold", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosCnBold', "Helvetica", "Tahoma", "Geneva", "Arial Narrow", "Arial", sans-serif; font-weight:600; font-stretch:condensed;
Even more stacks to find at:
http://rachaelmoore.name/posts/design/css/web-safe-helvetica-font-stack/
In case anyone is still looking for Helvetica Neue Condensed Bold, you essentially have two options.
fonts.com: License the real font as a webfont from fonts.com. Free (with a badge), $10/month for 250k pageviews and $100/month for 2.5M pageviews. You can download the font to your desktop with the most expensive plan (but if you're on a Mac you already have it).
myfonts.com / fontspring.com: Buy a pretty close alternative like Nimbus Sans Novus D from MyFont ($160 for unlimited pageviews), or Franklin Gothic FS Demi Condensed, from fontspring.com (about $21.95, flat one time fee with unlimited pageviews). In both cases you also get to download the font for your desktop so you can use it in Photoshop for comps.
A very cheap compromise is to buy Franklin from fontspring and then use "HelveticaNeue-CondensedBold" as the preferred font in your CSS.
h2 {"HelveticaNeue-CondensedBold", "FranklinGothicFSDemiCondensed", Arial, sans-serif;}
Then if a Mac user loads your site they see Helvetica Neue, but if they're on another platform they see Franklin.
UPDATE: I discovered a much closer match to Helvetica Neue Condensed Bold is Nimbus Sans Novus D Condensed bold. In fact, it is also derived from Helvetica. You can get it at MyFonts.com for $20 (desktop) and $20 (web, 10k pageviews). Web with unlimited pageviews is $160. I have used this font throughout (i.e. NOT exploiting the Mac's built in "NimbusSansNovusDBoldCondensed" at all) because it leads to a design that is more uniform across browsers. Built in HN and Nimbus Sans are very similar in all respects but point size. Nimbus needs a few extra points to get an identical size match.
"Helvetica Neue Condensed Bold" get working with firefox:
.class {
font-family: "Helvetica Neue";
font-weight: bold;
font-stretch: condensed;
}
But it's fail with Opera.
You would have to turn your font into a web font as shown in these SO questions:
Non-Standard fonts in web?
How to add some non-standard font to a website?
However, you may run into copyright issues with this: Not every font allows distribution as a web font. Check your font license to see whether it is allowed.
One of the easiest free and legal ways to use web fonts is Google Web Fonts. However, sadly, they don't have Helvetica Neue in their portfolio.
One of the easiest non-free and legal ways is to purchase the font from a foundry that offers web licenses. I happen to know that the myFonts foundry does this; they even give you a full package with all the JavaScript and CSS pre-prepared. I'm sure other foundries do the same.
Edit: MyFonts have Helvetica neue in Stock, but apparently not with a web license. Check out this list of similar fonts of which some have a web license. Also, Ray Larabie has some nice fonts there, with web licenses, some of them are free.