Using Special Fonts in Visual Studio 2013

Encountering a small issue with Visual Studio 2013. My application, developed using html and javascript, utilizes a custom font. When attempting to run the application on a different computer that does not have the font installed, it fails to display correctly. As a result, I am unable to publish my app in the Windows Store.

I wonder if there are specific settings I need to adjust in Visual Studio? Here is the CSS code snippet. Can anyone provide guidance on what steps need to be taken?

@font-face{
   font-family: 'custom_font';
   src: local('AngryBirds'), url('AngryBirds.ttf') format('truetype');
}
htmlcssvisual-studio-2012

Answer №1

The key to success lies within the src attribute:

src: local('AngryBirds'), url('AngryBirds.ttf') format('truetype');

In order to make this work, you must either host the font on a remote server that is accessible online and update the url field with its location, or you can store the font locally as indicated in the local section.

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

Maintain the fixed position of the table header while scrolling

I am facing an issue with my table setup - I want the header to stay fixed while scrolling through the body. Here is how my table structure looks: <table> <thead> <tr> <th>Header 1</th> ...

jqueryhtmlcsshtml-tablecss-position

Adding EventListeners for Click Handling: A Step-by-Step Guide

Here is the part of my code in HTML: <!DOCTYPE html> <html> <head> <h> <title> This page</title> </h> </head> <body> <button id = "go-button" >GO ...

javascripthtmlcsswebfrontend

How can I utilize CSS to dictate color schemes on an HTML5 canvas element?

Currently, I am working on a checkers project where the first step is to create the initial board. The way we are currently implementing this has raised a philosophical concern. We are using the fillRect function to define the color of the "dark" squares a ...

csshtml

Tips for adjusting the font size of a Chip using Material-UI

I am using a widget called Chip const styles = { root:{ }, chip:{ margin: "2px", padding: "2px" } } const SmartTagChip = (props) =>{ const classes = useStyles(); return( <Chip style={{color:"white&q ...

javascriptcssmaterial-ui

LESS: Using variable values in mixin and variable names

I am looking to simplify the process of generating icons from svg-files while also creating a png-sprite fallback for IE8 support. I am using grunt.js and less. I was inspired by the implementation on 2gis.ru: (in Russian), where they used technologies s ...

javascriptcssnode.jssvgless

Ways to create collapsible navigation bars in your website

As someone exploring client-side development, I may be misusing the term "collapsible" in my title. What I aim to accomplish in my web application is allowing users to collapse header bars into small chevrons and expand them back when necessary. I am on t ...

javascripthtmlcsstwitter-bootstrapnavigation

Unexpected activation of Internet Explorer media queries causing display issues

Check out my CSS code below: @media all and (max-width: 500px){ .calendar_head{ height: 120px; line-height: 60px; } } .calendar_head{ width: 100%; font-weight: 700; color: #6a7783; text-align: center; line-heigh ...

htmlcssinternet-explorermedia-queries

Create a stylish border around an ion-card using a sleek black bar

I have a card element with a title and subtitle, and I want to add a black bar above the header. <ion-list> <ion-card (click)="onEventClick(event.id)" *ngFor="let event of events"> <ion-card-header> ...

htmlcssionic4

Unable to hide the mobile menu button

I am currently working on a fun website project . I am facing an issue with the mobile menu button not disappearing using display:none in Safari on my iPhone when in landscape mode, even though it works fine in Chrome. My goal is to make the #menu-button ...

javascriptjqueryhtmlcss

Avoiding the use of a particular URL when using this.router.navigate() in AngularJs

In my angularJS registration form, I am using a bootstrap template for the design. The URL path to access the form page is http://localhost:4200/signup <form method="post" (submit)='register(username.value,email.value,password.value)'> ...

htmlcssangularjsbootstrap-4

How can PHP be used to display a varying number of items in a slider depending on the size of the screen?

I am currently utilizing media queries to adjust the layout of my website. My query is: How can I display a different number of items in a slider based on the screen size? For small screens, I have included the following code: <?php if($i == 4) {echo ...

phpcss

Z-order for ClockPicker

Within my application, I've implemented a pop-up for inputting event data. One of the fields within this pop-up is for setting the time using the DateTimePicker from MUI. <Popup width={600} height={600} ...

csstypesmaterial-ui

After the checkbox is clicked, I must send a boolean value to the function through the input flag in AngularJS

<input class="bx--toggle" id="toggle-view" type="checkbox" ng-model="vm.monthView" ng-change="vm.getRelevantData()" ng-attr-data-modal-target="{{vm.alertForSaveAll ? '#add-save-all-alert-modal': 'undefined'}}"> Within this p ...

javascripthtmlangularjs

Prevent the row height from fluctuating following the fadeOut() effect

Currently, I am facing an issue with two elements on my page: .start_over_button and .speed_buttons. In CSS, the .start_over_button is set to display: none, and in my JavaScript code, I have it so that when .speed_buttons are clicked, they fade out and the ...

jqueryhtmlcss

The alignment of list bullets is inconsistent across different web browsers

Check out this code snippet on JSFiddle: http://jsfiddle.net/PZgn8/8/. It's interesting to see how the rendering differs between Chrome 27 and Firefox 21. Despite the difference, I believe Firefox is actually displaying the desired outcome. <ul st ...

cssgoogle-chromefirefox

Refreshing page using jQuery following an AJAX request

My script is functioning properly, however the use of location.reload(); does not seem to be effective. I am aiming to refresh the page after deselecting the last checkbox. $(".catcf, .coursetype, .yearcf, .manthcf, .venucf").on('click' ...

htmljqueryajax

Tips for accessing a local file on a website through HTML - easy steps to follow!

Is it possible to open a local (jpg or pdf) file from a random website that is not under my control? I have tried editing the HTML code of a site in Chrome by replacing existing links with ones linking to my local file, but when I click on them, nothing ha ...

htmlgoogle-chromelocal

Loading jQuery on an ajax request

The loader is working with the code now, but it is not replacing and calling the URL. The ajax url call should be placed within searchable. <button onclick="myFunction()">LOAD</button><br /><br /> <div class="spinner bar hide" ...

javascriptphpjqueryhtmlajax

The form within the while loop is only functioning with the initial result

Within a while loop, I have a form that is being processed with ajax. The issue is that it only works on the first form and not on the others. Can someone take a look? <?php while($a = $stmt->fetch()){ ?> <form method="post" action=""> ...

javascriptphpjqueryhtmlajax

How to design a trapezium shape using CSS and HTML

While there are many tutorials available for creating Trapezoids with CSS3, I am interested in making a four-sided shape where none of the sides are parallel (trapezium), similar to the one shown in the image below. Can this be achieved? ...

htmlcsscss-shapes