joulev
I often apply a custom CSS file to a webpage to make it look nicer to me (change fonts, font size, color, etc.). However, sometimes the main font of the site is (in my point of view) so bad that I want to substitute all instances of that font to a different font.
For example, I don't like Arial, but Google uses it in the search page. So I want to change the font of all elements in Arial to Segoe UI (say). How to do that, other than inspecting the elements of the page and add hundreds of CSS rules?
Is there anything like
```css
p:have(font-family: Arial) {
font-family: 'Segoe UI';
}
```
Top Answer
James Douglas
You need to import the font you want to use using `@font-face`, and name it 'Arial' using the `font-family` property:
```css
@font-face {
font-family: Arial;
src: url('segoe_ui.woff');
}
```
Unfortunately this code only affects elements that have `font-family: Arial;` specified, and it does nothing to text that defaults to `Arial`. (This can probably be overcome by setting a default font family on the `body` tag)
According to [W3C](https://www.w3.org/TR/css-fonts-3/#font-family-desc):
> If the font family name is the same as a font family available in a given user's environment, it effectively hides the underlying font for documents that use the stylesheet. This permits a web author to freely choose font-family names without worrying about conflicts with font family names present in a given user's environment.