Utilize @font-face when saving a webpage

I've been experimenting with @font-face to embed a custom font, but I've noticed that when saving the page locally on my computer, the font is not being saved along with it. This issue has occurred consistently across Firefox, Chrome, and Safari.

Is there a way to force the font to be embedded when saving the page for offline viewing?

Answer №1

Thanks @PartiallyFinite, that's a great idea!

The order of the URL calls is crucial, so I am sharing my @font-face CSS property:

@font-face {
    font-family: "my_custom_font";
    src: url('my_custom_font.eot');
    src: url('my_custom_font.eot?#iefix') format('embedded-opentype'),
         url(data:font/truetype;charset=utf-8;base64,AAA...AAA=) format('truetype'),
         url('my_custom_font.woff') format('woff'),
         url('my_custom_font.ttf') format('truetype'),
         url('my_custom_font.otf') format("opentype"),
         url('my_custom_font.svg#my_custom_font') format('svg');
    font-weight: normal;
    font-style: normal;
    font-variant: normal;
}

Notes:
url(data:font/truetype) needs to be placed before .woff so Firefox uses base64 instead of .woff.

Tested on Firefox 20.0, Google Chrome 26.0.1410.65, Safari 6.0.

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

Select2 input field not receiving focus when navigating by tab key

When attempting to tab through the fields, I encounter an issue where the fields do not highlight as expected. Despite trying various solutions, such as the following CSS code: .select2-selection__rendered:focus { outline: none !important; box-shadow: ...

Trouble arises when displaying data using AngularJS in an HTML environment

I'm currently facing a challenge understanding where I went wrong in my code. My goal is to display the initial array values in the table data, but so far, I haven't had much success. Here is the HTML section of the code; <body ng-controller ...

Can you place 4 table cells in the first row and 3 table cells in the second row?

Exploring the world of HTML and CSS designs for the first time. Here's a code snippet I've been working on: <html> <body> <table width="100%"> <tr> <td width="25%">&#160;</td> ...

Having trouble with jQuery hover and AJAX loaded content not functioning properly?

When I receive content through AJAX, it looks like this: <div class="message" id="1"> blah <div class="details" id="1" style="float: left; display: none;">hidden information</div> <div class="spacer" style="clear: both;"&g ...

Use the $.get() method in JavaScript to send a parameter to my controller function

My objective is to showcase the event details in a modal. To achieve this, I am running a JavaScript script that calls the "GetEventsDetails" method in my "Event" controller with the event ID. While debugging in Chrome, I can see the ID being passed corre ...

Locate numbers 2, 3, 6, 7, and 10, and continue in numerical order, within the

Having trouble with this one. Does anyone know how to display the items like this: 2, 3, 6, 7, 10 and so on... Is there a jQuery or CSS hack that can achieve this? I'm stuck trying to figure it out .container { display: flex; flex-flow: row wra ...

Using JavaScript to convert the text within a div into negative HTML code

I am working with this specific div: <div class="signs" id="signs" onclick="toggle()">&#43;</div> It currently displays the positive sign. I have set up a JavaScript function that is triggered when the div is ...

Create a dropdown menu in jQuery by using the prepend trigger

I'm attempting to utilize jQuery to prepend a trigger to a menu and then have that trigger toggle child elements. Unfortunately, the code below is not opening the sub menus when using jQuery prepend. Can anyone provide a suggestion for a fix? HTML & ...

Fixing the background transition issue on Safari is a common problem that many users encounter

My background image, which is overlaid with a gradient, does not show up on Safari (although it works perfectly on Chrome). body{ background:linear-gradient(rgba(0, 0, 0, 0.95),rgb(0, 0, 0, 0.95)),url("https://www.w3schools.com/cssref/img_tree.gif" ...

Interacting with Apexcharts: Exploring a Tiny Column with Hover

While using apexcharts, I encountered an issue with small columns. It can be quite challenging to render the tooltip properly because you have to hover very precisely over the column. Query: Is there a way to expand the hover area to make it easier to int ...

What is the best way to automatically clear an input field after a specified delay?

On my landing page, I have a single input field where users can enter their email address. Upon successful entry... success: function(result){ console.log(result.status); if(result.status == true) { $('input').attr("style", "color:green" ...

Creating a banner image that scrolls while maintaining a fixed size

I'm looking to add a banner image with a scrolling effect as users navigate down the page, but I'm not sure what this technique is called. An example of what I'm trying to achieve can be seen on this site. As the user scrolls down, the res ...

Using line breaks in JSX

In my application, I save all the text in a settings.ts file. However, I am facing an issue where \n does not seem to add line breaks as expected. Are there any alternative methods to include breaklines in my text? My tech stack includes Next.js, Reac ...

Should you prioritize internationalizing your image alt attributes?

Do you localize your alt attribute in img tags for internationalization? Is it beneficial in the long run? ...

Creating a logo that scales seamlessly across different web browsers while maintaining responsiveness through

I am working on making this logo align perfectly with all screen resolutions and browsers, while ensuring it stays at the exact center (both vertically and horizontally) of the #container. If the resolution drops below 320px, I want the company name to dis ...

Navigating through multiple overlapping scenes in Three.js using Orbit Controls

Seeking assistance with a dilemma involving the use of Orbit Controls with Multiple Overlapping Scenes. To showcase the issue, I made adjustments to the example found at multiple scenes and developed a test specific to my needs. The code can be accessed h ...

Transfer text from one form to a text field on a different website

I've created a form that allows users to input numbers in a field and then directs the page to a specific URL. Here's the code snippet: <html> <head> <meta charset="utf-8"> <title>Tracking</title> </head& ...

When adding my Angular web app to the home screen on iOS Safari, the icon appears as a screenshot instead of the specified apple-touch-icon

Despite adding an apple-touch-icon link to my index.html with a 150x150 PNG image, when I try to add my Angular web app as a shortcut to my iOS home screen from Safari, it only appears as a screenshot of the app page. Below is my HTML code: <!doctype ...

Edit HTML and CSS in live mode while also running JavaScript for instant enhancement

Recently, I created a script that allows me to build a web page in real-time. I can input HTML and CSS codes without any issues, but unfortunately, I am unable to execute JavaScript due to the limitations of the string-based editor I am using. Can anyone o ...

data-cy appears in the DOM structure, yet remains unseen

I'm seeking some clarity on how to effectively use Cypress. While writing end-to-end tests, I encountered a failed test due to the element not being visible. A helpful answer I found assisted me in resolving this issue by clicking an element that was ...