Add Web font to your site and modules

Add Web font to your site and modules

tags

Web font, @font-face is a CSS standard to deliver the fonts real-time like images to web pages. It is gaining popularity and is supported by all major Browsers. Designers can use fonts that are located in remote server just like referencing images or video assets. It solves the problem that we must have the fonts reside on the local computer and we can use remotely located Unicode fonts that contains large collections characters and can be updated regularly and accessed by remote users instantly. SEO will be improved by implement the text in real fonts vs. images because the search engine can index/understand the actual text use in a regular fashion like h1, h2 and .headline etc.

We have developed a module to enable the content with web fonts and the module also comes with a WYSIWYG editor with web fonts which can be selected by individual Drupal publisher. Users can design their site with renown fonts for branding, SEO and help vision impaired (fonts can be read by vision aid devices)

We will talk about the Web Font API used in our module so developers can integrate the Web Fonts to their modules and content.

To deliver large character set languages or large Unicode font is a challenge. The fonts could be more than 10 MB and it is impractically with the current internet connection speed, especially to the less developed countries and across vast distance. We will discuss a method, dynamic subsetting, to overcome this obstacle. It will deliver the fonts only contain the characters used in the page. It is simple, only require one line of code in HTML page. It does not require any implementation from content developer and application developers.

Resources