"Why does the font on my website look different on my computer before I upload it to my web host? How can I fix

I am currently developing a website and have chosen the font "PT Sans Narrow" for it.

Unfortunately, it seems that Chrome and many other browsers do not support this font by default.

Is there a way to include the PT Sans Narrow font with the website when uploading it so that visitors can view it correctly?

You can check out the current version of the website here.

As you can see, the text "Hi! I am..." is not in PT Sans Narrow as intended. How can I ensure that all text on the website is displayed in PT Sans Narrow?

Any help or suggestions would be greatly appreciated!

htmlcssfonts

Answer №1

Make sure to include a link in your header for the font.

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

Then, add the following code to your HTML:

<span class="pt-sans-narrow">Hi! I am ...</span>

Your CSS should have this style:

#pt-sans-narrow {
    font-family: 'PT Sans Narrow', sans-serif;
}

Edit

Upon reviewing your website, it seems like you are already accessing the font from the style.css file within the body tag. Simply adding the link to the header should make everything work smoothly.

Answer №2

If you want to incorporate a custom font into your website, you can do so by downloading the font file and then loading it in your CSS code.

To use the custom font, add the following code snippet to your stylesheet:

@font-face {
    font-family: "Custom font";
    src: url("../fonts/customFont-Regular.ttf");
}

Make sure to adjust the path to the font file accordingly. You can find more information on using custom fonts in CSS here.

Answer №3

After considering your feedback and reviewing the screenshots, it appears that PT Sans Narrow may not be the best fit for your needs. While my previous answer regarding PT Sans Narrow still applies, I have some alternative suggestions:

Consider replacing the instances of PT Sans Narrow in the header with the following link:

<link href='http://fonts.googleapis.com/css?family=Lato:400,300|Source+Sans+Pro:400,300' rel='stylesheet' type='text/css'>

You can then experiment with changing the font for the body. These fonts are similar to what you're looking for, so you could try something like:

body {
   font-family: 'Lato', sans-serif;
   font-weight: 300;
}

This adjustment should align more closely with your design preferences. Feel free to customize further by adjusting:

font-weight:400;

or 

font-family: 'Source Sans Pro', sans-serif;

Feel free to play around with these options and let me know how it turns out.

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

Steps to implement a text border in Raphael.js

I have a website dedicated to creating customized football jersey designs. I'm utilizing Raphael.js for customization, and I am looking for a way to add an outline to text using Raphael. My research led me to the suggestion of using the stroke proper ...

javascriptphpjquerycssraphael

Can the parent of a <div> be modified with JavaScript?

Is there a way to dynamically change the parent of a div element? Here is an example scenario: <body> <div id="div_a"> <div id="child"></div> </div> <div id="div_b"> </div> </body> I am looking ...

javascripthtmlweb

Unable to automate the selection of a dropdown menu using Selenium WebDriver

I am currently utilizing http://www.makemytrip.com/ This is the HTML code. <div class="mrgnBot30 clearFix"> <span class="watch_icn flL"></span> <div class="widget_inner clearFix suggest_me padBot15 flL"> <h3 class="clearFix has ...

javascripthtmldrop-down-menuwebdriverselenium-webdriver

Using jQuery Mobile to Recycle a Header and Navigation

I'm a beginner when it comes to jQuery Mobile and I'm struggling to grasp the concept of reusing headers and general navigation. Currently, I have a header with a menu button on the right. When the menu button is clicked, a popup shows up with l ...

jqueryhtmljquery-mobilenavigation

Mastering the art of utilizing the LESS preprocessor with React Create-React-APP

Is it possible to implement the LESS preprocessor in my create-react-app project? In my React code, I have the following: ReactDOM.render( <form> <input type="email" data-info="Enter Email" pattern="/\S+@\S+\.\S+/ ...

cssreactjslesscreate-react-app

Refreshing a webpage is not necessary when using a JQuery form within a div

I need help with some code I have. In my index.html file, there is a div: <div id="logindiv"> <?php require_once('login.php'); ?> </div> This div is utilized with jQuery: <script type="text/javascript"> $(document ...

phpjqueryhtml

Tips for incorporating a local image using file:// in JavaFX WebKit

I am facing an issue with displaying a picture in a JavaFX webview using local HTML. Despite writing the code, I am unable to show the image. The URL of the image is "file:/D:/a.jpg". //Main WebViewBrowser.java public class WebViewBrowser extends Appli ...

javahtmljavafxwebkit

Creating a circular gradient in CSS

Does anyone know the steps to create a radial gradient in CSS that will match the background shown below? ...

cssgradientradial-gradients

What is the best way to position two text fields next to each other on a webpage?

As I design a form for a landing page, my goal is to arrange the text input fields side by side in order to avoid making the form too lengthy. I am striving to achieve a layout similar to this: https://i.sstatic.net/PTCr4.png However, the task seems quit ...

htmlcss

Stunning CSS Image Showcase

When hovering over my image gallery, it works fine. However, I would like the first image in the gallery to automatically appear in the enlarged section instead of displaying as a blank box until hovered over. <!DOCTYPE html> <html lang="en"> ...

htmlcss

What is the method to switch between radio buttons on a webpage?

Here is an example of HTML code: <input type="radio" name="rad" id="Radio0" checked="checked" /> <input type="radio" name="rad" id="Radio1" /> <input type="radio" name="rad" id="Radio2" /> <input type="radio" name="rad" id="Radio4" /& ...

javascriptjqueryhtml

Steps for removing all inline styles within an element:1. Access the element's

I have a group of span elements containing texts generated by tinymce. <span class="ArticleSummary"> This content is produced using a text editor and may include various inline styles. </span> Typically, this text includes numerous inline s ...

javascripthtmlcss

Experiencing difficulties with setting the width of owl carousel

Here is the HTML code snippet: <div class="row"> <div class="col-lg-7 col-sm-6"> <div class="owl-carousel" id="homeCarousel"> <div class="item"> <img src="images/brela.jpg" alt="brela makarska"> </d ...

htmlcss

No content in Django's Bootstrap dropdown menu

I need assistance with extracting a list of objects and placing them in a dropdown menu. I have successfully achieved this, but the issue seems to be related to my HTML structure. Here is the code snippet from my HTML: <div class="dropdown"> < ...

htmlcssdjangotwitter-bootstrap

Animating or transitioning CSS keyframes to an inline value when the page is initially loaded

In my current project, I am working on creating HTML and CSS-based bar representations of percentage values. The structure of the code is as follows: Using HTML: <div class="chart"> <div class="bar" style="width:43%"></div> </div&g ...

jquerycsscss-transitionscss-animations

Browser fails to display input value when altered

I have noticed that when the value of the Input element changes, the browser does not display the updated value. However, you can verify this change by inspecting the DevTools in the browser. I am curious as to why the actual value of the Input element is ...

javascripthtmlreactjsnext.js

What is the best way to center a form element and an image link vertically within a div?

I'm having trouble aligning a search form and an image link within a div. I've attempted using 'display:inline', which did place them on the same line, but not in the way I wanted. I also experimented with adjusting width, float, and pa ...

htmlcssformsimagevertical-alignment

Alert: The attempt to include_once(headerSite.php) has encountered an error as the file does not exist in the specified directory

I'm a beginner in PHP and encountering the following errors: Warning: include_once(headerSite.php): failed to open stream: No such file or directory in C:\xampp\htdocs\dbtest\index.php on line 3 Warning: include_once(): Failed ope ...

phphtmlmysqlapache

Tackling the sticky header problem with in-browser anchoring and CSS dynamic height restrictions

I am experimenting with a unique combination of a Pure CSS in-page anchoring solution using scroll-behavior: smooth and scroll-margin-top settings, along with a sticky header for in-page navigation. By utilizing IntersectionObserver, I can identify when t ...

javascripthtmlcssintersection-observerscroll-margin-top

Strategies for Returning Multiple Values from a Function in JavaScript

Thanks in advance I am wondering how to extract multiple values from a code block using JavaScript. I am unsure if I need to use an array or something else as I am new to JS. Please consider the following HTML code: <div class="row"> ...

javascripthtmlarrays