The fonts dialog is a tool to define font settings for the active selector/class in the active stylesheet.
The font drop down combobox will show all fonts installed on your computer. You can add one font at a time to the font-family property - if you want to add another font you must open the dialog once more.
In the project window is a list of the fonts in selected order. The order of the fonts is important. You have no way of knowing what fonts are installed on the user's computer, and the user's browser will use the first installed font on your list (the font-family).
You can rearrange the font order from the project window (up/down buttons).
If none of the fonts in the font-family property is installed on the user's computer the browser will pick a font with the typeface defined in "family". These types are serif, sans-serif, cursive, fantasy and monospace and should be the last definition on the font-family list. Sans-serif fonts are fonts like e.g. Arial or Swiss, and fonts like Times New Roman or Georgia are of the "serif" family.