Html fonts all browsers

Font supported by all web browsers and mobile devices

I have a tag where the font for the text to be displayed is «Lato». I have mentioned it in my CSS code. The problem is it’s not displaying text in font «Lato» when hosting it in different laptops or mobile phones. It’s working properly only in my device. So how to set fonts globally so that my webpage using my fonts exactly what I have mentioned in CSS for all devices. I have installed the .ttf file in my laptop

@Esko his question is very clear if you know the subject. He clearly hasn’t included the font in the site, as he mentions it only works on his laptop which he installed the font in.

You can tell it was clearly formed by the fact that 3 answers were posted all in the same minute that had the same basic instructions (include the font from google in your html).

4 Answers 4

You need to include the font in the web page so that the clients have it available. You can’t expect everyone to download and install the font themselves in order for your site to look right.

Add this to your head tag of your website.

The issue here is that you have installed the font directly on your device so you are able to view it but since every device won’t have the font installed you are seeing a fallback CSS font which is getting rendered automatically.

Lato is a open source font from Google Fonts and is directly hosted on the Google CDN. You can use the font directly from there to make sure it is rendered perfectly on any device.

Add the below line inside your tag in your HTML file.

And you can add the font to your CSS like below —

font-family: 'Lato', sans-serif; /*sans-serif is the fallback font family here*/ 

You can read more about the Google Fonts API over here.

Источник

CSS Web Fonts

Web fonts allow Web designers to use fonts that are not installed on the user’s computer.

When you have found/bought the font you wish to use, just include the font file on your web server, and it will be automatically downloaded to the user when needed.

Your «own» fonts are defined within the CSS @font-face rule.

Different Font Formats

TrueType Fonts (TTF)

TrueType is a font standard developed in the late 1980s, by Apple and Microsoft. TrueType is the most common font format for both the Mac OS and Microsoft Windows operating systems.

OpenType Fonts (OTF)

OpenType is a format for scalable computer fonts. It was built on TrueType, and is a registered trademark of Microsoft. OpenType fonts are used commonly today on the major computer platforms.

The Web Open Font Format (WOFF)

WOFF is a font format for use in web pages. It was developed in 2009, and is now a W3C Recommendation. WOFF is essentially OpenType or TrueType with compression and additional metadata. The goal is to support font distribution from a server to a client over a network with bandwidth constraints.

The Web Open Font Format (WOFF 2.0)

TrueType/OpenType font that provides better compression than WOFF 1.0.

SVG Fonts/Shapes

SVG fonts allow SVG to be used as glyphs when displaying text. The SVG 1.1 specification define a font module that allows the creation of fonts within an SVG document. You can also apply CSS to SVG documents, and the @font-face rule can be applied to text in SVG documents.

Embedded OpenType Fonts (EOT)

EOT fonts are a compact form of OpenType fonts designed by Microsoft for use as embedded fonts on web pages.

Browser Support for Font Formats

The numbers in the table specifies the first browser version that fully supports the font format.

Font format
TTF/OTF	9.0*	4.0	3.5	3.1	10.0
WOFF	9.0	5.0	3.6	5.1	11.1
WOFF2	14.0	36.0	39.0	10.0	26.0
SVG	Not supported	Not supported	Not supported	3.2	Not supported
EOT	6.0	Not supported	Not supported	Not supported	Not supported

*IE: The font format only works when set to be «installable».

Using The Font You Want

In the @font-face rule; first define a name for the font (e.g. myFirstFont) and then point to the font file.

Tip: Always use lowercase letters for the font URL. Uppercase letters can give unexpected results in IE.

To use the font for an HTML element, refer to the name of the font (myFirstFont) through the font-family property:

Example

@font-face <
font-family: myFirstFont;
src: url(sansation_light.woff);
>

div font-family: myFirstFont;
>

Using Bold Text

You must add another @font-face rule containing descriptors for bold text:

Example

The file «sansation_bold.woff» is another font file, that contains the bold characters for the Sansation font.

Browsers will use this whenever a piece of text with the font-family «myFirstFont» should render as bold.

This way you can have many @font-face rules for the same font.

CSS Font Descriptors

The following table lists all the font descriptors that can be defined inside the @font-face rule:

Descriptor	Values	Description
font-family	name	Required. Defines a name for the font
src	URL	Required. Defines the URL of the font file
font-stretch	normal condensed ultra-condensed extra-condensed semi-condensed expanded semi-expanded extra-expanded ultra-expanded	Optional. Defines how the font should be stretched. Default is «normal»
font-style	normal italic oblique	Optional. Defines how the font should be styled. Default is «normal»
font-weight	normal bold 100 200 300 400 500 600 700 800 900	Optional. Defines the boldness of the font. Default is «normal»
unicode-range	unicode-range	Optional. Defines the range of UNICODE characters the font supports. Default is «U+0-10FFFF»

Источник

CSS Web Safe Fonts

The following fonts are the best web safe fonts for HTML and CSS:

• Arial (sans-serif)
• Verdana (sans-serif)
• Tahoma (sans-serif)
• Trebuchet MS (sans-serif)
• Times New Roman (serif)
• Georgia (serif)
• Garamond (serif)
• Courier New (monospace)
• Brush Script MT (cursive)

Note: Before you publish your website, always check how your fonts appear on different browsers and devices, and always use fallback fonts!

Arial (sans-serif)

Arial is the most widely used font for both online and printed media. Arial is also the default font in Google Docs.

Arial is one of the safest web fonts, and it is available on all major operating systems.

Example

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.

Verdana (sans-serif)

Verdana is a very popular font. Verdana is easily readable even for small font sizes.

Example

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.

Tahoma (sans-serif)

The Tahoma font has less space between the characters.

Example

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.

Trebuchet MS (sans-serif)

Trebuchet MS was designed by Microsoft in 1996. Use this font carefully. Not supported by all mobile operating systems.

Example

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.

Times New Roman (serif)

Times New Roman is one of the most recognizable fonts in the world. It looks professional and is used in many newspapers and «news» websites. It is also the primary font for Windows devices and applications.

Example

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.

Georgia (serif)

Georgia is an elegant serif font. It is very readable at different font sizes, so it is a good candidate for mobile-responsive design.

Example

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.

Garamond (serif)

Garamond is a classical font used for many printed books. It has a timeless look and good readability.

Example

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.

Courier New (monospace)

Courier New is the most widely used monospace serif font. Courier New is often used with coding displays, and many email providers use it as their default font. Courier New is also the standard font for movie screenplays.

Example

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.

Brush Script MT (cursive)

The Brush Script MT font was designed to mimic handwriting. It is elegant and sophisticated, but can be hard to read. Use it carefully.

Example

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.

Tip: Also check out all available Google Fonts and how to use them.

Источник

Custom Fonts for All Browsers with Font Face

Do you want to embed custom font in the website? Have you just read the Butterick’s Practical Typography and you’d like to use good typography? Let’s start with using custom fonts and make them work in all major browsers, even in the mobile ones.

The first step to do is to get yourself a font. There is a lot of free fonts on the web or you can buy a professional one. One of the libraries with free fonts is Google Fonts.

Before we move any further make sure that you have the rights to use the font on the web. Please, respect the licence of the font—it’s kind of like with software, so be careful.

So, you’ve downloaded or bought the font of your choice and you have the license to use it on the web. It’s either in the TrueType format (.ttf) or in the OpenType (.otf). You have to convert these formats into the ones used on the web. What you are going to need is the woff, eot, svg and ttf format.

Don’t worry, there are online services that convert between font formats. One of them is the great web generator on the Font Squirrel portal.

Now, you have the web font formats, so let’s add them to the HTML and CSS definitions. For task the @font-face attribute is used. Let’s start with the HTML definition.

The important thing to notice in the code example above is that I used different style definitions for Internet Explorer and for the other browsers. It’s essential if you want to support default Android browsers, because there is a bug—when the IE definition is provided, the Android one won’t be picked up.

Let’s create the fonts.css file.

The first url relates to Web Open Font Format and it is used by all modern desktop browsers. The True Type Format covers most of the iOS and Android devices and the last line is for supporting older iOS devices.

With this code the majority of browsers is covered in the desktop and mobile world. Now, let’s create the style for Internet Explorer.

These definitions we covered IE6 to IE9. The first line is there for IE9 compatibility mode and the second one is for IE6-IE8. The version 10 is able to use the Web Open Font Format from the previous definition.

We covered probably all the important browser we had to. The last thing to do is to assign the font in your CSS style, for example as a heading font.

That’s it. From now on, your headings are going to be rendered on the vast majority of browsers, even on the problematic Internet Explorers and default Android ones. It required a bit of hacking but the result is pretty good, don’t you think?

Would you like to get the most interesting content about programming every Monday?
Sign up to Programming Digest and stay up to date!

Источник

How do I get font to display properly in all browsers?

In Safari on my Mac the site has the font looking the way I want it: However, on Windows computers in IE and Chrome the font does not look like the above, see: My question is, how do I get the font to look the same in all the browsers on all OS such that looks like screenshot #1 above? Thanks in advance for your help.

3 Answers 3

This is a matter of foont smoothing and that is different from a browser to another, they don’t «read» fonts the same way.

Here is an article that explains the process, Font smoothing explained.

and here is a CSS hack you can try in order to get the same result everywhere:

The W3C document linked to is an outdated draft from year 2002. The current draft w3.org/TR/css3-fonts has nothing about font smoothing.

The CSS hack apparently works only in WebKit browsers on Mac, and according to what I last read, the antialiased value is not supported at present. In any case, the hack does not help at all with rendering on Windows.

There is nothing you can do about it, though you may test the variation for the font(s) you use and possibly reconsider your font choices. Some fonts are affected more than others by the differences.

On different platforms and, to some extent, in different browsers, fonts are rendered differently. See e.g. A Closer Look At Font Rendering.

The rendering may also depend on system and/or browser settings. What I see on Windows, when testing your style sheet on normal text, is very different from your screen shot.

Windows is renowned for its poor font smoothing; the one sure-fire, cross-browser alternative is replacing your entire content with a .png image (as .jpg tend to be terrible with text). Naturally, this isn’t a viable alternative, so until all browsers support the font-smoothing property (as demonstrated above), you’re stuck in the current situation.

Linked

Related

Hot Network Questions

Subscribe to RSS

To subscribe to this RSS feed, copy and paste this URL into your RSS reader.

Site design / logo © 2023 Stack Exchange Inc; user contributions licensed under CC BY-SA . rev 2023.7.21.43541

By clicking “Accept all cookies”, you agree Stack Exchange can store cookies on your device and disclose information in accordance with our Cookie Policy.

Источник