CSS: Font family
Many people are familiar with the phrase "playing around with fonts," it's great to remember when you can't get the text to look right. In order to specify a font, the font-family rule is used, allowing you to select one or more fonts to be used in the document.
<style>
.new-font {
font-family: Arial, Futura;
}
</style>
<p class="new-font">Paragraph</p>
You can use fonts installed on your system. You should choose “common fonts” because other users may not have any other fonts. It is also possible to include fonts from third-party services such as Google Fonts, or to upload them directly to the server where the site is located.
The most common fonts are:
- Times New Roman
- Arial
- Tahoma
- Verdana
- Courier New
More often than not, these fonts will also be installed on other users' systems. If the fonts specified in the font-family property are not on the computer, the default font specified in the browser settings will be used.
When adding styles, it's good practice to add a universal font family to the font-family rule. There are currently 5 such families:
serif- fonts with serifs. Times New Roman is a notable examplesans-serif- fonts without serifs. The most familiar of these fonts are Arial and Verdana.cursive- italic fontsfantasy- decorative fonts. This family is the least frequently used. This is because decorative fonts are too different to be interchangeablemonospace- monospace fonts. These include fonts in which all characters have the same width. They're often used by programmers in text editors
By adding a universal font family to the font-family rule, we can insure ourselves, as it were, against the possibility that the user will not have the font we specified. The browser will automatically choose a replacement for the missing font from the universal font family that was specified.
The example from the beginning of the lesson for adding a universal family would look like this:
<style>
.new-font {
font-family: Arial, Futura, sans-serif;
}
</style>
<p class="new-font">Paragraph</p>
Now, if the user does not have Arial or Futura fonts in the system, their system's sans serif font will be selected.
Instructions
Add a paragraph to the editor with the class set to verdana-text and set its font to Verdana. Write the styles in the <style> tag. Don't forget to specify the universal font family as sans serif fonts
The exercise doesn't pass checking. What to do? 😶
If you've reached a deadlock it's time to ask your question in the «Discussions». How ask a question correctly:
- Be sure to attach the test output, without it it's almost impossible to figure out what went wrong, even if you show your code. It's complicated for developers to execute code in their heads, but having a mistake before their eyes most probably will be helpful.
In my environment the code works, but not here 🤨
Tests are designed so that they test the solution in different ways and against different data. Often the solution works with one kind of input data but doesn't work with others. Check the «Tests» tab to figure this out, you can find hints at the error output.
My code is different from the teacher's one 🤔
It's fine. 🙆 One task in programming can be solved in many different ways. If your code passed all tests, it complies with the task conditions.
In some rare cases, the solution may be adjusted to the tests, but this can be seen immediately.
I've read the lessons but nothing is clear 🙄
It's hard to make educational materials that will suit everyone. We do our best but there is always something to improve. If you see a material that is not clear to you, describe the problem in “Discussions”. It will be great if you'll write unclear points in the question form. Usually, we need a few days for corrections.
By the way, you can participate in courses improvement. There is a link below to the lessons course code which you can edit right in your browser.
Tips
The font family is always the last thing you do