You can only view a font on a website if that font is installed or came in the operating system or browser of the computer.
I've been searching and found a few different font types that can be used in CSS .
With so many types of font families like: 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 your computer?
I decided to go deeper and I came to this answer:
To define what type of font to use in any code snippet HTML , through CSS , we must use the font-family property with the name of the font you want.
Thus, the syntax for defining and using a source in CSS is:
font-family: "Nome da Fonte";
You can build the entire design of your site based on a source, and your reader simply will not see the source because it is not installed or has not come in the operating system of your computer.
And now, what can be done to prevent this?
One of the solutions to this problem is to give a list of sources as value, for attribute "font-family" , separated by commas. If the browser does not support the first source, it tries the next source.
There are two types of font family names:
• Family-name - The name of a family source, such as "times", "courier", "arial", etc.
Generic-family - The name of a generic family, such as "serif", "sans-serif", "cursive", "fantasy"
Family-name syntax:
font-family: "Colibri", "Comic Sans";
The CSS will try to style with the first declared font, if it exists on the player's computer, it will be displayed, and if it is not present, the CSS style will try to be done with the second font.
And finally, if you do not have any of the sources on the user's computer, browser will show a default system font.
Generic-family syntax:
font-family: "arial", "verdana", "sans-serif";
Start with the desired font and always end up with a generic family, to allow the browser to choose a similar font in the generic family if no other font is available.
Another widely used solution is: @font-face , you must first define 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 Google Web Fonts sources, since they are web and all tested and approved by google platform.
For this you must specify the source path provided in google fonts , shortly after the source is installed and ready to use, we have to use the specific name that the site provides to work correctly. Here's an example:
@import url('https://fonts.googleapis.com/css?family=Titillium+Web');
Using the font in% desired%:
h1 {
font-family: 'Titillium Web', sans-serif;
}
In addition to the security of using Google Web Fonts fonts, we also have the facility, without having to download anything, just by copying the path of the desired font that is already hosted on the google servers and specifying its name in your CSS file .
References:
With so many types of fonts like: serif, monospace and others, what kind Should I use
The font type is opinion based when using serif, monospace, or others.
How to use an original source, different, but ensure that the user have on your computer
In CSS3 you can set up some font using @ font-face , and send together in the request, because the page will fetch the source in the project itself, so you can use any one.
See 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 , which can be downloaded and placed in the project.
A form that was not cite is indexing the fonte direct in the <head> of the document as a stylesheet . The link has a variety of font-family that can be used in this way for example:
<link href="https://fonts.googleapis.com/css?family=Noto+Serif+SC" rel="stylesheet">
Thisformisinterestingbecauseifatanytimetheuserhasalreadyhadaccesstothelinkfromthatsource,eveninanothersite,thatfontwillstayinCacheoftheBrowser,andwillnothavetobedownloadedagain.
Runtoseeitworkingrighthere!
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 is interesting that this link comes before the link of your .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 your .css just use font-family wherever you want, this way 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 does not yet have the cache of Unstyled Text (FOUT) or Flash of Invisible Text (FOIT) that is when the font appears transparent before loading completely, or a default font appears system and only after loading the external source does the text change to font-family correct. And if the Google server crashes there it will load a fallback source from the same user's operating system.