In html, font size plays an important role. It allows you to draw the user's attention to important information posted on the site page. Although not only the size of the letters is important, but also their color, thickness and even family.
Hypertext language has a wide range of tools for working with fonts. After all, text formatting is the main task of html.
The reason for the creation of the HTML language was the problem of displaying text formatting rules in browsers.
Positive attribute values from 1 to 7 are supported.
Only the text that is located between the parts of the paired font tag is formatted. The rest of the text is displayed in the standard default font.
Plain text
Thumbnail
Thumbnail
More than usual
Less than usual
Italics
Italics
With underscore
Crossed out
In addition to the described tags, there are several more ways to change the font in html. One of them is to use the generic style attribute. Using the values of its properties, you can set the font display style:
1) font-family – the property sets the font family. It is possible to list multiple values.
Changing the font in html to the next value will occur if the previous family is not installed on the user's operating system.
Writing syntax:
font-family: font-name [, font-name[, ...]]
2) font-size – the size is set from 1 to 7. This is one of the main ways you can increase the font in HTML.
Writing syntax:
font-size: absolute size | relative size | meaning | interest | inherit
You can also set the font size:
Font-size:7
Font-size:24px
Font-size: x-large
Font-size: 200%
Font-size:24pt
font-style: normal | italic | oblique | inherit
Values:
An example of how to change the font in html using this property:
font-style:inherit
font-style:italic
font-style:normal
font-style:oblique
font-variant: normal | small-caps | inherit
An example of how to change the font in html with this property:
font-variant:inherit
font-variant:normal
font-variant:small-caps
font-weight: bold|bolder|lighter|normal|100|200|300|400|500|600|700|800|900
Values:
font-weight:bold
font-weight:bolder
font-weight:lighter
font-weight:normal
font-weight:900
font-weight:100
Font is another container property. Inside itself, it combined the values of several properties intended for changing fonts. font syntax:
font: font-size font-family | inherit
The value can also be set to the fonts used by the system in the labels on various controls:
What does a website visitor actually see when using a non-standard Web font at this stage of browser development?
Many people struggle when creating a website. In many cases, a website requires using a non-standard font or hieroglyph. You download a beautiful font and start laying out the page, but not all users have such fonts. Some people are not embarrassed and simply create a graphic file using the font they need, but additional graphics do not always suit the page and many already have enough of it. But there is one suitable way out! This solution is to use CSS (Cascading Style Sheets) technology or simply “Cascading Style Sheets”. Usually CSS is contained in the created file itself, the page, but you can create a CSS file (.css) separately and connect it by writing between the tag
Thus:And with the help of CSS, we need to automatically download and install the True Type Font (.ttf) font file, but the installation will only happen if the user’s computer does not detect the required font. First of all, we must specify the location of the font. To do this, we write between the tags
And So:This way you can use any fonts on your website. But I advise you not to get too sophisticated, since the process of downloading and installing the font also requires some time. And if your font itself “weighs” 500kb or more, then it is not recommended to use it in this case.
Honestly, it’s easier and more correct to do this:
Although Web fonts are supported by most browsers, in Opera they are buggy from the very beginning. On some systems they don’t work at all, on those that do work, when the pages are reloaded they may or may not work:
Therefore, this cannot be used in serious projects, only in personal blogs, and only for text larger than 30px, so as not to see the wonders of anti-aliasing and kerning.
At the same time Google provides an API for cross-browser connection of non-standard fonts.
Making the Web Beautiful!
Google detects the browser and provides valid CSS and font for it.
In the next project, I once again see headings and menus in a non-standard font. Make it with pictures? Sucks: awkward, inflexible, slow. Flash? I can't stand him. Javascript? The best solution for now, of course, but it’s still a crutch that reminds us of the limitations of browsers. It's time to dig into the standards: what they offer and where it already works.
A custom font, in contrast, is a font that is likely to be missing from most site visitors.
Implement a custom font without using images, javascript and flash. We use only the latest advances in .
But for IE it’s not so simple. Although it was the first to support the implementation of third-party fonts (since 1997 with the release of Internet Explorer 4th version!!!), it requires a special format for the font - EOT (Embedded OpenType). The EOT format solves two problems at once:
As a result, connecting the font in styles will look like this hack:
/* only for Internet Explorer */ @font-face ( font-family: Scriptorama; src: local("Scriptorama"), url(path-to/Scriptorama.eot); ) /* further for all other browsers */ @ font-face ( font-family: Scriptorama; src: local("Scriptorama"), url(path-to/Scriptorama.ttf); ) [...] h1 ( font-family: Scriptorama, arial; font-weight: normal;
Instead of a hack, you can use .
update 23.08.11 A more complete font embedding syntax that takes into account some possible IE bugs and greater browser support:
@font-face ( font-family: "JournalRegular"; src: url("journal-webfont.eot"); src: url("journal-webfont.eot?#iefix") format("embedded-opentype"), url("journal-webfont.woff") format("woff"), url("journal-webfont.ttf") format("truetype"), url("journal-webfont.svg#JournalRegular") format("svg "); font-weight: normal; font-style: normal; )
update 10.11.10 In IE local may not work. Moreover, because of it, the font may not be connected at all. In our projects we pay attention to this point: if it doesn’t work, we simply remove it for IE local.
If the font developers tried to please everyone, then the font will most likely contain many, many characters and, accordingly, weigh many, many. So the Arial Unicode MS font contains 51 thousand characters and weighs more than 23 megabytes! It's time to think about whether the site will use Udmurt or Finno-Ugric languages? And also various additional symbols, punctuation marks and numbers? You should also pay attention that each font has a certain number of styles: regular, italic, bold, semibold. A font can contain up to 9 types of boldness (remember the acceptable values).
We exclude from the font everything that is not needed to achieve the task. For example, if the font is used only for the menu, then punctuation marks, various additional symbols, and numbers will be superfluous.
The following may help with this:
What can:
For the experiment, I compressed a 145Kb font with the “Use for menu” test task. I left only small Russian letters. The final font size was 8Kb. Amazing!
Flaws:
Impression- fantastic, excellent, super-duper, amazing!!! I'll get myself a PayPal to donate.
An online service that allows you to leave only the necessary characters. Works .
Pros: simple and clear. The result is a True Type compressed font, an EOT font for IE and CSS code for connection.
On the downside: the service is only available for a strictly fixed list of fonts that they have on their website.
Software from Microsoft. Helps convert font to EOT. Plus makes it impossible to use the font outside the specified site. You can download and get acquainted in more detail on the page dedicated to the script.
From the name it is clear that it converts a font from TTF to EOT. It works locally via the command line, which in itself is not convenient. You can download the script and read more about it on the project website.
Easy to use, allows you to convert licensed fonts. Available.
Disadvantages: registration is required.
If the font is of high quality, it is developed by high professionals, often by a team of professionals, often for more than one month. Such a font can cost no less than “Zhiguli” from the assembly line. Font developers began to register them as trademarks, securing the rights of the copyright holder to the font at the level of industrial property protection.
Those. To use a font on the web, the site owner must purchase the font with the right to use it on the web. But acquisition is half the problem. The font also needs to be protected from illegal copying. There are almost no such problems if the licensed font on the site is implemented with pictures or using Javascript. But if you implement it via @font-face, the font is openly located on the server, which any user can download. And this already threatens lawsuits.
For millions of small sites, the illegal use of fonts can and will pass without consequences, but cool, commercial, especially international projects should seriously think about purchasing licenses.
For IE, this problem was solved immediately - the EOT format encrypts the file. As a result, we have a font that will only work within this site.
The other day, once again, I decided to start doing push-ups. One teacher I respect claims that this exercise has an almost magical effect if done correctly.
Well, I set up an experiment on myself, and to make it harder to jump off, I decided to make the “laboratory notebook” public and posted it on an abandoned blog.
The old design did not match the new idea, and without hesitation, I took the one I more or less liked from the general WordPress repository.
Do you know what the problem is with some ready-made templates taken from there? The problem is clumsy compatibility with Cyrillic fonts. In my case, the headers suffered. Since the font referenced by the CSS did not contain Russian characters, they were taken from the default font (either Sans or Arial). As a result, the headlines were HUGE and ruined the whole look. I had to think how to replace the font.
There are several ways to do this.
It comes down to the fact that you find a suitable font on the Internet, install it on your computer, write it in CSS and see your site as intended.
Others continue to see it, at best, with default fonts, and at worst, even out of print.
Don't do this!
This is the most ideal option, but, unfortunately, it is not always suitable, since sometimes the “zest” of the design is lost because of it. However, ALWAYS consider this approach, because no matter how hard you try, it is possible that the client computer will still use the font that is available.
Safe fonts that are available on almost all operating systems are: Verdana (ideal for texts),Impact (sometimes very good in headlines), Arial, Arial Black, Comic Sans MS (kaka, which is very popular among beginners), Courier New (suitable for code examples and forms), Georgia, Times New Roman, Trebuchet MS.
The option is very cross-browser and suitable for designing static elements. For example, site headers. You make a transparent PNG with text in the desired font, process it as you need and insert it into the site, not forgetting to fill in the ALT. Or the same thing, but paste the text onto some background and save it as a JPG.
In addition to the header, I needed to change the appearance of post headers and widgets. Well, why not make a separate picture with a title for each entry?
Although there are craftsmen who generate pictures with title text using server scripts, this is already a perversion.
These applets can be generated from a font file using the online generator http://cufon.shoqolate.com/generate/
The easiest way is to use http://www.google.com/fonts You select the desired font from those presented and get ready-made code that you need to insert into the site (in the head and in the style file), after which everything works.
But I didn’t want to use extra javascript, bother with generating applets, etc. I wanted to do everything quickly and simply. Moreover, the file with the required font had already been available for a long time.
The Internet is full of guides on this topic. However, having tried five of them, I came to a disastrous result. My TTF font was displayed normally only in IE. In other browsers it was mercilessly replaced by Arial.
I confess that I am not a fan of IE and consider it a browser download browser. No more! So, I had to make a small improvement.
To connect a font to the site using CSS, we need the font itself (file) and an online converter http://onlinefontconverter.com/
There can be a great variety of online font converters. Some are closed, new ones appear in their place, so if this particular one is no longer there, search in search engines for a query like “online font converter” and try to convert the fonts there. In this post, the given converters are used as an example.
1. Go to the converter website , grab the font you have and drag it into this window (it’s usually in the right column).
2. Download the font in 4 variants: EOT, OTF, TTF and WOFF. This should be enough. The browser, in the process of rendering the page, will choose and download the one that is more convenient for it.
3. Upload fonts to the website. I created a folder for this in the root of the site "f" and placed them there.
Update 02/16/2015: For now onlinefontconverter.com remade and it didn’t convert any of the proposed fonts((
I had to use the site font2web.com. This one provides all the necessary fonts at once in a pack in one archive. Comfortable!
4. Connect font loading to the site. To do this, enter this code in the css file, or in the appropriate style tags.
@font-face( font-family: EtoMoiFont; src: url(/f/myFont1.eot), url(/f/myFont1.otf), url(/f/myFont1.ttf), url(/f/myFont1. woff);
font-family: EtoMoiFont;— tells the browser what the loaded font will be called. Come up with a name yourself.
src: url(/f/myFont1.eot), url(/f/myFont1.otf), url(/f/myFont1.ttf), url(/f/myFont1.woff);— specifies the path and names of font files.
The first one I put EOT. This format is used by older versions of IE.
Second — OTF. This is a compressed font format that is supposed to weigh less.
Third — TTF. Almost all browsers understand it. Although, it happens differently. For example, on iOS it may not open.
Last — WOFF. This should read well on Macs, but I haven't had time to check it yet.
5. Designate in the style file , which font family should be used to display headings (in our case, headings h2).
h2(font-family: EtoMoiFont;)
If the fonts are not applied, make sure: firstly, that the css file is used by the site (sometimes you need to reset the cache, sometimes look for another css file), secondly, that the font is used for the class (id or tag) you specified. are not blocked in another css file that is loaded after this.
The beauty of this method is that in the future I can set this font for any text container.
This is what happened.
The disadvantage of the method is that the browser settings of some paranoid users may prohibit loading external fonts, flash, javascript, pictures, etc.
So don't be lazy and check what your site will look like if loaded fonts are disabled. Try playing with safe ones method 2, and then load yours again. If the sizes are more or less the same and nothing has moved apart, then it’s in order.
And further! Test methods only on computers where the font you are going to work with is not installed. Otherwise it will work out method number 1.
That's all. I was with you.
Until next time.
Adding a new font to a website is not the easiest task. Where to choose, download and how to add a font to a website in CSS? In this article we will show one of the most convenient ways to install and connect the font to the site.
For example, we have a font Raleway.ttf and we want to use it in all headers( h1) of our website. To do this, perform the following steps:
h1 ( font-family: "RalewayRegular"; }
Now all 1st level headings on the site are displayed in the font we need.
If you want to connect several fonts (or their styles), then simply add them under the previous one:
@font-face { font-family: "RalewayRegular"; src: url("../fonts/RalewayRegular.ttf" ) format( "truetype"); font-style : normal; font-weight: normal; } @font-face{ font-family: "RalewayBold"; src: url("../fonts/RalewayBold.ttf" ) format( "truetype"); font-style : normal; font-weight: normal; }
You might have noticed that there are different font formats - .ttf, .woff, .eot, .svg etc. There is also a format for modern browsers. woff2, but we will talk about it in one of the following articles. Typically, each font is connected in 3 formats at once. This is done so that the font is displayed correctly in all browsers, including. and old ones. It looks like this:
@font-face { font-family: "RalewayRegular"; src: url( "../fonts/RalewayRegular/RalewayRegular.eot") ; src: url( "../fonts/RalewayRegular/RalewayRegular.eot?#iefix") format("embedded-opentype" ), url( "../fonts/RalewayRegular/RalewayRegular.woff") format( "woff"), url( "../fonts/RalewayRegular/RalewayRegular.ttf") format( "truetype"); font-style : normal; font-weight: normal; }
Here follows Pay attention to the connection order - this is important!
We will not go into details, just remember the appearance of this design.
If you have a font in only one format, then use different font converters. Here is one of them.
How to connect a font to a Moguta CMS template 
Now you know how to add a font to a website using CSS and more. We will be happy to answer all your questions
