How to install system font for Brackets? - html

I'm using Adobe Brackets editor and I want to know how I can install common fonts such as Arial and Helvetica. I want to directly install them into my system and not just link them into my projects every time. How can I get this done?

I think you might be looking for Google Fonts. Google hosts hundreds of high-quality, free, fonts that you can use in your web project. GoogleFonts acts as a CDN, allowing your project to download the required fonts as the page is being rendered, similar to how jQuery etc operate when referenced from a CDN.
HOWEVER, you can also download and install Google's FREE, OPEN-SOURCE fonts on your local system and use them locally in your apps, including Brackets. Here is a tutorial for doing that.
How To Install Google Fonts on your Own Computer
To be complete, here are a couple of decent resources for learning how to use Google Fonts CDN-Style (not what you requested, but for future purposes):
CSS Reset - How To Use Google Fonts
W3 Schools - Use the Try It beside the font you desire
CodeCourse 3-Min Video Tutorial (if you prefer video demo)
The second reference is probably most helpful as it shows you (in their typeface) the fonts that are available, and the Try It button shows you a code example for using that font. Straight-forward and simple.

Related

Custom Firefox / Chromium install with Pre-installed extension (non enterprise)

i wanted to build a custom browser install that would fit the following specs, i found ways to do it using enterprise deployement, but my intent is to distribute it to friends and family without having to go through the enterprise distribution.
Can be sourced from Firefox or Chromium (or even other as webkit)
Should be easy to customize (ideally no C++ coding)
Should be able to embed extension or hard code the extension within the browser. (i've coded a custom adblock that is lighter and faster than the ones on FF or Chrome store and would also like to embed TOR connection extension)
Remove the ability to install other extensions (i want to ensure this browser cannot be victim of bloatware extensions installs)
Customize UI
Protect the browser against Search engine / HP / New tab settings change.
If you could point me to the right direction it would be awesome and i'll make sure to share this browser's link here once done.
I just saw this in the corner of my eye and figured I'd share this question/answer to possibly help you:
Standard way to build a Chrome extension into Chromium

Can I source Google Fonts from my own server?

My code has this:
<link href='//fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700' rel='stylesheet' type='text/css'>
<link href='//fonts.googleapis.com/css?family=Source+Code+Pro' rel='stylesheet' type='text/css'>
But I am sometimes finding that the googleapis is slow in my region. Can I host these fonts from my own server?
Yes you can. But doing it is a bit more complicated than saving CSS and the font files on your server.
The thing is, different Browsers use different font formats. Google solved this by delivering CSS rules with different font files depending on the user agent.
To support all browsers you will need the font files in TTF, WOFF, WOFF2, EOT and SVG format. But Google makes it unnecessarily hard to download the fonts files. From the google fonts site you can only download the fonts as TTF.
Also you will need cross browser CSS rules since you probably can not easily implement the user agent detection on your side.
To retrieve all formats you need to request the CSS file from Google with different user agents. Here is an outdated blog article listing some of the user agent strings to use. In the meantime WOFF2 was added and to actually get EOT you now need to send an IE6 user agent. IE7+ now will result in WOFF.
You can use the tool http://www.localfont.com/ to easily download all font formats and the corresponding X-Browser CSS.
Quick answer: YES
A quick googling revealed me these information.
Info Pages:
http://www.google.com/fonts/specimen/Source+Sans+Pro
https://www.google.com/fonts/specimen/Source+Code+Pro
They both are under the SIL Open Font License, 1.1
And this license do not impose much restrictions and allows you to host the font on your website.
http://scripts.sil.org/cms/scripts/page.php?site_id=nrsi&id=ofl-faq_web#23261834
http://scripts.sil.org/cms/scripts/page.php?site_id=nrsi&id=ofl-faq_web#c26665c2
you have to host the css files on your server , and also you have to write the code is it fails to load from the server then it pick up from some local storage or you have provide another server link .
yes you can.
marked in red in the top right corner of google fonts there is a download link.
source:
https://code.google.com/p/googlefontdirectory/

uploading fonts to wordpress site

what's the easiest and most effective method for uploading fonts to a wordpress site? I have fonts on my computer I'd like to reference instead of google fonts already embedded in. wasn't sure if ftp (and in what location) or an app works best. danke.
There are several things you need to know before embedding a font in your site. I can walk you through the process here:
Make sure the font you want to upload is allowed to be on the web. Some foundries don't want their fonts embedded because people can steal them from the embedding website. Check who makes your font and what you need to do to satisfy their licensing. All Google fonts are open licenses, so you don't have to worry there.
Find the font file on your system. This is usually a .ttf or .otf file. If it is not one of those, it will be difficult to embed them correctly.
Once you have your font, you need to convert it and package it. This is easy with services like FontSquirrel. They will do all of the converting and packaging for you as well as writing the CSS to embed the fonts.
The method you are using to embed the fonts is known as #font-face. This code should be in your stylesheet. Here is a tutorial on using #font-face. Make sure when you put the code in your CSS file that the fonts are in the right directory that you are targeting in the URLs for the fonts in the stylesheet. FYI the normal stylesheet location for Wordpress themes is in your theme folder under styles.css. I believe that FontSquirrel's generated CSS puts the fonts in the same directory as the stylesheet, so they may need to be in the theme's root to work properly. Though, I would suggest putting them in a fonts folder and updating the URLs in the stylesheet.
That's it! It's a little more difficult than just adding a file, but it should work. If you have issues with spacing or lining things up, I have another answer I wrote that might help you out, there as well.

How to use a font installed in your computer, to a web site?

I am trying to use Helvetica Neue 55 Light, I have it installed on my computer.
However, it is not showing up on other people's PC's.
So I tried font-facing it from my computer, but I was told there was an issue with the url, that I was using a relative url (to the folder in which the site is contained, I am using Neocities so that folder is not* in my computer, and I don't know how to add the font to such online folder if there are any?) and that I must use an absolute url.
Help? :s
You need to create a font kit.
This site will do it for you: http://www.fontsquirrel.com/tools/webfont-generator
However, it will not let you use a copyrighted font. Not all the font files on your computer are authorized for web use, but you can buy the license from the creater (these typically have a high price tag).
If your font is installed locally, specifying where it is on your computer will not allow people to access it from your website. You're going to need to either upload the font files to your hosting server (in this case, Neocities); or, failing that, upload it to another static hosting service, such as dropbox, and specifying the URL of where the file is stored then.
EDIT: You're probably better off not using Helvetica Neue or any Adobe font, unless you're willing to fork out hundreds of pounds for it.
Fonts are licensed differently for desktop use and for web use. If you have it installed on your computer you probably have a desktop license, but likely not a web license. The formats are also different in many cases, so if you have the desktop font it won't work to just put it on your server, and like others have said, you also can't just convert it in some cases without violating the copyright.
MyFonts is one vendor that sells Helvetica Neue Light. If you go to the buying choices page, you'll see that there are lots of licensing options. Make sure you buy the Webfont option if you want to deliver it online. After you purchase, there should be some instructions on how to use it.
There's actually a really good discussion going on right now about some of the different methods of delivering web fonts. That might be worth checking out too.

Using a specific font in web development

I downloaded the Franchise Bold Font. I know how to use it in my code, but where do I put the font files in my webserver root so that they get found and used?
the URL is: http://www.derekweathersbee.com/franchise/
To use a font on a web page it needs to be a WebFont - you can't just put a TTF file onto a webserver.
Font Squirrel offer a service to create/convert WebFonts - there's a fair bit of info on how it works there and a Google for webfonts will bring up a tonne more.
Obviously you need to rights to do convert and use the font - the font you're using appears to be free but if I were you I'd credit the creator/throw them a link somewhere!!