How to evaluate if the user will have the source used on the site?

Asked

Viewed 180 times

2

When the user does not have the specified font in the css file installed on his computer, the browser will use the standard style font, according to the handouts I read.

For example, you create a young audience-oriented layout, but because it’s a little-known font, the site ends up in Times New Roman for most users.

  • Is there a website, portal or library that is used to guard against this risk?
html css font webdesign
  • 1

    It’s not really my area, but in case you’d put more than one source as backup.

  • Are you using some source CDN like Google Source? Or are you using some @font-face with custom font? You need to give more details, and if possible include your CSS

2 answers

3


Via CSS you can make a list of sources to be considered for this element. If the browser does not find the first one, it searches for the second one. If he doesn’t find the second one, he looks for the third one. And so on...

Example:

p {
  font-family: 'Essa nao existe', 'Tahoma', 'Arial', serif, sans-serif;
}
<p>Lorem ipsum</p>

At the end of the day, the ideal is for you to make your sources available on your site and add them to your file .css. To this end, it has an answer of mine that explains and already solves the problems of compatibility of sources in certain browsers: Problems with the font-face. I strongly recommend reading if you adopt this alternative.

The estate font-family CSS allows you to make a priority list of source families and/or generic family names to be specified for a selected element. Unlike most other CSS properties, the values are comma-separated to indicate what the alternatives are. The browser will use the first source of the list found on the computer, or you can dowload using the information contained in the rule @font-face.

WEB programmers should always add at least one generic family to the list of font-family, since there is no guarantee that that specific source is installed on the computer, or can be downloaded by the rule @font-face. The generic family allows the browser to select a font accepted by the computer when needed.

It is also convenient to use the property beforehand font to define the font-size and other source-related properties all at once.

Recommended source/reading: MDN font-family CSS

"- Is there a website, portal or library that is used to prevent this risk"

Not exactly to "guard against that risk," but an excellent library of sources there is yes: the Google Fonts. Today has 915 fonts and you can "link" directly in your project. By the way, have a question here about How to use Google fonts. Take a look there! Already the precaution is on your own, applying a list of suitable sources!

0

Is there a website, portal or library that is used to guard against this risk?

There is the property font-family of CSS, you can list a number of fonts for your document, they will be used in the order you set. Let’s see in practice, imagine that you have defined the following sources: 

font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;

The CSS will attempt to style with the first stated source, if it exists on the reader’s computer, in which case the source "Palatino Linotype" 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 fonts on the user’s computer, the browser will show a standard system font. Recommends - if the last source in the list is a generic source: serif, sans-serif, monospace, cursive or fantasy. This allows the browser to choose a similar font in the generic family, if no other font is available.

There is also the library Google Web Fonts, which contain web-based sources and all tested and approved by the google platform.

Using the @import:

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

Ultilizing the font in the desired tag:

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

Remember: The @import is an element CSS, then if it is placed on <head> of HTML, it should always stay within a tag <style> .

Using the tag <link>:

The tag <link>, other than @import goes right into the <head> of HTML. See the example with the same font used in the example above.

<head>
    <title>Google Fonts</title>
    <link href='http://fonts.googleapis.com/css?family=Dancing+Script' rel='stylesheet' type='text/css'>
</head>

Recalling that the Webfonts already provides ready-to-insert code in your CSS or HTML.

References:

Browser other questions tagged html css font webdesign

You are not signed in. Login or sign up in order to post.