What is the process for integrating a personalized font into the <head> section of the ConvertTo-HTML?

I created a script to generate an HTML file containing information about the services on a computer, along with some additional styling.

$a = "<style>"
$a = $a + "BODY{background-color:peachpuff;}"
$a = $a + "TABLE{border-width: 1px;border-style: solid;border-color: black;border-collapse: collapse;}"
$a = $a + "TH{border-width: 1px;padding: 0px;border-style: solid;border-color: black;background-color:thistle}"
$a = $a + "TD{border-width: 1px;padding: 0px;border-style: solid;border-color: black;background-color:PaleGoldenrod}"
$a = $a + "strong{color: green;}"
$a = $a + "</style>"


$b = "<H2>Service Information</H2>"
$b = $b + "<p> This is the list of services that are on this system. It dispays <strong>both</strong> running and stopped services </p>"

Get-Service | Select-Object Status, Name, DisplayName | 
ConvertTo-HTML -head $a -body $b | 
Out-File C:\Scripts\Test.htm
start "C:\Users\neela\Desktop\Services In HTML.ps1"
Invoke-Expression C:\Scripts\Test.htm

Nevertheless, I am not satisfied with the font being used. I would like to implement the Ubuntu font from Google Fonts. Despite my efforts, the code I added does not seem to take effect:

$a = $a + "@import url('https://fonts.googleapis.com/css?family=Ubuntu');"
$a = $a + "font-family: 'Ubuntu', sans-serif;"

What steps should I follow next to make this change?

Google's Recommendations

To incorporate your preferred fonts into a webpage, insert this code within the section of your HTML document:

<style>
@import url('https://fonts.googleapis.com/css?family=Ubuntu');
</style>

Utilize the following CSS rules to define these font families:

font-family: 'Ubuntu', sans-serif;

Answer №1

To incorporate the style import in your code, make sure to place it above your current style block and then apply the CSS rule to the desired element. In this instance, I have chosen to apply it to the body tag. It is advisable to utilize here strings instead of += as they offer improved readability.

$a = @"
  <style>
    @import url('https://fonts.googleapis.com/css?family=Ubuntu')
  </style>
  <style>
    BODY{background-color:peachpuff; font-family: 'Ubuntu', sans-serif;}
    TABLE{border-width: 1px;border-style: solid;border-color: black;border-collapse: collapse;}
    TH{border-width: 1px;padding: 0px;border-style: solid;border-color: black;background-color:thistle}
    TD{border-width: 1px;padding: 0px;border-style: solid;border-color: black;background-color:PaleGoldenrod}
    strong{color: green;}
  </style>
"@
$b = @"
  <H2>Service Information</H2>
  <p> This is the list of services that are on this system. It dispays <strong>both</strong> running and stopped services </p>
"@

Get-Service | Select-Object Status, Name, DisplayName |
 ConvertTo-HTML -Head $a -Body $b |
 Out-File C:\Scripts\Test.htm
Invoke-Item C:\Scripts\Test.htm

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

Customizing the sizes of HTML components (h1, h2, h3, etc.) with Tailwindcss for both desktop and mobile platforms

Currently, I am working on a project using Tailwind CSS and Next.js. I want to customize the font size of h1 element from 40px to 46px for desktop screens (1440px) and then adjust it to 30px for mobile web (375px). I attempted to add a new property in the ...

What is the best way to showcase AJAX data within a complex HTML structure?

I need assistance with displaying the JSON output in my HTML code. My current HTML code is quite complex, so I am unsure how to include this data and repeat the HTML section for every JSON element. Can you provide guidance on how to achieve this? HTML COD ...

Localhost causing variations in CSS behavior

I've been working on a website and wanted to share it with someone, so I set up a webserver. However, I've encountered some peculiar behavior when trying to access the site via LAN rather than through my localhost. Firstly, when viewing the site ...

What is the best way to ensure bidirectional text appears correctly when two conflicting languages are combined, ensuring explicit directionality is set?

As I work on localization implementation, I encounter an issue with the directionality of mixed characters on the page. The text content is stored in a json file and inserted into the DOM using a Vue.js template. While individual characters display corre ...

Is there a way to align one <article> next to another <article> to create a horizontal layout?

Can anyone help me figure out how to display two <article>s on the same line or side-by-side, with the FirstArticle positioned to the left and the SecondArticle to the right? .MainContent { border-radius: 5px; -moz-border-radius: 5px; ...

Creating form elements without utilizing the <form action: MAILTO:> attribute

I'm in the process of designing a website with a side bar that features a form on every page. I'm looking for a way to have the form information submitted to an email address without using the action: MAILTO:? Would it be possible to create a sep ...

Guide to dynamically loading HTML and scripts as requested by the user

As I embark on creating my first single page application, I am faced with a challenge. The application contains an overwhelming amount of HTML code that I do not want to be loaded all at once on the client side. Instead, I would like to load the HTML conte ...

PHP is receiving data from $.post in an invalid format

I am facing a challenge in sending a JavaScript Object() to a PHP file in the correct format that $.POST requires. The PHP file does not establish any $_POST[] variables, which suggests that I may be transmitting the data in an improper format. JS: $(&ap ...

Generating an app without using the Jade template engine with Express

Interested in creating an express skeleton using the express generator method. Here are the steps: $ npm install express-generator -g But it tends to add a lot of automatic jade files, which can be overwhelming. Is there a way to eliminate those jade fi ...

Checking the alignment of a label or element in the center of a webpage using javascript

I am new to JavaScript and was attempting to determine if an element is centered aligned by accessing its CSS properties/values. Can someone help me retrieve the CSS property to verify text alignment using JavaScript? ...

Vertical and floating alignment

Can you help me with this HTML/CSS challenge? User: Support: Emily Johnson Alex Roberts I am looking to have two input boxes aligned vertically on both the left and right ...

Create a CSS menu that remains fixed at the top of the page and highlights the current submenu as

When explaining a concept, I find it easier to include a drawing to ensure clarity. https://i.stack.imgur.com/IChFy.png My goal is to keep the menu at the top of the page after scrolling past the header. https://i.stack.imgur.com/3fzJ6.png Using Bootst ...

When the cursor hovers over an item, I would like to enlarge its width while simultaneously shrinking the width of two additional items

Here is a section that I have created, you can view the mockup here. The section is divided into 3 parts, each taking up around 33.3% of the width and floated. My goal is to make it so that when a specific element, like .col-one in my example, is hovered ...

Grab the SVG and resize it to a smaller scale

I have a small application built using Raphael.js that creates a node network with SVG and reorganizes it based on user selections. My goal is to capture the SVG image I've created and display it in a "mini-map" format at the bottom of the screen. Si ...

JS custom scrollbar thumb size issues in relation to the scroll width of the element

I recently implemented a custom scrollbar for a component on my website. To determine the length of the scrollbar thumb, I use the formula viewportWidth / element.scrollWidth;. This provides me with a percentage value that I then apply to the thumb elemen ...

Issues with checkboxes in HTML 5 showing inconsistent behavior

Utilizing: APS.NET MVC 4.0 Incorporating javascript/jquery to manage check boxes within a table, I have encountered an issue where the code functions correctly during the first and second passes. Initially, it checks all the checkboxes, while on the secon ...

Setting the height of a child div: A step-by-step guide

Within a nested div with a height of 48px and positioned relatively, there is another child div also with a height of 48px. The goal is to set the maximum height of the child div to 80% and the minimum height to 40%. However, even after applying these sett ...

Encrypting and salting the data provided by the user

Similar Question: Secure hash and salt for PHP passwords My current code snippet is as follows: $insert_query = 'insert into '.$this->tablename.'( name, email, username, password, confirmcode ...

Tailwind - make sure the dropdown list is always on top of all other elements

Having an issue configuring the position of a dropdown list. The objective is to ensure it stays on top of all elements, however, when inside a relative positioned element, it ends up being obscured by it. Here's an example code snippet to illustrate ...

If the SASS condition matches the variable for the background color, then

I attempted to create a conditional statement in my component using Sass @if and @else. The condition I set was that if background == var(--bg-danger), the color should be white. However, it only returned white and did not trigger the else condition. @mixi ...