ART258: Google fonts, Typekit, @fontface as Typographic

How Setup Fonts for Your Website.

Educational and Professional use of typefaces are different. For commercial use, make sure you use “100% free for commercial use.”

Today, Chris lectured, how to use Google fonts, @font-face, and Adobe Typekit.

@font-face can access to fonts if Google fonts does not have the fonts you want to use. For example, you can use free “ALEO” from

1. how to use google fonts

  1. Use Sassy-base development folder/directory,
  2. Download from Zip to your computer
  3. Drop the folder to Prepros
  4. Drop it also to the code editor you use such as Visual Studio Code, Atom, or Brackets.
  5. Change the body color in editor to see the web if body color to set “$type-color-body: red;” in the “_typography.scss” partial scss file, then add define “color: $type-color-body;” in style.scss file then check on web to see if it is updated. (updated massage will show on the screen)
  6. Check web to see if the index.html file is updated
  7. Google fonts use one for the body and one for the heading.
  8. Copy link html add to your index.html file at <head></head>
  9. Add index.html <link href=”” rel=”stylesheet”>
  10. Add a line to SCSS file “font-family: ‘Roboto’, sans-serif;”
  11. What is the negative part of Google fonts? You don’t have a internet connection, you don’t get the fonts. Also if the Google fonts goes down you your web can’t use the fonts.
  12. @fontface 2008 changed every thing. One CSS declaration of @font-face.
  13. 10 years ago used – image replacement technic (text is there and the image shows).

WOFF- supported IE-9 on and others, TTF- for other than MS, EOT- for MS only, SVG check if all the browser supports by checking “can I use” website.

OTF – Adobe website says, “OpenType, as jointly defined by Microsoft and Adobe Systems, is technically an extension of Microsoft’s TrueType Open format, which can contain either PostScript font outlines (.otf) or TrueType font outlines (.ttf).” PostScript is for high resolution printing.

Fonts are available at:

The development folder, “sassy-base” has the following entries:

  • –css
  • –fonts –aleo–aleo.woff
  • –index.html
  • –prepros-6.config
  • –
  • –scss

2. To Use Fonts using @font-face:

Add the following code in style.scss<pre>

body {
  font-family: 'MyWebFont', Fallback, sans-serif;


Add the following code in style.scss


@font-face {
  font-family: 'MyWebFont';
  src:  url('myfont.woff2') format('woff2'),
        url('myfont.woff') format('woff');


To see how it is working by

Recommended way to use font is to use Google fonts, because Adobe Typekit does not work smoothly. It often requires some troubleshooting.

How to use typekits is part of Adobe-> performance is bad. Seems to take more time to load to cache memory. Used Brother-1816 for NMW

3. How to use adobe typekit

  1. Goto and click “Add to Kit.”-> kit setting and give the url then “Publish”.

You have to be careful using pseudo bold and pseudo italics in Typekit. Typekit is also server dependent.

Bold some weighted by using thin Brother-1816 and make it weight to be 900 instead matching 100.


Objective of ART299

  1. To understand the difference between a browser, and web app and mobile app,
  2. Available mobile app development environments,
  3. What kind of Adobe alternate software are available,
  4. Front-end development process (Chris’ presentation from ART258), and
  5. HTML5, CSS3, JavaScripts.

Life is Short: Rethinking about Adobe Products and about Web Design & Development

Rethinking of Adobe Products

If you are a graphic designer and work for design or marketing companies, currently it is important to learn to use Adobe products effectively. Adobe Photoshop and Illustrator creates standardized, clean, and beautiful raster and vector graphics quickly.

Since the beginning of use this software Ps, and Ai I felt that it was not  a elegantly designed tools and they were not suited for web design. Now we have XD, which is targeted  for this purpose and I used them for about a months. Finally we have an effective tool for designing and prototyping the web. And now I decided not to use it anyway mainly because I do not feel good about using them. Why I do not feel good about using them?

Tools are something we use and I do not want to controlled by tools. Tools affect outcome and how we use them. When I called their technical support for initial download the software, they asked my permission to getting into my computer. Why they have to get into my computer just for downloading their software? Later, Adobe CC once destroyed one of my external disk drives by writing something into my disk.

This monopoly said to be not good. And here is a case of monopoly in graphic software business. It needs to be stopped.

Right after I decided, I started to search alternate software. There are quite many graphic software available—not so complete as Adobe’s product.

By moving onto new tools, I may end up not been able to go back to fix my old projects as alternate software may not open or open but unmodifiable.

Now that I know what Ps and Ai can do, I can assess other products and open-source products: Gimp, Inkscape, and Blender.

On May 9 postings of “Alternative to Adobe CC?”,My Potential Move to Affinity Software + Misc. HTML5 JPN Book,, etc.“, “Tools of Choices: Sketch and Axure, Sketch and InVision, InVision Studioreviewed articles about them.

I think it is important review the state of open-source programs such as Gimp.

Rethinking about Web Design & Development

Web Development is not just coding —more importantly file organization, naming convention, image resizing for optimum performance, way to markup with HTML tags, way to use classes and ids, way to organize CSS, and the different ways to make site responsive.

Right now the designs are done, but my portfolio website coding is on hold. Something stopping me from coding further. Perhaps, I don’t see the point of presenting my past works other than historical recording of them. Placing generative arts as they are complete make more sense to me.
While to find out about HTTP methods and assessing a HTTP protocol exchange comparison was interesting.  The network feature of the developer tool (Firefox) showed that my website has a numerous GET and POST compared to a simple html web site. I posted at
This type of information is good to determine if you would like to use WordPress CMS. However, is different from’s WordPress on Bluehost (I did not test.)
This semester I learned HTTP protocol in more detail. Further, I am interested in how each GET message is packaged into lower level packets in each level of protocol layers (TCP/IP/Network/Datalink/Physical).

Tools of Choices: Sketch and Axure, Sketch and InVision, InVision Studio

Sketch: Digital Design Tool Kit

Design your App in Sketch.

Actually, how designers use Sketch in Youtube was informative.

InVision Studio kills Sketch and Adobe XD?

Sketch->InVision->Craft (Plug In???): Prototyping

Axure: Expensive (free 30-day trial)



My Potential Move to Affinity Software + Misc. HTML5 JPN Book,, etc.


Can Affinity Designer can replace Adobe AI?

Affinity Photo – Importing PSD Files and editing layers->Some editing can be done but not Smart Objects. Read this forum.

How well does the .psd import and export features of Affinity Designer work? – Longer answer: it’s almost perfect, but there are a couple of things you should know – one minor, the other not…

HTML5 テクニックバイブル $7-$10 used -Freelance services. On demand.