![]() ![]() In this case, shapes that have a unique ID or “shape name” can be forced to use a specific font. In the second case, although you would not be able to see the font inside captivate, it is actually possible to force a particular shape to display text using a web font that captivate doesn’t have built in. Using fonts that do not have a corresponding system font Both of these cases are more “fragile” in that they can depend on the directory structure where the module is loaded. By simply changing the href address, the browser can locate the files. In the first case, it is possible to download the web font files and either include them in the captivate module after publication, or in a separate directory on the module’s server. You wish to use a font that doesn’t have a corresponding system font that can be loaded into the OS.When users are not guaranteed to be connected to the internet when they open the module, or the connection to Google is very slow. ![]() There are a few other cases that can show up: Although we’ve shown how to load Google fonts, any other cloud based font with a downloadable system font can work the same. Any font styling that you see works in Captivate, such as bold or italic, will work as well when published. All of the magic occurs in the javascript.Īs you can imagine, you can use this technique to load as many different font types as you like. Note that this technique doesn’t require modifying any of the published files. ) font files, the font is retrieved only once from Google’s servers. By adding the following lines of code to the first page of your presentation using “On Enter Execute Javascript”, the browser will load the font directly from Google when the module is opened: var fontLink = '' ![]() Loading Google fonts as part of the moduleĮnsuring that any user will see this font turns out to be remarkably simple. It is the next step that is critical for making the font work generally. This is misleading - if your users don’t have the Calligrafitti font loaded on their system, it will not be seen. Even “previewing” and “publishing” will display the font as it is now installed on your system. Any text styled with the font will render correctly. The next time Captivate is opened, the Calligraffitti font will show up as a system font. Google also provides the URL information needed to link to the cloud version of the font in the “import” section after selecting the font to download. In Windows, this simply means unzipping this file, selecting the .ttf files, a right-click to open the ttf file into the font preview window which has a button to install the font. To add the font to Captivate, you download the zipped font file and install it as a system font Windows/IOS. After selecting the font, it is possible to open a small window that provides the needed information for linking to, and downloading the font files. We will use the beautiful Calligrafitti for this example. There are hundreds of fonts to choose from and it is easy to get lost in just poking around the different styles. This means that the font data is pulled from Google’s servers at the time the module is loaded. It does not require any “post processing” or modification of the captivate published modules, but does assume that the user is viewing the module on a web browser that has access to the internet. In this short article, we will see how to both display google web fonts during our design process, and ensure that they will be seen by the user. We use the responsive project type exclusively to avoid this problem. Further, until Captivate added the “responsive” design capability, fonts could look terrible when viewed a non-standard screen resolutions. The more numerous “System Fonts”, which are listed next are not recommended for web deployment as they only display correctly on systems that have pre-loaded those fonts into the operating system ( Windows/IOS ). Captivate highlights those fonts as “web fonts” in the text styling menu. In HTML5 based Captivate modules, it has been common practice to limit ourselves to the use of fonts guaranteed to be available in all browsers: Ariel, Courier New, Georgia, HelvaticaNeue, Times New Roman, Trebuchet MS, and Verdana. Google provides a vast set of such “web fonts” that can be integrated onto a page with just a few lines of HTML, completely for free. This has been primarily driven by the ability in HTML5 to load fonts from external sources as part of the page, rather than from the operating system. The use of custom fonts is now commonplace on the web, as a critical element of that visceral first impression. Like art, your impression is immediate and yet mostly unconscious. The visual impression of layout and typeface can be profound - something that impacts you long before the actual recognition of meaning. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |