Generating Web Fonts Locally | Fixing CSS3111

By -

Web developers such as myself find themselves struggling with a recent issue:
Convert system fonts to web usable font formats (EOT, WOFF, TTF, SVG).

There are a few good sites out there that will allow uploading a font and instantaneously get the necessary fonts and CSS styles to include on an existing website. Unfortunately, these sites may not work are expected:
  • The fonts are not supported by the provider
  • The fonts are generated but display poorly with defects
  • The provider has blocked the conversion of the current font due to copyright issues
  • Some browsers experience script errors while using specific font formats
    • E.g. CSS3111: @font-face encountered unknown error. (EOT, Internet Explorer)
While trying solutions (such as setting consistent font names by editing the font with FontForge) that did not work for me, I ended up finding the CSS3FontConverter. The idea is to set up the applications on a local machine enabling us to generate the fonts ourselves with open source software without using online generator websites.

The objective of this post is to document the set up procedure in Windows, which can be very hard and error-phrone.

  1. Install Cygwin.
    The latest x86/x64 binary DLL is fine.
    Remember to pick a geographically near server and make sure you select additional packages to avoid later issues.
    • Add wget
    • Add gcc
    • Add make
    • Add GnuPG (gpg)
  2. Install Java and add the /bin folder to the Environment Variable "PATH"
  3. Install FontForge and add the /bin folder to the Environment Variable "PATH"
  4. Download the binary of Batik and extract it exactly in the below path to avoid issues
    c:\Program Files\Batik\batik-1.7 (the last folder is included in the zip so you can "extract here" on the "Batik" folder withing "Program Files")
  5. Download sfnt2woff for Windows. Place it under Cygwin's bin folder.
  6. Download ttf2eot for Windows. Place it under Cygwin's bin folder.
  7. Add Cygwin's bin folder to the Environment Variable "PATH".
  8. Download CSS3FontGenerator and extract it over the Cygwin folder.
  9. Copy the desired font(s) to the same folder where you extracted the application in step 8.
  10.  Finally, start Cygwin and run "./css3FontGenerator/convertFonts.sh *.TTF".
Hopefully all with work out and your eot/woff/ttf/svg font formats will be generated correctly and be ready to use on any website, without CSS3111 issues.

Online Web Font Generators:
Font Squirrel

Everything Fonts

Font2Web

Convert Fonts

Source:
http://www.useragentman.com/blog/2011/02/20/converting-font-face-fonts-quickly-in-any-os/

Comments

Post a Comment

Popular posts from this blog

Breaking down document locking in SharePoint

By -
Image
This is a topic I've been meaning to discuss in a while. We open, change and close documents almost every day, and sometimes we collaborate with other people at the same time on those documents. SharePoint brings all co-authoring features we need, straight out-of-the-box, but sometimes, there are problems. While things are starting to look better on the cloud side, the concept of document locking is still very much up-to-date and understanding how it works and what to do when things go wrong is crucial. In an article that has since disappeared the Microsoft Knowledge Base (but still available here ), Microsoft explains it best: When a document is opened by a client program, Windows SharePoint Services puts a write lock on the document on the server. The write lock times out after 10 minutes. Users cannot modify the document during the time when the document is locked. In a scenario where the program that opens the document unexpectedly quits or crashes and you try to open the do
Read more

Working around X-Frame-Options for iframes

By -
Image
The problem: One of the first things we noticed after migrating to SharePoint 2013 was that our iframes have stopped working, giving the error: "Refused to display 'http://contoso/pages/home.aspx' in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'." Quickly we could see that this is in fact a security mechanism to prevent click-jacking and others: "The X-Frame-Options HTTP response header can be used to indicate whether or not a browser should be allowed to render a page in a frame or iframe. Sites can use this to avoid Clickjacking attacks, by ensuring that their content is not embedded into other sites." Soon we realized that, starting SharePoint 2013, an HTTP Module is adding the header " X-Frame-Options " by default, with the value " SAMEORIGIN ". This is effectively preventing the rendering of pages outside the scope of the current web application. The (attempted) solution: So what to do?
Read more

Document ID not being generated

By -
Image
Problem In a scenario where we have many document Content Types, we may want to enable Document ID - aka "Permanent Links" - which is a feature in SharePoint that assigns a specific ID for each document. That ID never changes even if the document is renamed or moved to another location. In this scenario, the Document ID field was being generated for some libraries/content types, but not others, which is a surprisingly common problem. Background There are several stages we need to go through to enable use this mechanism. Stage 1 We enable the feature in the Site Collection Features. Stage 2 Under Site Collection Administration > Document ID Settings, we need to enable the assignment and pick a prefix. The IDs use the format: PREFIX-LISTID-LISTITEMID ( ref ) Where: PREFIX: the preconfigured prefix for the site collection, which can be any set of numbers and letters between 4-12 characters LISTID: the property docid_msft_hier_listid of the list
Read more