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

Dynamic class name changes in Angular.js based on JSON object

I am trying to dynamically change the class of an <li> element based on the category value I am getting, but for some reason the class name won't update. Here is the code snippet: <div id="content"> <ul id="container" ng-controller ...

The font-weight property appears to be ineffective across all browsers

I'm struggling with the font-weight property in my CSS. Despite trying different values like lighter, bold, and even numerical values like 300, it doesn't seem to have any effect on the font weight in any browser. I am using the following code to ...

Tips for positioning a delete button at the start of the row I am transferring to a different table

Displayed below are the contents of the initial table. <% for(int i = 0; i < result.length; i++) { %> <tr id='player-listing-<%=i %>'> <td style="vertical-align: top;"><button onclick="myFunction2(<%=i%> ...

Top tips for utilizing CSS in a web component library to support various themes

Our team is currently in the process of developing a comprehensive design system that will be utilized across multiple projects for two distinct products. Each product operates with its own unique brand styleguide which utilizes design tokens, such as: Th ...

Adjusting the URL variable based on the selected checkbox option

My mobile website offers users the option of a bright or dark interface using a checkbox styled like an iPhone IOS7 switch. The functionality is working as expected, but I'm now facing an issue with passing the status of the checkbox between pages. I ...

Achieving an IE7 opacity background while keeping the text unaffected

This is the given HTML code structure (view in JS Fiddle) How can I adjust the background color to be 20% opaque white while keeping the text black? It needs to be compatible with IE7. <ul class="menu"> <li class="first expanded active-trail ...

Tips for accessing the HTML content enclosed within a specific HTML tag using Python with Selenium

I am trying to extract the source code of an HTML document that is embedded within an <iframe> tag generated by JavaScript. The HTML contents within this <iframe> tag appears as #document, which expands to reveal a full HTML document starting w ...

jQuery is unable to locate the FireBreath object

Currently, I am in the process of developing a web video player by using Firebreath to compile my C/C++ codec as a browser plugin. The plugin has been successfully loaded and is functioning properly (start, stop video, etc.). My next goal is to enable full ...

Styling the center menu

Is there a way to horizontally center this top menu using CSS? https://i.sstatic.net/9yvJf.png This is the HTML structure I am working with: <div class="wrapper_menu_hoz"> <div class="container_24 "> <div class="gr ...

Is there a way to prevent text from being automatically linked after using an <a> tag?

Whenever I attempt to input text into the div tag below, it mysteriously appears hyperlinked, even though there is no "a" tag enclosing it. HTML: <html> <head> <link href = "https://fonts.googleleapis.com/css?family=Work+Sans:3 ...

Guide on altering the cell's background hue depending on its value through javascript

I'm dealing with a table that has 3 columns: field1 is a Category field2 and field3 contain Measures (specifically integers 1, 2, 3, 4, and 5). Is there a way to use Javascript to conditionally format the background color of cells in the table hol ...

Preserve unencoded HTML content as a string

Here is an example string: text = '&lt;div class="blue"&gt; &lt;p&gt;This is a sample text string' When I use <%= text.html_safe %> in my webpage, it displays correctly, but not when I try it in the console. If I attempt: ...

Unconventional border effect while hovering over image within navigation container of Bootstrap

Whenever I hover over the image inside the navigation bar, there is a strange white/gray border that appears. It's quite annoying. Does anyone know how to remove this border? Here is the code snippet causing the issue: <ul class ...

I want to learn how to display the rupee symbol instead of the default dollar symbol in AngularJS for specific currency symbols

When using 'currency' in AngularJS, I noticed that a dollar symbol is displayed. How can I change this to show the required currency symbol based on different requirements? Currently, I am looking for information on how to display a rupee symbol ...

Is separating Jssor Slider CSS effective?

Having a bit of trouble with the Jssor slider here. I'm trying to separate the slider styles into an external CSS document and running into issues. For instance: <div id="slider1_container" style="position: relative; top: 0px; left: 0px; width: 11 ...

Transforming data from an HTML table into a MySQL database

Is there a way to transfer data from an HTML table created with JavaScript to a SQL database? I have been experimenting with the addRow(tableID) function but it doesn't seem to work. Any suggestions on how to solve this issue? Below is the code snipp ...

Utilize JavaScript and PHP to dynamically modify the contents of an HTML file

After not receiving a satisfactory answer to my question yesterday, I decided to find a solution. However, I am now facing an issue with the new program and unsure of the mistake. The program involves retrieving the contents of announcement.html and displ ...

Using JavaScript's DOM manipulation to switch out one HTML tag for another

As a newbie to javascript and DOM, I'm facing an issue with manipulating DOM elements using javascript in the given HTML code. <html> <head> <title>Testing</title> </head> <body> <marquee direction=up heig ...

How to make browsers refresh cached images

.button { background: url(../Images/button.png); } Issue: To improve performance, static content on the website is cached with expiration headers. However, when an image changes, users must manually refresh their browser cache (Ctrl+F5 in IE). ...

What is the best way to trigger a PHP function using a button click event?

One of the functionalities I have is a reset button that's supposed to switch out the JSON data displayed here with a different dataset called defaultStats.json (that I've saved for this purpose). Here's a snapshot of what the current databa ...