Adobe Edge Fonts

Adobe Edge, another system of web fonts is available via Brackets, the text editor you are using in this course. To get started with Adobe Edge, open a css file with Brackets or create a new css file, go to File - Extension Manager, and activate the Adobe Edge Web Fonts extension.

Once you have installed the extension, create a new class in the css file and type {font-family: " (be sure and add the quotation mark)  At this point a little window should appear. Choose "browse webfonts", find your way to a font that you like, and double-click it. At that point the name of the font should appear after font-family: as in font-family: adamina . Add a semicolon and a closing bracket. When you are done, everything should match the example below.

font-family: "adamina";

Connect to the font source.

Like Google fonts, Adobe Edge fonts are sourced online, but getting that source is very easy.  After you add the font, and while you are inside of the css file, you should be able to see a font icon like this fonty on the right side of the Brackets window in the same location as the extensions. Click the icon and a window will appear with a script source that will provide everything that you will need from the edgefonts website (see below for example). Copy the information and paste it below the <title></title> tags inside of the HTML document (not the css file) that is using the new font.

At this point all you have to do is apply the class or id that you assigned the new font family to.

Print Friendly, PDF & Email