PokestarFan PokestarFan - 17 days ago 5
CSS Question

How do I add a custom font to the <head> part of ConvertTo-HTML?

I made this script to save an HTML file of the services on the computer, with additions.

$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


However, I do not like the font. I want to use the Ubuntu font from Google. I tried adding some code to make this work:

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


However, it does not work. Now how am I supossed to change this?

Directions From Google



To embed your selected fonts into a webpage, copy this code into the of your HTML document.

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


Use the following CSS rules to specify these families:

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

Answer

Add the style import above your existing style, then apply the css rule to whichever element you wish. In this case I applied it to the body. I would also recommend using here strings instead of += as they are far more readable.

$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
Comments