How to Style Hyperlink Fonts Without Affecting Titles

One of the goals of my node setup guide is that even my grandparents can succeed — as long as they can recognize letters and work a keyboard and a mouse, they can do it.

The use case I have in mind is this: enlarge the font in the guide, print it out, and let the reader work from the paper copy.

So the readability of hyperlinks has to be guaranteed.

Refer to Setting the code font earlier for the approach I used.

Add a snippet

a {
    font-family: "Source Code Pro", Menlo, Monaco, Consolas, "Courier New", monospace !important;
}

Afterwards I found that every font belonging to a hyperlink had changed, even the heading fonts. That is not what I wanted.

So the requirement from here on is this:

Only the<p></p> element's<a>hyperlink</a> changes the font;

If it is a<h1></h1> heading or the like, a hyperlink inside it does not change the font.

Reference: (the three links below all have the same content — just pick whichever looks nicer)

https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Selectors
https://www.runoob.com/cssref/css-selectors.html
https://www.w3school.com.cn/cssref/css_selectors.asp

Change it to

p a {
font-family: "Source Code Pro", Menlo, Monaco, Consolas, "Courier New", monospace !important;
}

Success!