Issue with font compatibility on PC

As I develop a new online store on Tictail (not yet live, so no link available), I am encountering an issue with the font PT Sans Narrow. While it appears correctly in Safari and Firefox on my iMac, my friend notices display problems when using Firefox and Internet Explorer on his PC.

This is the snippet of code that I am currently working with:

<link href="{{assets_url}}/shared/css/base.css" rel="stylesheet" type="text/css">


body {
    background-color: #fff;
    font-family: 'PT Sans Narrow', sans-serif;
    letter-spacing: -0.02em;
    font-size: 14px;
    line-height: 1.5em;
    color: #222;
    -webkit-font-smoothing:antialiased;
    height: 100%;
}

I'm seeking guidance on identifying the root cause of this problem and finding a solution to ensure consistent font display across different browsers. Can you offer any advice?

cssfonts

Answer №1

The reason is that Windows does not come with the 'PT Sans Narrow' font by default. To use this font, you will need to add it as a web-font. One way to do this is by accessing it through Google Fonts.

Here's a simple method:

<link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow' rel='stylesheet' type='text/css'>

Answer №2

Ensure you place this code snippet at the beginning of your base.css file to include PT Sans Narrow from Google Fonts.

@import url(http://fonts.googleapis.com/css?family=PT+Sans+Narrow:400,700);

Whenever a webpage loads, it will first verify if the font is available on the user's device. If not, it will be fetched from Google Fonts.

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

Variety of color palettes within a single style sheet

My theme features various styles, including different color schemes. Currently, I load the default CSS first and then an additional stylesheet with specific colors based on the chosen color scheme. However, this process is causing a delay in my site' ...

css

Tips for repairing a horizontal line at the bottom of the <TD> tag and placing text on top

I am working with an HTML table that contains a single TR tag and two TD tags. Each TD has two HR tags creating horizontal lines, along with some text. I am looking for a way to keep the text aligned at the top of the TD and the horizontal line at the bott ...

htmlcss

Select all feature in checkbox is malfunctioning

I need to implement a feature with 3 checkboxes: When the "A" checkbox is clicked, only "A" should be highlighted. Upon clicking the "C" checkbox, only "C" gets highlighted. If the "B" checkbox is clicked, both "A" and "B" nee ...

jqueryhtmlcsstwitter-bootstrap

Utilizing fab-icons with CDN in Next.js version 13.4

Currently, I am working with the latest version of Next.js (13.4) and I would like to incorporate a single Icon into my project using Font Awesome CDN to avoid increasing the overall app size. However, when I include the following code snippet in my layou ...

javascriptcssreactjsnext.jsfont-awesome

The _rfs.scss width rule in Angular-Bootstrap-NgBootstrap is overriding the column width of the col-rules

The Dilemma I am currently working on an Angular project that incorporates Bootstrap and ng-bootstrap. My intention is to utilize the grid system within this project, but I encountered some bugs along the way. When trying to render the following HTML/TS ...

cssangularsassbootstrap-5ng-bootstrap

Transform Your HTML Into a Stunning Canvas

Help Needed: Despite searching through various questions on Stack Overflow, I have not been able to find a solution to my problem. I am attempting to transform HTML into Canvas using either JavaScript or jQuery. Check out the JsFiddle Demo here .conta ...

csshtmlcanvashtml5-canvas

Tips on adjusting the height of a background image based on the content of the page

Struggling with getting my background image to adjust based on page content size. The app has a main div and sidebar navigation. Background styles are set for the main div: const styles = makeStyles(theme => ({ backgroundStyle: { flexGrow: 1, ...

cssreactjsmaterial-ui

Ways to apply CSS class styles when a button is clicked in Angular

How can I create a button that toggles between light and dark mode when clicked, changing the background color and font color accordingly? I need to add CSS classes .bgdark and .textlight to the 'mainbody' for dark mode. HTML <div cla ...

cssangulartypescriptbuttonbootstrap-4

The table value is only updated once with the onclick event, but the updated value is not displayed when the event is clicked again

I am facing an issue with updating names in a table through a modal edit form. The first name update works perfectly, but the second update does not reflect in the table. I want every change made in the modal edit form to be instantly displayed in the tabl ...

javascriptcssajaxhtmldom

Creating a dynamic visual effect with image overlap in the Sencha Touch carousel

I've created a carousel that loads multiple images, but I'm experiencing an issue where each image is overlapping with another image from a different card. Here's a visual of the problem: As shown in the screenshot, parts of one image are a ...

csssencha-touchextjscarousel

Creating visually pleasing HTML emails with uniform table data heights

Struggling with Outlook while designing an HTML template. My row has 2 td elements with different content, and setting equal heights is proving to be a challenge. The fixed height on the td causes issues when switching to mobile view in Outlook as text wra ...

htmlcsshtml-email

AngularJS static list with dynamically changing content

Seeking inspiration on creating an AngularJS information monitor with a maximum of 6 rows. The display should show new rows at the top, pushing out the oldest row from the bottom when there are already 6 rows visible. Rows can also disappear unexpectedly. ...

javascriptjquerycssangularjsangularjs-directive

customized hover effect based on the image's specific characteristics

I need to change the background color of a set of images based on which image is hovered over. For example, when I hover over the 5th image, the first 5 images' background color should change. Similarly, when hovering over the 4th image, the backgroun ...

javascriptjqueryimagecss

Steps for setting a background image for a div

I am facing an issue with 3 horizontally aligned images and a background image. The problem is that when I set the background image for the aligned images, it flows over them instead of staying behind. I want the 3 aligned images to be on top of the backgr ...

htmlcss

The issue of CSS Grid not adapting fully to different screen sizes and

Recently, I took on a coding challenge from Frontend Mentor (this one) and managed to complete it successfully. However, the grid I designed is not fully responsive. It only adapts correctly when the page width matches the media query specifications. The c ...

htmlcss

In CSS, create a hover effect that blurs all child elements except the one being hovered on. This effect should

I've encountered a challenge with blurring all children of a parent when hovering over a specific child. While I've made some progress in achieving this effect, the previous child does not get blurred if you hover over the second child, for examp ...

htmlcsscss-selectorshover

Using Angular to create a nested routerLink within a routerLink

Is there a way to dynamically change the content of a page loaded using router link without duplicating the HTML code for the header and footer sections each time? I want to navigate between different pages with routerLink and have only the main content ar ...

htmlcssangularangular-routing

Does CSS give preference to max width specifications?

Within a div, I have two child div elements. The parent container utilizes a flexbox layout, with preset maximum widths for the children as shown below: <div class="wrap"> <div class="one">Hi</div> <div class="two">my secon ...

htmlcssflexbox

Achieving successful functionality with position:relative in IE9

Having difficulty with the position: relative property in IE9. Check out this demo for reference: <div style="overflow:scroll;height:120px;"> <table id="table" width="100%"> <tr style="position:relative;background-color:#1b72a4;"> ...

javascriptjqueryasp.nethtmlcss

Maintaining the proportions of divs containing background images

I'm dealing with a background image that features a large blue diagonal line where we want our content to align. However, I'm encountering difficulties in maintaining the alignment of the content as it resizes (resulting in the background diagon ...

htmlcsstwitter-bootstrap-3