Content Page for Google Font App Working with Web Fonts!

11.45am: Got a domain on a local h0sting service called businessware. Got samirai.ae. Have pointed that address to my personal website on heroku also. Think I am close to getting the Gandi name servers to work. Think I have to forward the no subdomain to the herokuapp.dns, not the http://www.samirai.io. Will check again in a few hours once changes have propagated to see that it works.

Updated the errors on the keyword  app. Need to check in a couple of hours if it is working now.

Now can get started on the Google Font App again.

12.30pm: It is now loading properly in the extension window. Need to add the communication between the popup and content scripts.

Should check out this web font loader library at some point. Apparently it allows you to configure some options, like showing the current font while the new fonr is downloading, as oppose to showing a blank space where the font will render while the fonts are downloading.

1.15pm. Basic messaging and updating of fonts working.

3.45 pm: Have got the extension to update all the fonts on the page. I needed to add a style tag to the header, with the !important value so that it overrides all other settings on the page. The element should look like so:

<style id=”googleFontStyle” type=”text/css”> * {font-family: ‘Slabo 27px’, all !important;font-style:normal !important;}</style>

The * applies it to all. For the selectors, just add the same tag but change the * to whatever selector I want. Each time I am updating the style, I am removing the old style tag by checking if it exists if($(element).length) and then removing if it does $(‘element’).remove().

Just had an idea to have a detailed view of the font. So if they click on the details view, the pane will slide and it will show details like the different styles, embed links, e.t.c.

Should also add to github which javascript libraries I am using for each project.

8pm: I got the content script working with the web fonts loader. Got it so that the font only renders once the font script has been downloaded. This is now preventing the Flash Of Unstyled Fonts which was happening before. None of the other Google Font Extensions have this implemented. It took me some time to figure out the webfonts library, but it is definitely worth it now.

Still need to configure some things, like removing the style tags for a certain font once a new font has loaded.

Also need to get the different variants (e.g. 300, 400 e.t.c) working with webfonts as it uses those a little differently.

I can implement the webfonts on the popup also which is going to get the rendering on there looking much better also.

Also need to get the selectors working, so I can apply the fonts to certain elements only. This should be the next task.

It was a little complicated getting the webfonts working, especially with loading different fonts and all. It helped to just apply it for a single font first, and then see how to upgrade the code to work for loading multiple fonts.

These tutorials were really helpful for getting my head round the webfonts and understanding the advantages of using a font loader

 

 

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s