Troubles with font rendering when printing a Bootstrap 4 website

After building a page with Bootstrap 4, I wanted to convert it into a PDF that maintained the exact look of the original. However, when printing using Google Chrome, there were some font-related issues. The letter "L" appeared bold in some instances, which led me to change the font to Times New Roman. While this resolved the issue with the Ls, other characters became bold. Testing by printing Bootstrap's homepage revealed the same problem.

Here is how the homepage appears in Chrome: https://ibb.co/XScJYph

Chrome's print preview can be seen here: https://ibb.co/jG3hWmm

And this is what the saved PDF looks like: https://ibb.co/MNBkRtY

I have experimented with different fonts such as Times New Roman, Arial, and Helvetica, but none seem to provide a consistent result. It's worth noting that the only CSS line used was: 

@media print {body {width: 8.5in;height: 11in;}}
, which shouldn't be causing these font issues.

If anyone has experienced a similar problem or has suggestions on how to overcome it while maintaining consistency, I would greatly appreciate your help. Thank you.

cssbootstrap-4printing-web-page

Answer №1

It seems like the issue might be related to your computer's fonts. Personally, I didn't encounter any problems when I tested the same scenario.

You could try checking your reader fonts or opening the .pdf file in Chrome as an alternative solution.

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

Footer panel in Bootstrap not aligning to the bottom of the page

I'm experiencing an issue with my footer getting stuck in the middle of the page. Strangely, this problem only occurs on one specific page, and not on any other pages. I've tried various methods to fix it, but none of them have been successful. ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

apply a border-radius to the top right corner only without affecting the other sides or background

https://i.sstatic.net/9YIiy.jpg I have been working on creating the top right triangle design shown in the image. However, I encountered an issue where applying border radius seems to affect all sides instead of just one as intended. Despite using border- ...

htmlcssborder-box

What is the best way to convert CSS to JSS for Material-UI styling?

I need to convert some basic CSS to JSS and include it in the global Styles.js file. The original CSS is as follows: .formdetail { display: grid; grid-row-gap: 10px; grid-template-columns: 1fr 3fr; margin: 20px; } .formdetail .cell { display: ...

cssmaterial-uicreate-react-appjss

Automatically expanding and contracting text input area that adjusts to different amounts of content up to a certain

While similar questions have been asked before, none of them quite address the specific requirements in my title. My goal is to create a basic textarea input that automatically adjusts its height based on content, up to a maximum height limit. Once this l ...

javascriptjqueryhtmlcsstextarea

How can you implement CSS styling for Next.js HTML during server-side rendering?

Explore Next.js and observe the page request in the network tab. The preview displays not only the HTML but a fully pre-styled page as well. https://i.stack.imgur.com/deJLY.png When working with Styled-Components and Material-UI, they offer the ServerSty ...

htmlcssnext.jsserver-side-renderingcritical-css

If the font size exceeds a certain value in SCSS, then apply a different value

Can SCSS handle this scenario? I am looking to set the font size to 22px in case it is greater than 30px, especially within a media query for a max width of 480px. ...

csssass

Improve the readability of text that is overflowing using CSS styling techniques

I am facing a problem with a table containing fixed-width content that doesn't always fit within the designated space. My goal is to truncate the text to a fixed width and add an ellipsis, while allowing the full text to be visible when hovering over ...

htmlcss

When hovering on the list items, the text-decoration with a border-bottom and vertically centered unordered list "jumps"

I'm specifically looking for a solution using CSS only. I have a navigation bar with an unordered list containing list items. My question is how to underline these list items with a border-bottom. The additional requirement is that the navigation bar ...

htmlcss

Aligning hyperlink with full-height image within a table cell (navigation buttons)

I am currently working on creating a traditional navigation bar that occupies 20% of the screen width and consists of 3 buttons. Each button is supposed to have an icon that is centered both vertically and horizontally. Additionally, I want the buttons to ...

javascripthtmlcss

How can I create a unique visual effect on the background in frontend development using chipped design techniques?

Creating a static website utilizing React. Description I am looking to incorporate a visual effect into the website pages, similar to the one demonstrated below. visual effect The goal is to design a rectangular background with triangles cut out from it ...

cssreactjsgraph

How can you stop Mobile Safari from causing font explosions?

Whenever I rotate my phone, Mobile Safari seems to enlarge certain fonts which is quite frustrating. This issue is really annoying me and despite trying various combinations with -webkit-text-adjust-size, the problem persists. Is there any new solution or ...

ioscssmobile-safari

Unable to execute multiple backstretch instances

I am having trouble adding two different backgrounds to two different divs or on the body and a div simultaneously. Only one of the two backgrounds is displayed. For example, on this page: The background shows up, but not the #sliders div. P.S. The Java ...

jquerycss

Creating and adding nested div elements with the power of JavaScript

My goal is to utilize JavaScript for updating the CSS layout as the webpage loads. Below is the code I have been working on: var container = 0; // Total UI Container var containerTitle = 0; // Title Container var article = 0; var articleTitle = 0; var ...

javascriptcsshtml

What is the best way to ensure that a Flex div and its child images stay confined within the boundaries of its parent container?

I'm struggling to create a responsive grid of images. I can't get the images to be both responsive with max-height and max-width, while also making sure the parent div takes up their full width. On the other hand, if I make the parent div the cor ...

htmlcssflexbox

How can I apply borders to individual columns within a Bootstrap table without affecting the rows?

My attempted solution involved adding th and tfoot. However, I faced issues with applying borders to only the td elements - border was not being applied at the bottom of the table, and the thickness and color of the borders were inconsistent between column ...

cssbootstrap-5

Header that sticks to the top of a container as you scroll through it

Many questions arise regarding sticky elements in the DOM and the various libraries available to handle them, such as jquery.pin, sticky-kit, and more. However, the issue with most of these libraries is that they only function when the entire body is scro ...

jqueryhtmlcsssticky

Using the foreach loop in CSS: A step-by-step guide

Hey there! I'm currently working on retrieving data from my database using a foreach loop in Laravel. My goal is to display the information horizontally, with one group of data next to another. However, I've run into an issue where the data is be ...

csslaravelloopsforeach

Is there a way to decrease the speed of a range slider?

Recently, I created a range slider using HTML, CSS, and JS to complement my Lua Nui. It's been working smoothly for the most part, but I've noticed an issue when sliding too quickly on the slider. As I slide it to the left, certain values fluctua ...

javascripthtmlcssluaslider

While typing in the box I am currently working on, another CSS box is shifting around

Whenever I try to add a paragraph to my box, the other one shifts. I've checked for any issues with margins or spacing, but nothing seems off from what I can tell. I have no clue how to resolve this. Here's how it appears before making any change ...

htmlcss

What are the steps to create a navbar positioned below an image?

I have my navbar on another page, but I would like to center it directly under the logo or image. My align-items property doesn't seem to work, so I've had to set the height in the .logo class. Is there any other method I can use to achieve this? ...

htmlcssimagenavbar