Connecting web fonts using @font-face. Legal issue of using fonts

Bold text

Bold text

More than usual

Less than usual

Italics

Italics

With underscore

Crossed out

Style attribute capabilities

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 display style of fonts:

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:

• In pixels;
• In absolute terms ( xx-small, x-small, small, medium, large);
• In percent;
• In points (pt).

Font-size:7

Font-size:24px

Font-size: x-large

Font-size: 200%

Font-size:24pt

font-style: normal | italic | oblique | inherit

Values:

• normal – normal spelling;
• italic – italic;
• oblique – font slanted to the right;
• inherit – inherits the spelling of the parent element.

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:

• bold – sets the html font to bold;
• bolder – bolder relative to normal;
• lighter – less saturated relative to normal;
• normal – normal spelling;
• 100-900 – sets the font thickness in numerical equivalent.

font-weight:bold

font-weight:bolder

font-weight:lighter

font-weight:normal

font-weight:900

font-weight:100

html font property and font color

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:

• caption – for buttons;
• icon – for icons;
• menu - menu;
• message-box – for dialog boxes;
• small-caption – for small controls;
• status-bar – status bar font.

In this article tutorial I will tell you how to create your own font for a website using icons that you created yourself. All we need for this is a program for creating vector graphics (Adobe Illustrator or Inkspcape) and Internet access! So, let's get started! You can download all the images, icons and css font used for this at the end of the article.

For this tutorial we will do something simple. For the first icon we will draw a regular star. For the second icon - an eagle with the letter W inside. It is quite easy to draw and you can create any shapes and combinations. I used illustrator for these purposes.

After you have finished the creative part, your creation must be saved in SVG format. Click “Save As” and select the file type as SVG. Now you can proceed directly to creating the font.

For these purposes, we use the popular and free service IcoMoon.

The first thing to do is create a new project, so click on the menu in the upper left corner and click “New Project”. Next, we load our ready-made svg files after clicking on the “Import Icons” button. After completing these steps, you should see an image like this on your monitor:

Now we have the ability to change the code for each icon (in our case it will be e600 and e601), the name of our font, the CSS prefix, and so on. All this is done in “Preferences”. Also, we can see the font in action by clicking on the “Enable Quick Usage” link - which will allow us to get a temporary link to our font, as well as the option to view the code in CodePen.

After you have configured everything, click the “Download” button at the bottom of the page and download the archive. In this archives you will find your font in ttf, eot, svg and woff formats + a demo page with the font.

Using icons on the site

Now, all we need is to include the CSS font using @font-face, and specify other parameters (they are all written in the css file in the archive that you downloaded.

@font-face ( font-family: "wdm-eagle"; src: url("//yourwebsitename.com/fonts/wdm-eagle.eot"); , ( font-family: "wdm-eagle"; speak: none; font-style: normal; font-variant: normal; line-height: 1; /* Better Font Rendering ========== -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; ) .wdm-star:before ( content: "\e600"; ) .wdm-eagle:before ( content: "\e601"; )

Now we can use our font in HTML code like this:

Specifying the class name for the tag we get our icon.

We present to you a selection of free services for designers. This is the first option, we plan to expand it in the future by adding new sections and tools.

Fonts

• Google Fonts is everyone's favorite font library. Allows you to select and download different fonts for all occasions.
• 1001 Free Fonts - font library. It has easy navigation - fonts are sorted both alphabetically and by type. There is a section of Russian fonts.
• Fontstruct is an online font designer. A very simple tool that will allow you to create your own font. You can draw not only with standard squares, but also with other shapes - dots, rounded corners, etc. For a beginner, it is an ideal tool to try and see typography in action.
• Font Squirrel is one of the largest font libraries. In addition, you can upload a picture and get the names of the fonts used in it. There is a font store, and even a clothing store with logos.
• Type light is a full-featured font editor. Allows you to create, edit and convert OpenType, TrueType and PostScript fonts. Needs to be downloaded and installed. The free version has limited functionality compared to the free version. But it’s enough to create a simple font.
• What Font is is an online service for selecting website fonts. We download the font file, indicate the site url and see how the downloaded font will look on the site. Convenient service.
• 1001 Fonts – library of fonts (more than 15,000). Easy navigation – font can be selected by size, type, theme, design, etc. The menu allows you to customize the output, which makes it possible to see each font in different options: size, style, etc.
• Font Flame is an online service for selecting a pair of compatible fonts. It works very simply - on the main page there is a sheet with two inscriptions made in different fonts. If you liked it, click “Love”; if you didn’t, click “Hate”. Then you can view the selected ones again. Clicking on the font name opens Google Fonts.
• Typecast – selecting a font for the prototype. You can see how the font will look on any device. It is necessary to identify different types of text - headings, quotation marks, etc. You can choose a typeface, size, style, and set indents. You will see your future page in the fonts you installed. A big plus is the choice of layout (one column or several, different block arrangements).
• Wordmark - allows you to select the font installed on the user’s computer for text, logo or title. When you enter text in a field, it shows it in different fonts. You can select the size, register, display in black and white or vice versa. The options you like are published on Twitter or on Facebook - at the user’s choice. Can be sent by email.

Stock Photos

• Unsplash is a constantly updated stock of photos. Collections are divided into themes. You can find anything from "African-American" to "Nature". Each photo has its own rating, you can see the best or new ones.
• FoodiesFeed – food photos. The images are divided into categories. You can choose the best, exclusive, icons, mockups, etc.
• Free Refe Photos - a huge list of "Real life" images. Mainly landscape and nature photography. Inconvenient navigation, all the photos on the main page appear when scrolling.
• Little Visuals – high-quality photos of landscapes and buildings. You can download an archive of the best photos posted during the week. Photos are labeled with hashtags, but are not categorized.
• Gratisography is a huge library of free photos. All photos are divided into six themes: people, grimaces, cities, objects, nature and animals. You can search by words.
• Death to the Stock Photo – stock photos. You can't just look and choose. They make a selection a month in advance and let you download it after entering your email. The archive weighs about 11 MB. The best photos and a download link are sent by email.
• Superfamous – a large collection of photos from an unusual angle. The set is small but interesting.
• The Pattern Library - patterns and textures. The set is quite large, the templates are unusual. They are replaced by scrolling, and gradually. You can see how the template will look on the entire screen or part of it.
• New Old Stock – vintage photos from the archives. There are few free photos, but new ones appear regularly.
• Pexels – a large number of photos for all occasions. They are divided by topic, very easy to search.
• Jay Mantri - large set of photos. There is no classification as such, you can look at it by month.

Stock graphics

• Brusheezy – free brushes, templates, textures and more for Photoshop. 12 categories, each with subcategories. The choice is huge.
• Iconfinder – icons, both paid and free. You can download in ICO, PNG, ICNS, SVG formats.
• Brushez is a large collection of brushes for Photoshop. In addition to them, there are also vector primitives, forms, templates, styles. Each section is divided into subsections. For example, there are more than 20 categories for brushes.
• Vecteezy is a library of vector graphics, including images and illustrations. A large number of categories and a huge number of graphics.
• Iconbird is a Russian-language icon search service. You can enter a topic and get a set of icons, or you can browse by category.
• Icons8 is a Russian-language service that offers more than 42,000 icons on various topics.

Infographics

• Vizualize is an online service for creating “About Me” infographics. Essentially creates a graphical resume.
• Canva is a simple tool for creating any design. Allows you to design a presentation, poster, post on social networks, books, letters, materials and much more. Everything is done based on templates, the text changes. But there are a lot of templates to choose from.
• Easelly – creating infographics based on templates. The built-in online editor allows you to change the design, place additional elements, and change the text.
• Infogram is an online service for creating infographics and interactive diagrams. Not all functions are available; you will have to buy an account.
• Visage is a simple tool for creating any visual content (charts, infographics, blog images, etc.). Lots of templates, simple editor. Some features are paid.
• Gliffy is an online service for creating diagrams. The editor operates on the principle of Microsoft Visio.
• Visme is an online tool for creating presentations and infographics. More than 1000 templates. The editor allows you to add text (headings, lists, quotes and regular), animated text and widgets. In a free account you can download it as a JPG file.
• Piktochart - Create high-quality graphics - presentations, infographics or printed materials. Uploads PNG, JPG of different sizes.
• Drawio is a convenient online service for creating diagrams. You can save to dropbox and similar services, or to disk.
• Venngage – easy creation of infographics, posters, reports, materials for social networks, etc. In the free version, it only provides a link to the publication. You have to pay for downloading.
• Cacoo is an online service for drawing diagrams and sitemaps. Perhaps the best in terms of capabilities. A large number of tools and templates. You can export to PNG, PDF, SVG, PPT, etc.
• Creately is an online diagramming service. Available for publication only. There is a charge for downloading.
• Lucidchart is an online service for creating diagrams and drawings. It is possible to import a Microsoft Visio diagram. Exports to PDF, PNG and JPG. Paid functionality available.

Colors

• Color Hunt – selection of color combinations. You can select up to four colors. There are ready-made solutions to choose from.
• TinEye – analyzes the site and displays a list of resources that use an image from the site.
• ColorZilla – allows you to create colors and gradients. Displays css properties for them.
• Adobe Color CC – creating color schemes.
• Colicious – press the spacebar and generate a new color.
• Colorscheme - selection of color schemes. There is a version in English and Russian. Allows you to select colors for the site. Has fine tuning and shows the color code. Ultimately, it allows you to view the page in the selected color scheme. The biggest advantage is viewing the gamut in terms of color perception deviation. It also allows you to choose different color models. Saves Gimp, CSS, PNG, etc. to the palette. Has a color converter for converting from one color model to another.
• Paletton is a tool for creating color combinations. No different from Colorscheme.
• Pictaculous – Analyzes the palette of a PNG, JPG or GIF image. Upload an image and get a set of all the colors that are present in it.
• Hex Color Tool – color selection tool. Use the sliders to adjust the color, and you can choose the brightness. The selected color is then saved. You can choose a palette.
• (Un)clrd is a browser plugin that removes all colors and leaves the site in black and white.
• BrandColors - the largest collection of official brand color codes. Select the brand name and download the names of its colors, including the css file.
• Colortyper - selection of colors from an unusual angle. The screen shows multi-colored symbols that intersect. The result of the intersection is a new color. Looks interesting.

Inspiration

• Dribbble - The largest community of designers. Work, community, communication - you can find anything here.
• Freebbble - templates and designs from Dribbble. Some things can be downloaded for free, some can be purchased. You can find templates for CMS, designers, icons, mockups, designed website templates and much more.
• Muzli - Daily design inspiration. A resource for designers with examples of the most unusual works.
• Awwwards - the best developments of designers. Organized as a community voting site. The site of the day, month, year, etc. is selected. A large number of designs, videos, developments.
• Design You Trust is a community of designers sharing the latest trends, news, portfolios, designs and creative announcements.
• Really Good Emails - A huge collection of well-designed emails. Choose a template and get its html, css and js code. You can change text, pictures, etc.
• Fubiz – publications from the field of design and creativity. You can find photographs, designs, graphics, videos, etc. Everything is divided into categories.
• Designspiration is a collection of Pinterest-style designs. A huge number of ideas and examples - typography, logos, letters and much more.
• Behance is a collection of portfolios from professionals. You can leave a vacancy or a resume.
• Mobile-patterns – library of iOS and Android screenshots. Everything is divided into sections. You can find many ideas.
• One Page Love is a gallery of the best web page designs. You can buy templates and themes. There are also free ones.
• Uispace is a resource for designers. You can download psd, sketch, fonts, mockups, etc. for free.

Graphic editors

• DAZ 3D - 3D modeling. Register and download the desktop application.
• Gimp is a free analogue of Photoshop. Allows you to customize a modular grid, create guides, work with layers, add effects, etc. It is a good free replacement for Photoshop. It is extensible - you can download additional plugins.
• Blender - 3D modeling, animation, rendering, sound, video. Allows you to create games. Fast growing editor, very popular.
• Aviary is an online photo editing service. Many options, including Red-Eye Effect, resizing, etc.
• Pixlr is an online photo editor and a separate graphics editor. The last one looks like Photoshop. Saves to disk.
• BeFunky is an online photo editing service. Effects, frames, graphics, retouching and much more. There is a Russian-language interface.
• Inkscape is a complete open source vector graphics editor. Supports the capabilities of the SVG format - working with shapes, contours, text, vectorization of raster graphics, etc. In addition to processing vector images, it allows you to create a website template and cut it - a modular grid is present. Allows you to draw backgrounds, banners, vector logos, etc.
• IconEdit2 is a very simple program for drawing icons. Has filters. Allows you to export an image for Android and Apple. You can adjust the color depth, rotate and adjust the icon. Supports translucency, multiple images per ICO file, and anti-aliasing in all drawing tools.
• Falco GIF Animator is a program for creating frame-by-frame animation and animated icons. You can download many different programs on the resource.
• Krita is a professional open source desktop editor. Available for different OS.
• Boxy-SVG is a vector graphics editor similar to Adobe Illustrator, Sketch and Inkscape.
• Photopos is a multifunctional program, with the functions of a photo editor, a graphic editor and an application for creating computer graphics.
• 5Dfly is a free batch photo processing application. Can create slide shows using PowerPoint. You can download the PDF converter separately.
• PaintStar is a free image editor. The interface is very similar to Paint, but has more options. Layers, for example.
• PhotoScape is a simple photo editor. It has functions for adjusting brightness and color, white balance, backlight correction, frames, balloons, mosaic mode, adding text, drawing images, cropping, filters, red-eye removal, colorization, brush, clone stamp, effect brush, etc.

Hi all! Today, as part of the web design section, I want to talk about the fonts that should be used when developing a web site.

As a rule, not everyone thinks about what fonts should be used for the content part of the site. Selecting beautiful fonts for a website is the most important part of design development. Since the readability of the site’s information depends on this part, and this, as we know, is the most important thing on the site. For this reason, this issue should be taken very seriously.

But you can only use fonts in website design that are available to future site visitors. This is done to ensure that the pages are displayed correctly for all users, with different operating systems and browsers. Otherwise, if you use non-standard fonts, then most visitors will see everything differently and, in most cases, in an unsightly way. For this reason, it is recommended to use the standard fonts listed below. The list of fonts includes fonts that are installed on the operating system Windows XP and higher.

In this article I do not consider fonts from other operating systems. An experienced layout designer should know the comparison of fonts in different operating systems, and during layout he will write this point in CSS styles.

Basically, when developing the content part of the design, two types of fonts are used:

• serif fonts
• sans serif fonts

Serif fonts- (English serif - serif) fonts whose style begins and ends with strokes. For example Times New Roman.

Sans serif fonts(chopped fonts) - (English sans-serif - sans serif) fonts with strict, straight lines without serifs. For example Arial.

Below you can see a screenshot of serif and sans serif fonts.

Fonts for web design:

• Arial
• Arial Black
• Arial Narrow
• Book Antiqua
• Century Gothic
• Comic Sans MS
• Courier New
• Franklin Gothic Medium
• Georgia
• Impact
• Lucida Console
• Lucida Sans Unicode
• Microsoft Sans Serif
• Palatino Linotype
• Sylfaen
• Tahoma
• Times New Roman
• Trebuchet MS
• Verdana
• Webdings (various symbols and marks)
• Wingdings (various symbols and signs)

I would also like to note such a thing as the absence of italics in a number of fonts; instead of italics, they use slant, which makes the text difficult to read.

Of the standard fonts in Windows that do not have italics:

• Arial Black
• Comic Sans MS
• Franklin Gothic Medium
• Impact
• Lucida Console
• Lucida Sans Unicode
• Microsoft Sans Serif
• Sylfaen
• Tahoma

Since I mentioned fonts that do not have italics, I would also like to note the fact that there are fonts that are initially bold fonts. For these reasons, there is no point in using styles that indicate bold font, since the result will not be what we need.

There are a huge number of ways to find the right font for your website. For example, you can use services with huge font libraries that require a paid subscription.

If you're on a budget or experimenting with a small project, you can use free web fonts that are publicly available. Finding the right web font for your website can be time-consuming, so we present you with a selection of the best among them.

1. Montserrat

As typography evolves, it moves away from vintage urban posters and signs. The creator of this font tried to preserve the beauty of the typography of the urban posters she saw on the streets of Buenos Aires.

2. Abril Fatface

Abril Fatface is part of a large font family that comes in 18 styles created for different purposes. This font has a strong, elegant presence, making it a great solution for creating eye-catching headlines. It is most often combined with Lato, Open Sans and Droid Sans.

3. Playfair Display

Given the significant x-height and small subscripts of the letters, Playfair Display is also suitable for writing a heading, especially if space is limited. It pairs well with Georgia and is often used with Oswald, Lato and Arvo.

4. GT Walsheim

Used on many blogs today, GT Walsheim is a representative of geometric sans serifs and is part of the Grilli Type family. You have to pay for a full set of fonts, but Grilli Type offers a free trial of GT Walsheim.

5. Merriweather

If on-screen readability is a priority for your project, check out Merriweather, which was created for this purpose. In addition, this font is constantly being improved.

6. Josephine Sans

Josefin Sans is inspired by vintage Swedish design and features an elegant, geometric aesthetic.

7. Gravitas One

Gravitas One is based on “UK fat face”, a bold advertising font that appeared during the Industrial Revolution in England. This font looks great in medium to large scale and is suitable for headings, titles and tabs.

8. Jura

The letters of this font repeat the forms of the Kaya-li letter. It also contains glyphs of the Cyrillic and Greek alphabet. It is available in light, normal, medium and bold weights.

9.League Gothic

Originally designed by Morris Fuller Benton for the American Type Founders Company in 1903, League Gothic found a new use with an update and the addition of new glyphs.

10. Fjord

Fjord is a serif font originally created for printed books and is particularly suitable for fitting long text into a small print format. It can be used to create a large amount of text content on the site, as the font has a clear structure, prominent serifs and long, elegant heads and feet.

11. Amaranth

The Amaranth font family features a non-oblique italic design with little contrast and noticeable curves. All three Amaranth styles pair well with almost any other font. You can play with this font - experiment and choose the best.

12. Poly

This medium contrast font was originally created for the indigenous Wayuunaiki language, which requires wide glyphs. It features small stems and a large x-height, making it especially useful in small sizes.

13. Gentium Basic

This font was created as a multi-linguistic font, including Latin and Greek letters, as well as Cyrillic and advanced support in the Gentium Plus version. Gentium Basic and Gentium Book Basic are available in a free web version, but are limited to the Latin alphabet only.

14. Open Sans

Open Sans is a representative of humanistic grotesques. This font is highly legible and adapts to both web and mobile interfaces. It is a non-slanted font with a simple style of letters, which is characterized by a neutral, but pleasant enough appearance that it can be used for a variety of purposes.

15. Ledger Regular

It is a multi-functional font with a large x-height, strong color contrast, and well-defined serifs that contribute to the readability of the text. This font looks good both in print and on a low-resolution screen.

16. Signika

This free web font is representative of sans serif. Low contrast and high x-height allow Signika to display well on screen. The wide selection of icons includes symbols, pictograms and arrows.

17. Josefin Slab

Created according to the canons of a geometric font typical of the 1930s, with the addition of Scandinavian features, Josefin Slab has the characteristics of a slab font and is reminiscent of a typewriter font. Interestingly, its x-height is half the height of a capital letter.

18. Forum

As the name suggests, this is a Roman font that is good for caps lock headings, but also suitable for displaying text. The elegant proportions of this font are reminiscent of classical architecture with its semicircular arches, horizontal cornices and vertical columns.

Named after one of the most famous Mayan cities, Tikal Sans has features of glyphs that were used in the writing of the South American civilization. Its creator chose a large x-height, which gives the font a modern look and has a beneficial effect on its legibility, and the large selection of styles allows it to be used for a variety of purposes.

20. Arvo

Suitable for both print and web, this geometric slab font is available in Roman, Italic, Roman Bold and Bold Italic. Arvo's low contrast enhances its on-screen readability.

21. Bevan

Bevan was created based on the traditional slab font of the 1930s. The letters were digitized, given a new shape and optimized for the web version. This is one of the few super bold fonts that are suitable for websites.

22. Old Standard TT

Old Standard TT was based on the Modern serif font, which was popular in the late 19th and early 20th centuries and then forgotten for a long time. This font is suitable for adding style to a specific type of content, such as scientific research or texts in Greek or Cyrillic.

23. Creon

Ideal for news websites and blogs, this serif font also shares the characteristics of a slab font, but its balance and low contrast make Kreon significantly more personal.

24. Droid Sans

Droid Sans has been optimized for maximum readability even in small interfaces, such as menus on mobile phone screens. This is a neutral, non-oblique font with simple, open letterforms.

25. Italiana

The creator of this font was inspired by classic Italian calligraphy, so the font will be very useful for projects where you need to add elegance. Italiana is also suitable for writing news headlines in both print and electronic format.

26. Vollkorn

This detailed, feature-rich serif font is very popular. Its clarity and solidity convey confidence and energy, making the font equally effective in larger sizes for headings and titles, as well as large amounts of text in smaller formats.

27. Actor

This font has a particularly large x-height, which requires quite a lot of space. Actor also features an old-fashioned style for some characters, such as the numbers 6 and 9.

With roots dating back to the 16th century, the humanistic typeface Garamond has become a true typographic icon, often serving as the basis for the creation of modern typefaces, including EB Garamond.

31. Ubuntu

Ubuntu Grotesque was created to personalize web text on both desktops and mobile devices. Users are encouraged to experiment with this font, modify and improve it as they see fit.

32. Rosario

Rosario is a classic humanistic sans serif that is perfect for stylizing paragraphs of text.

33. Roboto Slab

Roboto Slab is one of the fonts from the Roboto family. The block version is especially eye-catching with its geometric shapes and open curves. It is equally suitable for gadget screens and printed versions of texts.

34. Oswald

The font is a reworked version of the classic Alternate Gothic sans serif. Oswald was recently updated to come in a variety of weights, an expanded character set, and better kerning.

35. Stalemate

Stalemate is a sleek handwritten font with some vintage flair. It is suitable for creating accents and personalizing your website.

36. Crimson Text

This carefully designed classic proportional font can be used for both displaying large amounts of text and writing headings.