Wednesday, April 29, 2015

How to Install Custom Fonts in Windows 8 — Step-by-Step Guide

I was wondering how to install the custom fonts to the Windows 8 OS. It’s pretty simple. Thought of sharing with you all.

Requirements

  • A Windows 8 PC.
  • The font file you want to install (common formats: .ttf or .otf). If the font is in a ZIP file, extract it first.
  • Administrator rights if you plan to install fonts for all users (copy to C:\Windows\Fonts).

Step-by-step

  1. First, download and save the font file you want to install.

  2. Open the Control Panel and go to the Fonts folder:

    Fonts folder in Control Panel

    (This screenshot shows the Fonts folder inside Control Panel.)

  3. Select “Font settings” in the left panel of the window and check the option shown there if present.

    Font settings in left panel

  4. Check the check box to allow installation of new fonts (if that option appears) and click OK.

    Allow fonts to be installed, click OK

  5. Now go to the font file you saved. Right-click on it — you should see an option to Install the font.

    Right-click the font file and select Install

  6. Install the font. After installation, open an editor (MS Word, WordPad, etc.) and you should see the new font in the font list.

Notes & alternatives

  • If the font is zipped, extract it first before trying to install.
  • You can also install by dragging the font file into the Control Panel → Fonts folder.
  • Copying the font file to C:\Windows\Fonts will install it for all users (this requires admin rights).
  • Typical supported file extensions: .ttf, .otf. Other formats may not install correctly.

Troubleshooting

  • Font does not appear in apps: close and reopen the app. If still missing, reboot Windows.
  • Permission errors: run as administrator or copy the file to C:\Windows\Fonts.
  • Corrupt font file: try downloading from the source again or test a different font to confirm.
  • Still not visible: open Control Panel → Fonts and confirm the font is listed there.

That’s it. Hope this is helpful

Monday, April 27, 2015

Add Custom Fonts to Android TextView — assets and res/font examples

In Android, you can set custom fonts on TextView controls to support different languages or to change UI typography. When I added Kannada language support to a Panchanga application (SRSM Mantralaya), this approach worked well: you need a font file (usually a .ttf) and then you load it and apply it to your TextView.

Where to put the font file

Place your font file in the app's assets folder. The original post used an assets/font folder; common conventions are assets/font/ or assets/fonts/. For the examples below I use assets/font/MyFont.ttf.

Note: For modern Android apps consider using res/font/ with Fonts in XML (API 26+) or the AndroidX support libraries. Those approaches allow you to set fonts directly in XML and support downloadable fonts.

Basic steps

  1. Put the font file (MyFont.ttf) in assets/font/.
  2. Get a reference to the TextView in Java.
  3. Create a Typeface from the asset using Typeface.createFromAsset().
  4. Apply it with setTypeface().

Example — layout XML

<!-- res/layout/activity_main.xml -->
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="16dp">

    <TextView
        android:id="@+id/textview1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Sample text in custom font" />

</LinearLayout>

Example — Activity Java code

// in your Activity
TextView text = (TextView) findViewById(R.id.textview1);
Typeface tf = Typeface.createFromAsset(getAssets(), "font/MyFont.ttf");
text.setTypeface(tf);

(From the original: TextView text = (TextView)findViewById(R.id.textview1);)

Alternative: caching Typeface (recommended)

Creating a Typeface from assets is moderately expensive. Cache typefaces to avoid repeated loads (e.g., when many views use the same font):

public class FontCache {
    private static final HashMap<String, Typeface> cache = new HashMap<>();

    public static Typeface getTypeface(Context ctx, String name) {
        Typeface tf = cache.get(name);
        if (tf == null) {
            try {
                tf = Typeface.createFromAsset(ctx.getAssets(), "font/" + name);
            } catch (Exception e) {
                return null;
            }
            cache.put(name, tf);
        }
        return tf;
    }
}

// usage:
text.setTypeface(FontCache.getTypeface(this, "MyFont.ttf"));

The original images

CF1

CF2

CF3

(These are the original images from the post; add alt text if your platform allows.)

Modern alternatives (recommended for new apps)

  • Fonts in XML (res/font/) — supported natively on API 26+. Allows setting fontFamily in XML. Preferable for consistent theming and easier use in styles.
  • AndroidX Core library (or Support Library) backport for Fonts in XML — lets you use fonts on older Android versions.
  • Downloadable Fonts — reduces APK size; useful if using Google Fonts.

Example using res/font (API 26+)

  1. Put MyFont.ttf in res/font/my_font.ttf.
  2. In layout XML:
<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:fontFamily="@font/my_font"
    android:text="Sample text" />

This avoids Java code for Typeface on supported devices.

Troubleshooting and tips

  • File path and name are case-sensitive on some platforms — use exact names.
  • If createFromAsset() throws an exception, verify the file path and that the font is a valid TTF/OTF.
  • Cache Typeface objects to avoid UI lag and repeated asset reads.
  • Check font licensing before bundling it in your APK.

Summary

  • Put your .ttf in assets/font/ (or res/font/ for modern approach).
  • Load with Typeface.createFromAsset() and call setTypeface() on your TextView.
  • Prefer res/font / Fonts in XML or AndroidX if you need XML-based fonts and broader platform features.

That's it. Try it. Happy Coding.

Saturday, April 25, 2015

How to Add Background Music to a Website in HTML — HTML5 Audio + Fallbacks

Greetings Of The Day!!!

As I told you in my previous blog I was working on designing of a website for an Ashrama. They wanted a background music to play in the home page of the website. I was wondering how to do it as it has to play without any controls and should start automatically. It’s pretty simple to do it.

Overview

HomePage_Intro.mp3 is the file which is going to play in the background. You can replace it with your file name and also note that this should be available on the server. If it’s not there in the directory where the index file is, you can give the full path (or URL) of the music file.

Below I keep the original examples (for older browsers) and add a modern HTML5 recommendation and practical notes about browser behavior, accessibility and hosting.

Modern (recommended) approach — HTML5

Use the HTML5

<!-- HTML5 audio: will loop and attempt to autoplay. Many browsers block autoplay with sound. -->
<audio src="HomePage_Intro.mp3" autoplay loop></audio>

Notes:

  • Most modern browsers block autoplay with sound unless the audio is muted or the user has previously interacted with the page. To increase the chance of autoplay you can use muted autoplay, but that obviously mutes the audio:
<audio src="HomePage_Intro.mp3" autoplay loop muted></audio>
  • Best practice: give users the choice to start audio. Use controls or a "Play music" link (example below) so visitors are not surprised by sound.

Legacy examples (kept from the original article)

The original post used the embed tag which works in many older browsers. Here is the original embed example exactly as shown:

<embed SRC=" HomePage_Intro.mp3" HIDDEN="true" AUTOSTART="true" LOOP="infinite"></EMBED>

This works for most of the internet browsers except Opera and older IE versions. For those we can use the bgsound tag of HTML as below (legacy):

<noembed>
  <bgsound src="HomePage_Intro.mp3" loop="infinite">
</noembed>

Important: newer IE versions may recognize both methods and could play audio twice if you include multiple tags without a conditional wrapper. Putting the bgsound inside a noembed (or using conditional comments or feature detection) prevents duplicate play.

Show controls (if you want the user to control playback)

In the original article I hid the music controls. If you want to show the controls, use the HTML5 controls attribute:

<audio src="HomePage_Intro.mp3" controls loop></audio>

If you prefer an older-style embedded player, remove the HIDDEN attribute from the embed element and add width/height (example of old embed usage):

<embed SRC="HomePage_Intro.mp3" AUTOSTART="false" LOOP="infinite" width="300" height="32"></embed>

Or provide a simple link that visitors can click to start the music (this is the least intrusive option):

<a href="HomePage_Intro.mp3">Play music</a>

Images from the original article

BM_1

BM_2

BM_3

BM_4

BM_5

Browser compatibility and autoplay behavior

  • Modern browsers (Chrome, Firefox, Safari, Edge) implement autoplay policies that generally block autoplay with sound until the user interacts with the page. Autoplay with sound may be allowed only under specific conditions (user media engagement index, previously granted permission, or muted audio).
  • Mobile browsers commonly block autoplay with sound to avoid unexpected data usage and user annoyance.
  • Therefore, do not rely on autoplay to always work. Provide a user-controlled play button or link.

Practical recommendations (technical)

  • Provide multiple audio formats where possible (MP3 for broad support, OGG for some older browsers) so you can do format fallbacks server-side or via elements.
<audio controls>
  <source src="HomePage_Intro.ogg" type="audio/ogg">
  <source src="HomePage_Intro.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>
  • Optimize audio file size (bitrate/compression) to reduce page load. Consider hosting on a CDN or streaming service if the file is large or has high traffic.
  • Use preload="none" on
<audio src="HomePage_Intro.mp3" controls preload="none"></audio>
  • Consider feature detection with JavaScript to progressively enhance behavior (try to autoplay, then fall back to showing a play button if blocked).

Accessibility and UX

  • Don’t surprise your visitors. Auto-playing audio can be disruptive and cause people to leave the page quickly. Provide controls or a clear "Play music" link.
  • Provide a transcript or caption if the audio contains important information.
  • Use ARIA labels if you have custom player controls, e.g. role="button" aria-pressed="false" on play/pause toggles.

Hosting and legal

  • Ensure the audio file is correctly hosted and accessible (CORS may matter for cross-origin requests). Use absolute or relative URLs as appropriate.
  • Confirm you have the right to distribute the music (copyright/royalty/licensing).

Conclusion

We should be aware that background music that automatically starts playing when a web page is loaded may not be appreciated by a large number of the visitors. Some of them, when greeted with the sudden blaring of music from their speakers, may immediately hit the BACK button of their browsers.

You need to remember that there are people who browse the Internet in public libraries, surfing centres, at work, or in the dead of the night when others are asleep. Others may already have their favourite music playing on their computer speakers, and your auto-playing music file will only cause them to be annoyed. So it’s always better to give the controls for the players.

Even if you are satisfied that your website has the type of target audience that will enjoy your background music, there are alternatives to automatically playing music that you might want to consider. For example, giving visitors a link which they can click to play music would allow you to showcase your music while remaining sensitive to your visitors' preferences.

After clicking on the “Play music” link, the music can start playing in the background or even you can give the controls for the player to control the music.

That’s it. Hope this is helpful.

Friday, April 24, 2015

How to Host Custom Web Fonts on Your Server and Use Them with @font-face

I was designing a website for an ashrama. They wanted the header to be displayed in Sanskrit. So I was looking for a solution and solved it with the below solution. This may be helpful to you so thought of sharing it. This is not only for Sanskrit font but for any customized font you can use this technique.

Why upload a font to your server?

If we design a website using a font that only exists locally on your computer, visitors won't see that font unless they also have the same font installed locally. To make a custom font appear for all visitors, upload the font file(s) to your web server and define the font in your CSS using @font-face.

It is assumed that you have permission to use the fonts from the font creator and that you have permission to upload files to the server. We need to have the permissions for the font before using them on a public website. Otherwise you can create your own fonts using the FontForge or any other typesetting software.

Supported formats and browser compatibility (quick note)

Modern practice: include WOFF and WOFF2 for best compression and browser support. Keep TTF for some older browsers and EOT for very old IE (IE8 and below). The original article demonstrates TTF and EOT — those examples are kept below, but a modern pattern is also provided.

Steps to upload and use a custom font

  1. Download the new font file and save it locally. If the file is compressed, extract it.
  2. The extracted files commonly include .ttf (TrueType) or .eot (Embedded OpenType). Consider generating .woff and .woff2 for modern browsers.
  3. If you don't have an .eot file and need legacy IE8 support, you can convert .ttf to .eot. (You can use tools such as FontForge linked above.)
  4. Upload the font files to a folder on your website, e.g. /fonts/. If you plan to use multiple custom fonts, create a fonts folder for organization.
  5. Open your site's CSS and add @font-face declarations for each font you uploaded.

Original example from the article (kept as the author provided)

@font-face {
font-family: 'Font_Name';
src: url(directory_path/newfont.ttf);
}

@font-face {
font-family: 'Font_Name';
src: url(directory_path/newfont.eot);
}

You can also set font weight, style, etc.:

font-weight: normal;
font-style: normal;

You can replace 'FontName' and 'directorypath/newfont.ttf' with the real font name and path.

That's all. Now I will tell you how you can use it in the web page. Below is the code you can use in the html file.

          span style="color:#FFD700;font-family:'Font_Name';font-size:23px;">|| Om Sri Mahaganapathaye Namaha | |<        /span >

This will display the content with "Font_Name" font. That's it. Hope this is useful. Happy coding.


Recommended modern @font-face (improved)

Use multiple formats with format() hints and include font-display for better rendering. Example:

@font-face {
  font-family: 'Font_Name';
  src: url('/fonts/newfont.woff2') format('woff2'),
       url('/fonts/newfont.woff') format('woff'),
       url('/fonts/newfont.ttf') format('truetype'),
       url('/fonts/newfont.eot'); /* IE9 Compat Modes */
  font-weight: normal;
  font-style: normal;
  font-display: swap; /* improves perceived performance */
}

Notes:

  • Place the most compressed, modern format first (woff2), then fallbacks.
  • Include the .eot at the end for very old IE if you need it.
  • Use the correct MIME types on your server (e.g., font/woff2, font/woff, application/vnd.ms-fontobject for .eot).
  • If fonts are served from a different domain, set Access-Control-Allow-Origin on the font-hosting server to avoid CORS errors.

Example usage in HTML/CSS

<span style="color:#FFD700; font-family: 'Font_Name', serif; font-size:23px;">|| Om Sri Mahaganapathaye Namaha ||</span>

Provide fallback fonts in the font-family stack to ensure graceful degradation.

Troubleshooting

  • Font not loading: Check browser developer console for 404 or CORS errors and verify file paths.
  • Wrong file served: Ensure server sends correct Content-Type for fonts.
  • Licensing issue: Confirm you are allowed to host and use the font on your site.

Additional tips

  • Consider using font subsetting to reduce file sizes for large Unicode fonts (for example, Sanskrit glyphs only).
  • Test in multiple browsers and devices.
  • If you prefer a GUI for conversion and generating @font-face kits, tools such as FontForge can help (link above).

References

Happy coding.

Saturday, April 18, 2015

How to Create an Android Trial App That Expires After a Fixed Period — 3 Methods

When we start to develop any commercial android application, we may need to develop a trial application which runs on the user's device for a specific time and forces the user to buy the application to use it further.

Below are three techniques you can use to implement a time-limited trial in an Android app, with pros and cons for each.

1) Save first-run timestamp locally (easiest)

When the user runs the application for the first time, save the current date and time to SharedPreferences, a file, or the app database. Every time the app starts, compare the current date/time with the saved first-run timestamp to determine whether the trial period has expired. If it has, call finish() or otherwise prevent further use.

Pros:

  • Very easy to implement.

Cons:

  • Easily broken by uninstalling and reinstalling the app (which clears the app data), or by manipulating the device clock.

2) Hard-coded end date (simple, but flawed)

Hard-code a single end date for the trial in the application. All users stop being able to use the trial after that date.

Pros:

  • Easy to implement.

Cons:

  • Can be bypassed by changing the device date/time.
  • All users share the same end date (not individualized).

3) Server-validated device registration (recommended, most robust)

This approach requires a server and a database. Whenever the app starts, the device sends a unique device identifier to your server. The server checks whether there is already an entry for that device; if not, it creates one with the current date/time as the trial start. On each app start the server evaluates whether the trial period has expired and communicates the result back to the app.

Notes and links:

Pros:

  • Much harder for users to bypass (uninstall/reinstall and device clock changes do not reset server records).

Cons:

  • Requires extra infrastructure (server + database) and careful handling of identifiers and privacy.

Where to do the check in your app

Do the trial expiration check in the onCreate() of your main Activity. If the trial has expired, show an AlertDialog that points the user to the full/commercial version on Google Play and then call finish() when the user confirms.

Useful links:

Example flow (high level, keep this as guidance rather than exact code):

  • App starts -> collect device identifier -> POST to server endpoint -> server replies {"expired":true/false} -> if expired show dialog and call finish().

Security and privacy considerations (brief)

  • Be careful with device identifiers and permissions. Some identifier APIs require runtime permissions or are deprecated on newer Android releases; review current Android docs before choosing an identifier.
  • Document how you store and use device identifiers in your privacy policy.

Closing

Third approach is the most robust and is the recommended way to implement a trial application that cannot be easily broken. It requires more effort (server + database) but provides the best protection for commercial apps.

Happy coding.