The Usage of Comic Sans MS Font on Portable Devices

Although Comic Sans MS is widely disliked, I am creating a "legacy" website for someone who adored using that font. His fondness for it was often a running joke among his family and friends.

To pay tribute to him, I included a button on the site allowing visitors to toggle all text into Comic Sans.

Everything was functioning properly on my computer, but unfortunately, it did not work on mobile devices.

(I have temporarily disabled this feature.)

I am aware of Comic Neue (here) as an alternative option. However, before resorting to that, I am curious if there is a way to make true Comic Sans MS work. Would hosting the .ttf file on my site and linking to it be a viable solution? (I am unsure about the legality of this and the copyright regulations concerning that font.)

I also could not locate an online font repository from which to import it.

If any of you have a straightforward solution, your input would be greatly appreciated!

Answer №1

Did you know that Microsoft is the official licenser of Comic Sans? While referencing the font is allowed, hosting the TTF file requires a server license. You can obtain this license through Monotype, the authorized reseller for Microsoft.

More Information on Microsoft Fonts

Explore the Monotype Microsoft Font Library

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Position an element with absolute positioning to the right edge of a relative element

I have a situation where I need to align the end of a position absolute element with the end of a relative element, but the relative element's width is not fixed and may vary based on content. https://i.sstatic.net/L2sLP.jpg This scenario arises as ...

Variety of HTML tags yet identical ID

Is it possible to have two elements with different types – such as a div and an ul with the same id in HTML? Here is an example of HTML code: <div id="articleOptions"> <ul id="articleOptions"> <li>Share</li> ...

Issues with radio buttons not functioning or being able to be selected in Internet Explorer

My radio buttons are functioning perfectly in Chrome, Firefox, and Safari, but for some reason, they are not selectable in Internet Explorer (Version 7). Any suggestions on how I can resolve this issue? HTML: <label> <input type="radio" name ...

JS has the ability to determine the media style of a DOM element

I am trying to retrieve the CSS display property of a DOM element. Normally, I would use something like document.getElementById('hello-world').style.display. However, when the style is set using a CSS @media Rule, I do not see any change in this ...

Animate the transformation of a singular property (scale) while neglecting the modification of another (translate)

The issue at hand is the complexity of the transform property, which includes various parts like translate, scale, and more. This is a conceptual query concerning an element, such as .loader, which has transform: translate(10px, 10px) and requires animati ...

What is the best method for displaying the toggle button for Drawer/Sidebar above the main content and appbar?

After reviewing Vatsal's suggestion, it appears that moving the toggle button above the drawer is the solution to our main issue. By taking advantage of the open state of the drawer, we can adjust the left property of the button in the toggleButton cl ...

Do you have any recommendations to help me achieve the sticky footer hack?

Check out this awesome website: I've been working on incorporating a responsive design with a sticky footer, but I encountered some issues with incompatible CSS options. The fixed option wasn't meeting my needs either. For the homepage, I have ...

Incorporate an icon into a text input field using Material UI and React

I have a form with a text input element: <FormControl className='searchOrder'> <input className='form-control' type='text' placeholder='Search order' aria-label='Search&ap ...

"Switching a div's visibility when a link is clicked

http://jsfiddle.net/FsCHJ/2/ Currently, when I add another link, it automatically uses the same functionality as the toggle button. What I want is for "Toggle Edit Mode" to toggle a hidden div on and off. I attempted to modify the code from $("a").click(f ...

The CSS class is mistakenly being applied to the entire page instead of just the specific div it was

Here is the HTML code I am working with: <!DOCTYPE html> <head> <title></title> {% load staticfiles %} <link rel="stylesheet" type="text/css" href="{% static 'portfolio/mystyle.css' %}" /> <link rel="styl ...

What is preventing this button from having a border-radius?

The red border is just for visual reference. I attempted using overflow: hidden but it didn't yield the desired outcome. My goal is to achieve the same border radius as the red border. Is there something amiss in my approach? Appreciate your assistanc ...

How to use Selenium WebDriver in Python to upload a file using a hidden input field

Html: <div id="js-cert-file" class="form-group"> <button id="js-ob-browse-n-upload" class="btn btn-ob browse-and-upload-onboarding-ssl-button" style=""> BROWSE & UPLOAD </button> <input id="js-cert-file" class="hidden btn btn-ob" ...

Detecting single letters in a sentence and changing their appearance using CSS

Looking to make a subtle change to text? I need to swap out single letters in a passage (I have a cat that ate a fish). Any ideas on how to do this? The goal is to input a block of text into a textbox, then display it in a div. I've had difficulty fi ...

The addClass method in jQuery is failing to append the specified class to the element

I'm currently working on a registration form that includes selecting your gender: My goal is to have the male icon turn blue when clicked, and the female icon turn pink. The color change currently works when hovering, but not when clicked. Here is th ...

Unable to achieve panel sliding out with jquery

I am attempting to achieve a sliding effect for the gray panel. My goal is to have the entire div (with a gray background) slide out when clicking on "target 1", "target 2", or "target 3" before the other colored panels slide in. Subsequently, when the u ...

Using Styled Components to achieve full width for input tag in relation to its parent

I am working with an input field that has a specific width set. My goal is to increase the width of this input field to 100% by selecting it from its parent component. Is there a way to achieve this without passing an explicit width prop in the styled c ...

"Placing drop-down animations in just the right spot

I'm currently working on adjusting the dropdown behavior for thumbnails when hovering over them. I want the drop-down to appear beneath the 'Caption Title' instead of above the image, but so far my CSS adjustments haven't been successfu ...

Expanding the CSS Search Box

Visit the link I've been working on coding a CSS text box. When you hover over the button in the provided link, you'll notice that the 'Type to search' functionality is working smoothly as it moves to the right. My current focus is on ...

What is the proper way to set a margin on a fixed div that has a width

I am looking to create a fixed header that allows the content (body) to scroll underneath it. The challenge arises when the parent element has some margin-right, causing the fixed header to extend beyond the parent's width and occupy 100% of the windo ...

Responsive Bootstrap tables nested within responsive tabs

Utilizing footable in conjunction with Boostrap Responsive Tabs leads to an issue post-resize. When the page is initially loaded on a desktop, everything functions properly until the screen is resized. Once the screen is resized, the tables within the tabs ...