Custom Fonts

In most modern browsers, custom fonts can not be loaded across different domains due to licensing and security issues. It means that we might need to make some changes to the Wrapper to make those fonts work on the IDX pages.

Please read this KB article to familiarize yourself with custom fonts and suggest client to try the solutions there as well.

Some icon web fonts can be added easily by using the @import url feature of CSS and there is a website that provides a CDN for some of these icon fonts. You can find them here (http://weloveiconfonts.com/)

How to encode font into base64

More specific instructions if the mentioned article is not clear enough and you have never done this before:

1. Get font-family name
   1. Open client’s page that does work without issues
   2. Inspect the same element that does not work on the IDX pages
   3. Find what font-family is being used. You might need to select other elements in the DOM tree to find the correct one.
2. Download the custom font
   1. Open client’s page that does work
   2. Bring the developer toolbar by inspecting an element or hitting F12
   3. Switch to Network tab
   4. Choose Fonts to display only fonts that are being loaded
   5. Refresh the page
   6. Find the font with the name you got from step 1
   7. Download the font file
   8. Confirm that it has .woff extension
3. Encode the font
   1. Go to https://www.giftofspeed.com/base64-encoder/
   2. Select and upload the file
   3. Encode the file
4. Add custom CSS
   1. Use the following as the template

      @font-face {     font-family: 'YOUR_CUSTOM_FONT_NAME';     src: url('data:font/woff;base64,YOUR_BASE64_CODE_GOES_HERE')format('woff'); }

   2. Replace font-family value with the font name you got in step 1
   3. After base64, add your code. Make sure that it is wrapper in quotes
   4. You might need to replace woff with the extension you got from step 2
   5. Add the giant and very ugly style under Designs -> Custom CSS -> Global

IcoMoon icons

This crazy service http://icomoon.io/ provides custom fonts that are used as icons. The great thing is that you can treat those icons as regular text – apply colors, size, etc. The only downside is that it is not as simple as images and older IE browsers do not support custom fonts, but noone cares about that.

• Follow the standard CSS font embedding process.
• The actual source code has to have proper HTML entities. For example if the icon in the source code in Firefox looks like a square box with “E039” in it, it has to be replaced with  as seen here http://www.fileformat.info/info/unicode/char/e039/index.htm
• Refer clients to the article above, “Using the Generated Fonts” section in http://icomoon.io/docs.html, You might want as well checkout this email http://idx.emailcenterpro.com/Client#conversationId=8637896b-e155-6959-5162-1ec6deda5701

Typekit fonts

This font is “secure” and can not be downloaded according to Adobe, but nothing can stop the IDX Broker conquest:

• In Google Chrome go to Resources of the page used as template
• Search for “font-face”
• find the generated css, that can not be accessed directly
• Copy the whole CSS file from the browser.
• replace the script in the wrapper with the giant CSS, that includes base64 encoded font. thanks Josh for the idea
• add the font family to the body. something like this

  style="font-family: arvo-1;"

• enjoy the custom font in any decent browser!
• give Sasha a jellybean

If clients are trying to load actual font files this will fail without modifying the access control headers by modifying the .htaccess file on their web server. I am still looking for CDN’s for the major culprits of this issue, which so far seem to be icomoon and elegant theme (wordpress) icon sets, and I will update this article as the search for a better solution progresses. For the time being clients need to add to their .htaccess file the following code snippet:

This can also be found in our knowledge base: Help with CSS font embedding

Font-Awesome: a common icon font

One of the more common font issues is with an icon font called Font-Awesome. This is frequently downloaded directly to client’s site and stored there to be referenced by their pages (e.g. http://greatcoloradohomes.idxbroker.com/idx/search). The problem is that it requires the correct server setup to enable it (see V1 instructions above) on IDX pages, which the client frequently doesn’t have. However, it is an open source project freely available to link to from a Github repository : http://fortawesome.github.io/Font-Awesome/get-started/ (use the “Easiest” section). To include it in a client’s page simply add the following <link> tags in the <head> section:

<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/> Version 4.2.0 has 479 Icons and may provide more options for clients.
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" crossorigin="anonymous">

an alternative to this is adding the following code to the Custom CSS section of a client’s account:

@import url(“//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css“);
@import url(“//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css“);
@import url(“//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css“);

Tried this method on an account and it did not work, adding the link href to the global subheader did work however.

To check the font awesome class icons refer to the cheat sheet to verify that the icon is available in the latest version

http://fortawesome.github.io/Font-Awesome/cheatsheet/

Font-awesome: invalid character

You might see the following error with some wrappers

The issue is caused by the wrapper page not having a correct HTML entity for the special character, which is being used in font.

It is best to tell client to have properly encoded characters.

Another option is to add custom CSS that will override style set via the wrapper/css