The text font family isn't displaying the £ symbol accurately

On my webpage, I have decided to use the font "Century Gothic, Arial, Courier New, Sans-Serif" for my text. However, whenever I include the £ character, it does not display correctly on various browsers like Firefox, Explorer, Chrome & Safari.

HMTL:

<span>£</span>

SPAN CSS:

font-family: Century Gothic, Arial, Courier New, Sans-Serif;

Instead of showing the correct £ symbol, the aforementioned text is displayed as a question mark within a black diamond shape. Can anyone explain why this issue is occurring? Should I consider using a different font family to accurately display the £ sign? All other text and characters on the webpage, which are also styled with the same font family, appear correctly.

htmlcsstextfonts

Answer №1

Remember to use &pound; instead of the £ sign to ensure it displays correctly on all browsers. For example:

CSS:

body { font-family:Century Gothic, Arial, Courier New, Sans-Serif;}

HTML:

<span>&pound;</span>

Answer №2

Consider including the metacharset tag within your <header>

<meta charset="utf-8">

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

Comparing Django forms to conventional forms

As I work on my Django website, I find myself torn between utilizing Django-Forms and sticking with the traditional hand-coded HTML forms. While HTML forms offer certain benefits that align with my needs, I must admit that I have also experienced advanta ...

htmldjangodjango-modelsdjango-forms

Navigating Between Web Pages

Hello there! I'm curious to learn how I can establish routing between multiple pages. Specifically, I have an index page and I'd like to navigate to other HTML pages within my views folder. Is it possible to achieve this without relying on the An ...

htmlcssangularjs

Chrome Table not behaving as expected when expanding div

I'm encountering an issue on my website where everything works perfectly in Firefox, IE, and Safari, but there is a glitch in Chrome. You can see the problem here: http://tinyurl.com/chxg2tb In Chrome, the table at the bottom extends beyond the cont ...

htmlcssgoogle-chromecss-tables

Using jQuery.post to select and manipulate the target div displaying Google search results

I am trying to implement a custom form and display the results in a specific target DIV ('results') using ajax. However, I am facing difficulties and unable to figure out what is going wrong. Even after referring to this demo (https://api.jquery ...

jqueryajaxhtmltarget

Sending HTML parameters to a PHP file

I have been trying to pass the parameters from the current HTML page to a PHP page using a form. In my header in the HTML, I currently have the following function: <script> function getURLParameter(name) { return decodeURIComponent((new Re ...

javascriptphphtml

Adjusting the height of a jQuery Mobile collapsible post-expansion

My jQuery collapsible is not resizing properly to fit the expanded content. Below is an example of the collapsible structure: <div class="row collapsibles" data-role="collapsible"> <h1>Supercategory A</h1> <div class="col-xs-7 ...

jquerycssjquery-mobilejquery-mobile-collapsible

What is the best way to save geolocation coordinates in a Javascript array?

I am attempting to utilize HTML5 geolocation to determine a user's location and then store the latitude and longitude coordinates in an array for future use with Google Maps and SQL statements. However, when I attempt to add these coordinates to the a ...

javascriptarrayshtmlgeolocation

HTML5 footer element is the perfect way to add a

I'm currently working on creating a footer that stretches across the entire width of the screen. Originally, I had it nested within the body tag which was centered with a width of 825px. To remove this width constraint, I moved the footer under the ht ...

htmlcssalignment

Is there an alternative to using CSS units of measurement when using the .css() method?

Is there a way to use .scrollTop() and .css() to adjust the margins of an element so that it floats up only when the page is scrolled, but stops at a certain margin value? I want the element to float between specific values while scrolling. The issue I am ...

jquerycss

Ways to conceal a division by selecting an anchor button on this element

One thing I'm curious about is how to hide only the current div that I click on. Any suggestions on how to achieve that? $('.ads-close-btn').click(function() { $('.full-width-add').hide("slow"); }); alert('My main qu ...

javascriptjqueryhtmlcsshide

When using the 'rtl' direction in Dojo Text, all special characters are aligned to the right

I'm having an issue with keeping the text of a button centered followed by an icon. The code works fine until I add special characters in front of the button text. In that case, the special characters are placed after the text followed by the icon. I ...

javascriptcsshtmldojo

incorporating additional lines into the datatable with the help of jquery

I am attempting to directly add rows to the datatable by assigning values in the .js file through the Metronic theme. However, despite displaying item values during debugging, the values are not being added to the datatable row array and thus not reflect ...

jqueryangularjsdatabasehtmldatatable

Is there a way to style CSS Content to appear both italicized and bold?

As I work on my project, I am aiming to style the CSS content class in both italic and bold formats. Take a look at the code snippet below. div::before { content: "text"; color:black; } <div></div> My goal is to achieve this exclu ...

css

Resizeable drag and drop two-column design

Experimenting with creating a drag re-sizable layout using jQuery UI was quite an interesting challenge for me. If you want to check out the result, here is the link. However, my original goal was to achieve something different from what I ended up with. ...

jquerycssjquery-ui

How do I add an underline to a Bootstrap navbar with spaces on both sides?

I'm currently working on creating a menu using bootstrap 3, and here is the code snippet I have implemented: <section id="menu"> <div class="container-fluid"> <div class="row"> <div cla ...

htmlcsstwitter-bootstrap-3navbar

Adding variables to a div using jquery

Is there a way to use jQuery to append variables to a div? Below are my codes, but I am looking to display div tags in the append. For example: .append("" + p + "") var image = item.image; var label = item.label; var price = item.price; ...

javascriptjqueryhtmlcssfrontend

Looking for assistance in minimizing the gap between the banner and content on my Weebly website

Currently, I am utilizing Weebly templates and working with the CSS files for my website located at www.zxentest.weebly.com. I am seeking assistance in reducing the space between the yellow banner and the faint line on either side, as well as decreasing t ...

htmlcssreduceweebly

Issues with implementation of map and swiper carousel functionality in JavaScript

I am trying to populate a Swiper slider carousel with images from an array of objects. However, when I use map in the fetch to generate the HTML img tag with the image data, it is not behaving as expected. All the images are displaying in the first div a ...

javascripthtmlarraysswiper.js

Choosing the anchor text in the second td element of a table using jQuery

I have a webpage with the following HTML structure... <input type=text id="search"> <table> <tr> <td></td> <td><a href="">Some text...</a></td> <td></td> </tr> </table> This co ...

jqueryhtml

SliderToggle and Div implementation in Internet Explorer (IE) using jQuery

I'm encountering an issue with jQuery's slideToggle function and a div specifically in IE. Here is the code snippet causing the problem: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.d ...

jquerycssinternet-explorer