Шрифт панели навигации

Question

Мне нужна помощь с пользовательской панелью навигации, которую я создал для шаблона электронной почты в Mailchimp. Я не программист, но мне удалось создать навигационную панель, которая ссылается на мои веб-страницы. Тем не менее, я считаю, что в настоящее время в панели навигации отображается шрифт Times New Roman, и я очень хочу изменить его на Source Sans Pro.

Текущий код выглядит следующим образом:

<style>

ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}

li {
float: left;
}

li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

li a:hover {
background-color: #111;
}
</style>

Что мне добавить, чтобы изменить текущий шрифт на Source Sans Pro?

Будем благодарны за любые рекомендации.

Answer 1

Вы должны связать его в своем HTML как таковом

<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro&display=swap" rel="stylesheet">

, а затем использовать его в своем CSS с любым селектором (ID / Класс / Элемент)

font-family: 'Source Sans Pro', sans-serif;

, чтобы сделать весь документ следующим шрифтом:

<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro&display=swap" rel="stylesheet">
<style>

* {
  font-family: 'Source Sans Pro', sans-serif;
}

ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}

li {
float: left;
}

li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

li a:hover {
background-color: #111;
}
</style>