How and how to best use CSS fonts?

Question

 It is only possible to view a source on a website if that source is installed or came into the operating system or browser computer.

I have been researching and found some different types of fonts that can be used in CSS.

• With as many types of source families as: serif, monospace and others, how best to use them?

• How to use an external source, but with a guarantee that the user has it on his computer?

Answer 1

I decided to go deeper and I came to that answer:

To define what type of source to use in any code snippet HTML, through the CSS, we should use the property font-family with the name of the source you want. Thus, the syntax for defining and using a font in CSS is:

font-family: "Nome da Fonte";

One can build the entire design of your site based on a source, and your reader simply won’t see the source because it isn’t installed or didn’t come on your computer’s operating system.

And now, what can be done to make it not occur?

One of the solutions to this problem is to give a list of sources as value, for the "font-family", comma-separated. There are two types of font family names:

• Family-name - The name of a source-family, such as "times", "courier", "Arial", etc.

• Generic-family - The name of a generic family, such as "Serif", "sans-Serif", "cursive", "fantasia", "monospace".

• Syntax of Family-name:

  font-family: "Colibri", "Comic Sans";

The CSS will attempt to style with the first source declared, if it exists on the player’s computer, it will be displayed, and if it is not present, the style CSS will attempt to be done with the second source. And finally, if you don’t have any of the source on the user’s computer, browser will display a standard system source.

• Syntax of Generic-family:

  font-family: "Arial", "Verdana", "sans-Serif";

Start with the desired font and always end with a generic family, to allow the browser to choose a similar font in the generic family, if no other font is available.

Another and widely used solution is the: @font-face, you must first set a name for the source (for example, myfont) and then point to the source file. See:

@font-face {
    font-family:'minhafonte';
    src:url("../fonts/bubblegum-sans-regular.otf");
}
div {
    font-family:minhafonte;
} 

And finally we can use one of the simplest and most guaranteed forms that are the sources of Google Web Fonts, because they are their own sources for web and all tested and approved by the google platform.

To do this you must specify the source path provided on google fonts, soon after the source is installed and ready to use, we have to use the specific name that the site provides to work properly. Take an example:

@import url('https://fonts.googleapis.com/css?family=Titillium+Web');

Ultilizando a fonte na tag desired:

h1 {
    font-family: 'Titillium Web', sans-serif;
}

In addition to the security of using fonts from Google Web Fonts, we also have the facility, without needing to download anything, just copying the path of the desired font that is already hosted on google servers and specifying its name in your CSS file.

References:

https://www.w3schools.com/cssref/css3_pr_font-face_rule.asp

https://www.w3schools.com/cssref/pr_font_font-family.asp

http://www.criarsites.me/como-utilizar-fontes-google-web-fonts/

https://tonyblack10.gitbooks.io/css/content/fonts/index.html

http://www.htmlprogressivo.net/2014/02/

Answer 2

With as many font types as: Rif, Monospace and others, which type should I wear

Font type is based on opinion when using Rif, Monospace or other.

How to use an original, different font but ensure that the user have on your computer

In CSS3 it is possible to configure some source using @font-face, and send together in the request, because the page will fetch the source in the project itself, thus being able to use any one.

Take this example:

@font-face {
    font-family: minhaFonte;
    # A URL pode ser local também
    src: url("https://mdn.mozillademos.org/files/2468/VeraSeBd.ttf"); 
}

body { font-family: "minhaFonte" }

There are several formats for fonts, such as ttf or Woff, that can be downloaded and placed in the project.

Answer 3

One form that has not been cited is by indexing the fonte right in the <head> of the document as a stylesheet. The https://fonts.google.com has a variety of font-family that can be used this way for example:

<link href="https://fonts.googleapis.com/css?family=Noto+Serif+SC" rel="stylesheet">

This form is interesting because if at some point the user has already had access to the link of this source, even on another site, this source will be on Cache browser, and will not need to be "downloaded" again.

Run to see working right here!

h1 {
    font-family: 'Noto Serif SC', serif;
}

<link href="https://fonts.googleapis.com/css?family=Noto+Serif+SC" rel="stylesheet">
<link rel="stylesheet" href="css/style.css" />

<h1>Minha fonte Custom</h1>

It’s interesting that this link comes before your link .css to ensure that it will load correctly

<link href="https://fonts.googleapis.com/css?family=Noto+Serif+SC" rel="stylesheet">
<link rel="stylesheet" href="css/style.css" />

And in his .css just you use the font-family wherever you want, so for example:

h1 {
    font-family: 'Noto Serif SC', serif;
}

OBS: The drawback of this technique is that if the Google server is slow and the user still does not have the source at cache he may have a Flash of Unstyled Text (FOUT) or Flash of Invisible Text (FOIT) which is when the source appears transparent before fully loading, or a source appears default system and only after loading the external source the text changes to font-family correct. And if the Google server falls then will load a source fallback of the same user’s operating system.