How to import font to css
How to import font to css
Нестандартные шрифты: как подключить и оптимизировать
Текст — основная часть контента на большинстве сайтов, и важно грамотно подходить к его отрисовке. В этой статье мы разберём базовые моменты, касающиеся подключения и оптимизации шрифтов.
Сразу стоит отметить, что самый простой вариант — вообще не подключать сторонние шрифты и пользоваться стандартными, которые предустановлены в большинстве операционных систем. Это хорошо знакомые Arial, Times New Roman и так далее — эти шрифты называются веб-безопасными, достаточно просто указать название одного из таких шрифтов в коде, и всё будет работать.
Но чаще всего дизайн макета не позволяет обойтись веб-безопасным шрифтом, а требует использовать какой-то нестандартный. В этом случае при загрузке страницы файл со шрифтом нужно подгружать с сервера по той же схеме, что и остальные ресурсы — CSS-файлы, изображения и так далее. Он может весить довольно много, именно поэтому для быстрой загрузки страницы выгоднее сначала рассмотреть возможность использования стандартных шрифтов. Но даже с нестандартными шрифтами можно избежать большинства проблем, если уделить внимание оптимизации.
Выбираем формат шрифта
Все слышали про TTF и OTF. Но это форматы, которые предоставляются с минимальным сжатием или совсем без него. Их стоит использовать только в том случае, если нужна поддержка очень старых браузеров.
Подключение шрифтов с помощью Google Fonts
Есть простой и удобный способ подключить нестандартный шрифт — использовать Google Fonts. Это бесплатный сервис, с помощью которого можно подключать шрифты, но не хранить их на своём сервере. Чтобы им воспользоваться, необходимо выбрать шрифт и добавить одно или несколько нужных начертаний, а затем вставить в ссылку, которую сгенерирует Google Fonts во вкладке Embed.
Этого достаточно, чтобы шрифт подключился. Теперь его можно использовать в свойстве font-family без каких-либо дополнительных действий.
Стоит отметить, что после основного шрифта важно указать веб-безопасный. В случае, если нестандартный шрифт не загрузится, браузер воспользуется альтернативным. Его нужно подобрать максимально похожим на основной шрифт.
Плюсы этого способа — простота использования и всегда актуальные версии шрифтов, Google Fonts их часто обновляет. Но у него есть и минус — запросы к сторонним серверам могут негативно повлиять на скорость загрузки страницы. Если выбираете этот способ, стоит обратить внимание на оптимизацию.
Подключение шрифтов с помощью правила @font-face
Название шрифта, которое затем нужно использовать, чтобы задать элементам подключённый шрифт.
Адрес файла со шрифтом, который нужно подключить, и его формат. Если адресов несколько, их можно указать через запятую. В этом случае важен порядок — браузер будет последовательно пытаться подключить файлы. Первым должен быть самый подходящий формат, а далее — запасные варианты. Также с помощью функции local можно добавить возможность перед загрузкой шрифта с сервера проверить, установлен ли он на компьютере пользователя. Если да, запроса к серверу за шрифтом не будет — при рендеринге используется локальная версия. Но у этого способа есть минус — шрифт на компьютере пользователя может быть устаревшим, и тогда страница отобразится не совсем так, как было задумано.
Базовый вариант правила:
Для улучшения производительности правило @font-face лучше всего прописывать в самом начале CSS-файла. Так браузер сможет раньше начать обработку шрифта.
Оптимизация
Выбор современного формата шрифта, который обладает хорошей степенью сжатия — это только первый шаг к оптимизации. Можно сделать гораздо больше, чтобы увеличить скорость загрузки страницы и сделать пользовательский опыт при взаимодействии с интерфейсом приятнее.
FOIT, FOUT и FOFT
Пока шрифт загружается, при рендеринге можно наблюдать разное поведение текста.
FOIT (Flash of Invisible Text) — с англ. «мелькание невидимого текста». При таком поведении, пока шрифт не загрузится, текст не отображается и появляется только после загрузки шрифта. Значительная проблема — во время загрузки нет доступа к текстовому контенту.
FOUT (Flash of Unstyled Text) — с англ. «мелькание неоформленного текста». Во время загрузки используется шрифт, заданный по умолчанию (системный, например), а после загрузки страница перерисовывается с использованием загрузившегося шрифта. Эта перерисовка довольно заметна и может быть нежелательна.
FOFT (Flash of Faux Text) — с англ. «мелькание синтезированного текста». Это поведение можно наблюдать в промежутке, когда основное начертание уже загрузилось, а дополнительные (жирное, курсивное и так далее) — нет. Браузер имитирует нужное начертание до загрузки настоящей версии. В этом случае страница может перерисовываться несколько раз по мере загрузки начертаний.
Свойство font-display
У свойства есть несколько значений, которые определяют поведение текста во время загрузки шрифта:
auto — поведение по умолчанию, зависит от браузера.
block — текст не отображается в течение короткого периода (3 секунды), затем отрисовывается запасной шрифт, если основной ещё не загрузился. Как только загрузка завершается, текст перерисовывается снова.
swap — сразу же отрисовывается запасной шрифт, после загрузки шрифта — повторный рендеринг.
fallback — в течение очень короткого периода (100 миллисекунд) не отображается ничего, затем браузер использует запасной шрифт и ждёт 3 секунды — если шрифт всё ещё не загрузился, остаётся запасной шрифт. Далее не важно, загрузился шрифт или нет, замена не произойдёт. Если шрифт загрузится, то он применится только при обновлении страницы.
optional — текст не отображается в течение 100 миллисекунд, а затем отрисовывается запасным шрифтом. Даже если шрифт загрузится после этого, замена произойдёт только при обновлении страницы.
Предзагрузка шрифтов
Ещё один способ оптимизации — предварительная загрузка шрифтов. С её помощью можно изменить обычную приоритизацию загрузки ресурсов, тем самым сказав браузеру, что важно загрузить шрифт в первую очередь.
Стоит учесть, что браузер загрузит шрифт в любом случае — даже если он не используется на странице. И, обладая высоким приоритетом, эта загрузка может блокировать загрузку других ресурсов, поэтому нужно грамотно выбирать, что именно предзагружать. Например, если на странице используются три разных шрифта, стоит предзагрузить только основной шрифт без дополнительных начертаний.
Для того, чтобы предзагрузка сработала, нужно поместить в ссылку на шрифт и задать атрибуту rel значение preload :
Уменьшение количества глифов шрифта
По умолчанию шрифт может содержать глифы (буквы, символы) разных языков и просто редко используемые. С помощью свойства unicode-range можно установить диапазон нужных символов в системе Unicode, тогда браузер будет подгружать сабсет (подмножество) шрифта только в тот момент, когда на странице появится символ из этого диапазона. Предварительно нужно подготовить файлы шрифтов, разбив их на группы.
Например, можно отдельно подключить латиницу и кириллицу, если на сайте представлены версии на двух языках. И с помощью unicode-range браузер поймёт, какой сабсет нужен для конкретной страницы, и загрузит только его. Такой файл будет иметь меньший вес и ускорит загрузку страницы.
Также можно проанализировать, какие конкретно глифы используются на сайте и создать кастомный сабсет исключительно с ними. Для этого есть специальные инструменты.
Google Fonts по умолчанию использует сабсеты. Это можно увидеть, открыв CSS-файл, который подключается в при использовании сервиса. Для каждого языка есть отдельный сабсет. Пример для латиницы и кириллицы:
В статье разобраны только базовые способы оптимизации шрифтов. Но даже их достаточно, чтобы улучшить пользовательский опыт и значительно уменьшить вес файлов шрифтов, ускорив тем самым загрузку страницы.
Полезности
HTML шорты: посторонние шрифты. Про подключение шрифтов и методы оптимизации.
Статья о font-display. В ней кроме прочего приведена наглядная схема того, как работают все значения свойства.
Исчерпывающее руководство по стратегиям загрузки веб-шрифтов. Подробный разбор плюсов и минусов методов подключения и оптимизации шрифтов.
Оптимизация шрифтов. В статье разобраны разные методы: использование сабсетов шрифтов в зависимости от языка, HTTP-кеширование, Font Loading API и так далее.
Subsetting Fonts with Glyphhanger. Статья о том, как использовать инструмент для создания сабсетов.
Importing fonts the right way
Do you know how to do it the right way?
There was this time I was helping a team of developers to get up and running a bunch of sites, we had the designer’s work done, the application was running smoothly on my computer, but then when I started building those pages, I noticed there were a lot of different font-family values which didn’t make any sense to me because it was about the same font just with different variations in weight and style. I realized we maybe had made a mess in our CSS, so we needed to fix it out the right way.
How to import fonts the right way?
First of all, we need to learn that the way of importing a font into a website is through CSS, this allows us to load fonts to the webpage. Once added to a stylesheet, the rule instructs the browser to download the font from where it is hosted, then it displays the font as specified in the CSS.
Without the rule, our designs are limited to the fonts that are already loaded on the user’s computer, which may vary depending on the system we are using.
@font-face Rule
Font-family: Specifies a name that will be used as the font face value for font properties.
Src: Specifies the source containing the font data. This can be an URL to a remote font file location or the name of a font on the user’s computer.
Font-weight: specifies the weight (or boldness) of the font. The font weights available depend on the font-family you are using. Some fonts are only available in normal and bold.
Font-style: Specifies whether a font should be styled with a normal, italic, or oblique face from its font-family.
And then you can include that font in a CSS Rule:
Important note: The @font-face should be added before any CSS rules.
Browser support
If you are concerned about how many browsers will display your new font, you ought to grab a lot of formats for the same font. The following is a great example of a deep browser support:
There are more practical cases when you’re probably going to get enough support with a couple of sources like this:
Using @import
While @font-face is excellent for fonts that are hosted on our own servers, there may be situations where an online hosted font solution would be better.
A benefit of using an online hosted service is that this may include all the font file variations; it ensures deep cross-browser compatibility without having to host all those files ourselves.
Importing with multiple font-weights and styles
This is the most important step where you really should do it the right way, most of the times you will find yourself with a bunch of different files; something like this:
Regardless your application’s architecture, you need to import the files at some point from the CSS. You should take care of importing all those files correctly, before setting up rules.
Inside your application, use @font-face
You can now specify font-weight:bold or font-style:italic to any element you like without having to specify the font-family or overriding font-weight and font-style.
The local part inside src checks if the font is in the user’s system first.
As you can see from the code above, we are importing two different files for each one of the variations, all are for Proxima Nova font, normal style, but different font-weight, how do we know this? Easy, usually the filename should tell us which weight the file has, let’s dive deep into this.
Understanding font-weight
The font-weight property accepts either a keyword value or a predefined numeric value. The available keywords are:
The available numeric values are:
You should consider:
The keyword value normal maps to the numeric value 400 and the value bold maps to 700.
The keyword values: bolder and lighter are relative to the computed font-weight of the parent element.
The browser will look for the closest bolder or lighter weight, depending on what is available in the font-family, otherwise it will simply choose 400 or 700, depending on which makes the most sense.
See the beauty
Now you can just change the weight and style as needed without changing the font-family every time:
In conclusion, we should try to avoid making a mess inside our application CSS, specially with values like fonts which are recurrent along the whole application because one refactor could mean building the entire CSS files again. Try to stick to a convention if this way is not the best option for you, just build the simple rules as possible and try to use SASS or LESS to give more power to your stylesheets.
Загрузка своего шрифта
Если у вас на компьютере уже установлен специфический шрифт, то в стилях достаточно добавить строку.
Значением свойства font-family выступает название гарнитуры шрифта, она будет применяться ко всем заголовкам
. Но что увидят посетители сайта, у которых наш эффектный и редкий шрифт не установлен? Подобная ситуация наиболее вероятна, так что если браузер не распознаёт заявленный шрифт, он будет использовать шрифт по умолчанию, к примеру в Windows это Times New Roman. Весь наш тщательно продуманный шрифтовой дизайн в одночасье рассыплется и пойдёт прахом, поэтому надо поискать наиболее универсальное решение. Первое что сразу же приходит в голову — это организовать загрузку файла шрифта на компьютер пользователя и отображение текста выбранным шрифтом. По сравнению с другими методами вроде отображения текста через рисунок этот способ самый простой и универсальный.
Какие плюсы в итоге даёт нам загрузка файла шрифта с последующим применением через CSS.
Как видите, преимуществ очень много. Небольшие минусы тоже имеются и для баланса их стоит упомянуть.
В табл. 1 перечислены версии браузеров и форматы шрифтов, которые они поддерживают.
| Формат | |||||||
| TTF | 9 | 12 | 4 | 10 | 3.1 | 3.5 | 2.2 |
| EOT | 5 | ||||||
| WOFF | 9 | 12 | 5 | 11.5 | 5.1 | 3.6 | 4.4 |
| SVG | 3.2 | 3 |
Самые поддерживаемые форматы — TTF и WOFF. За исключением IE до версии 9.0 все браузеры их прекрасно понимают. Так что если у вас шрифт именно в этом формате и вы ориентируетесь на современные браузеры, никаких дополнительных действий делать не придётся. Достаточно в стилях написать следующий код (пример 1).
Пример 1. Подключение TTF
Современный элемент политического процесса
По сути, политическое учение Монтескье приводит континентально-европейский тип политической культуры, что получило отражение в трудах Михельса.
Web fonts
In the first article of the module, we explored the basic CSS features available for styling fonts and text. In this article we will go further, exploring web fonts in detail. We’ll see how to use custom fonts with your web page to allow for more varied, custom text styling.
| Prerequisites: | Basic computer literacy, HTML basics (study Introduction to HTML), CSS basics (study Introduction to CSS), CSS text and font fundamentals. |
|---|---|
| Objective: | To learn how to apply web fonts to a web page, using either a third party service, or by writing your own code. |
Font families recap
As we looked at in Fundamental text and font styling, the fonts applied to your HTML can be controlled using the font-family property. This takes one or more font family names. When displaying a webpage, a browser will travel down a list of font-family values until it finds a font available on the system it is running on:
This system works well, but traditionally web developers’ font choices were limited. There are only a handful of fonts that you can guarantee to be available across all common systems — the so-called Web-safe fonts. You can use the font stack to specify preferred fonts, followed by web-safe alternatives, followed by the default system font. However, this increases your workload because of the testing required to make sure that your designs work with each font.
Web fonts
But there is an alternative that works very well. (It’s even supported by such older browsers as IE version 6.) CSS allows you to specify font files, available on the web, to be downloaded along with your website as it’s accessed. This means that any browser supporting this CSS feature can display the fonts you’ve specifically chosen. Amazing! The syntax required looks something like this:
First of all, you have a @font-face ruleset at the start of the CSS, which specifies the font file(s) to download:
Below this you use the font family name specified inside @font-face to apply your custom font to anything you like, as normal:
The syntax does get a bit more complex than this. We’ll go into more detail below.
Here are some important things to bear in mind about web fonts:
Note: Web fonts as a technology have been supported in Internet Explorer since version 4!
You can use the Firefox Font Editor to investigate and manipulate the fonts in use on your page, whether they are web fonts or not. This video provides a nice walkthrough:
Active learning: A web font example
With this in mind, let’s build up a basic web font example from first principles. It’s difficult to demonstrate this using an embedded live example. So instead we would like you to follow the steps detailed in the below sections to get an idea of the process.
You should use the web-font-start.html and web-font-start.css files as a starting point to add your code to (see the live example). Make a copy of these files in a new directory on your computer now. In the web-font-start.css file, you’ll find some minimal CSS to deal with the basic layout and typesetting of the example.
Finding fonts
For this example, we’ll use two web fonts: one for the headings and one for the body text. To start with, we need to find the font files that contain the fonts. Fonts are created by font foundries and are stored in different file formats. There are generally three types of sites where you can obtain fonts:
Let’s find some fonts! Go to Font Squirrel and choose two fonts: a nice interesting font for the headings (maybe a nice display or slab serif font), and a slightly less flashy and more readable font for the paragraphs. When you’ve found a font, press the download button and save the file inside the same directory as the HTML and CSS files you saved earlier. It doesn’t matter whether they are TTF (True Type Fonts) or OTF (Open Type Fonts).
Unzip the two font packages (Web fonts are usually distributed in ZIP files containing the font file(s) and licensing information). You may find multiple font files in the package — some fonts are distributed as a family with different variants available, for example thin, medium, bold, italic, thin italic, etc. For this example, we just want you to concern yourself with a single font file for each choice.
Note: In Font Squirrel, under the «Find fonts» section in the right-hand column, you can click on the different tags and classifications to filter the displayed choices.
Generating the required code
Now you’ll need to generate the required code (and font formats). For each font, follow these steps:
After the generator has finished processing, you should get a ZIP file to download. Save it in the same directory as your HTML and CSS.
If you need to support legacy browsers, select the «Expert» mode in the Fontsquirrel Webfont Generator, select SVG, EOT, and TTF formats before downloading your kit.
Web services for font generation typically limit file sizes. In such a case, consider using tools such as:
Implementing the code in your demo
At this point, unzip the webfont kit you just generated. Inside the unzipped directory you’ll see some useful items:
To implement these fonts in your demo, follow these steps:
You should end up with a demo page with some nice fonts implemented on them. Because different fonts are created at different sizes, you may have to adjust the size, spacing, etc., to sort out the look and feel.
Note: If you have any problems getting this to work, feel free to compare your version to our finished files — see web-font-finished.html and web-font-finished.css. You can also download the code from GitHub or run the finished example live.
Using an online font service
Online font services generally store and serve fonts for you so you don’t have to worry about writing the @font-face code. Instead, you generally just need to insert a simple line or two of code into your site to make everything work. Examples include Adobe Fonts and Cloud.typography. Most of these services are subscription-based, with the notable exception of Google Fonts, a useful free service, especially for rapid testing work and writing demos.
Most of these services are easy to use, so we won’t cover them in great detail. Let’s have a quick look at Google fonts so you can get the idea. Again, use copies of web-font-start.html and web-font-start.css as your starting point.
Note: You can find a completed version at google-font.html and google-font.css, if you need to check your work against ours (see it live).
@font-face in more detail
Let’s explore that @font-face syntax generated for you by Fontsquirrel. This is what one of the rulesets looks like:
Let’s go through it to see what it does:
Note: You can also specify particular font-variant and font-stretch values for your web fonts. In newer browsers, you can also specify a unicode-range value, which is a specific range of characters you want to use out of the web font — in supporting browsers, only the specified characters will be downloaded, saving unnecessary downloading. Creating Custom Font Stacks with Unicode-Range by Drew McLellan provides some useful ideas on how to make use of this.
Variable fonts
There is a newer font technology available in browsers called variable fonts. These are fonts that allow many different variations of a typeface to be incorporated into a single file, rather than having a separate font file for every width, weight, or style. They are somewhat advanced for our beginner’s course, but if you fancy stretching yourself and looking into them, read our Variable fonts guide.
Summary
Now that you have worked through our articles on text styling fundamentals, it’s time to test your comprehension with our assessment for the module: Typesetting a community school homepage.
How to use web fonts in CSS: A tutorial with examples
June 16, 2021 7 min read 2203
Editor’s note: This web fonts in CSS tutorial was last updated on 30 June 2021 to remove outdated information about browser support for variable fonts. It may still contain information that is out of date.
In the early days, designers were limited to popular system fonts such as Arial, Helvetica, Verdana, and Times New Roman. Reliable custom font use was only possible with image replacement or plugins such as Flash.
Basic support for web fonts was introduced in Internet Explorer 4.0 released in 1997. However, it took more than a decade for cross-browser technology to be implemented by the @font-face tag. The availability of new open-source fonts also prevented legal issues from vendors who were reluctant to allow unrestricted use of commercial typefaces.
In this tutorial, we discuss various techniques and best practices for adding custom fonts to webpages. We’ll cover the following:
Do you really need web fonts?
Just because you can add dozens of fonts to every page doesn’t mean you should. Here’s why:
What web fonts can you use in CSS?
Web apps may also feel more native if they use a standard system font. For example, the following stack implemented at GitHub targets system fonts available across MacOS, iOS, Windows, Linux, and Android platforms:
Medium and the WordPress administration panels use a similar version:
Web-safe fonts that you can use with CSS include:
Over 200k developers use LogRocket to create better digital experiences
For more information about fonts that are compatible with CSS and HTML, check out this list of CSS web-safe fonts.
How to use web fonts in CSS
If a stack requires several declarations in a stylesheet, it may be practical to use a CSS preprocessor such as Sass:
You can also use a @font-face declaration that references local fonts:
How to use web fonts in CSS from a font repository
If a system typeface makes your marketing manager wince, there are several repositories that offer a wide range of open-source fonts that are served from a content delivery network (CDN). Popular options include:
Google Fonts is the most popular font repository. It provides a searchable list, weight and style customization options, and load time estimation.
More great articles from LogRocket:
Example: How to add the Open Sans font in CSS
The font will be downloaded and processed in parallel with your own stylesheet.
Alternatively, you can use a CSS @import :
The downside is that this blocks the processing of further stylesheets until the font styles have been parsed.
The web font can then be set in any CSS declaration. Here’s how to include the Open Sans font in CSS:
You can further optimize the URL API — for example, by requesting multiple families:
…with differing weights and styles:
Or by limiting the font to known letters — perhaps for a logo or heading:
How to use your own web font files in CSS
Any font file can be used in your webpage but make sure you check that you have permission from the owner of the typeface. All modern browsers support WOFF format. WOFF2 offers typical compression savings of 30 percent but is not supported by Internet Explorer. For older or more obscure applications, TTF, EOT, or SVG may be an option.
The Font Squirrel Webfont Generator provides a simple tool to upload one or more fonts, tweak settings, and download a kit containing the converted fonts and CSS code.
By default the Webfont Generator provides a WOFF2 font, a WOFF fallback, and the appropriate CSS @font-face settings. For example:
FOUT and FOIT
A web font may take several seconds to download, especially on a slower device or network. The browser can choose to:
It is possible to control some aspects of the browser’s font rendering process.
Set a font flash favorite with font-display
The font-display property allows you to define which process is used in Firefox, Safari, and Chromium-based browsers. The options include:
Here’s an example:
Different fonts could use different settings. For example, body text could use swap (FOUT) so it can be read immediately while menus and heading text use block (FOIT).
Enforcing FOUT with JavaScript
The font-display property is likely to be undefined or auto when using typefaces from repositories such as Google Fonts (although changes to the API are being considered). In most browsers, text will be invisible for several seconds (FOIT).
There are several libraries available to help you implement FOUT-like loading, such as the Typekit webfontloader, which uses JavaScript to control how fonts are loaded. Most follow the same process, which can be replicated with a few lines of code.
First, a system fallback is defined as the primary font in CSS:
JavaScript is then used to fetch the web font and append a new class (such as wt-active ) to the HTML tag once it has downloaded:
A further CSS declaration then overrides the default fallback font with the web font when the wt-active class appears:
Effective FOUT reflow
A flash of unstyled text can be jarring when the fallback and web fonts are significantly different and cause a noticeable layout reflow. A tool such as Font style matcher can help minimize the effect by setting appropriate weights, line heights and spacing for the fallback and/or web font.
The resulting replacement causes fewer problems when reading body text regardless of how long it takes to load the font:
Handling font weights and styles in CSS
Each font file has its own weight (boldness), style (italic slant), stretch, and variants. The browser will attempt its own interpolations if you make adjustments to the CSS without loading an associated font. Rendering will be slower, fonts may look worse, readability could be affected, and widths could be dramatically different and break layouts. For example:
The solution is to load a separate font file for every weight and style you require then explicitly set all styles accordingly:
Variable fonts
Loading separate font files for every variation of weight and style is rapidly becoming unnecessary thanks to variable fonts.
OpenType 1.8 introduced variable fonts in 2016. Rather than creating multiple files for each variation of the same typeface, variable fonts define minimum and maximum vector limits along an axis:
Any font-weight between these two extremes can now be interpolated. Depending on the font, you may be able to adjust aspects of the typeface.
Weight
The thickness of the font can be set between 1 and 1000 using the following:
Width
The font can be stretched to produce condensed or extended variations. 100% is normally considered the default with ranges above or below that value for narrower or wider widths accordingly:
Italic
The italic axis is either on or off because standard and italic characters can be different:
Slant
The slant — or oblique — differs from italic in that the letterforms are not changed but can vary on an axis typically between 0 and 20 degrees:
Resource files can be discovered at sites including v-fonts, Axis-Praxis, and Font Playground.
Variable font files can be loaded using @font-face with a woff2-variations format and the allowable ranges. For example:
Specific styles can then be set in any selector with multiple CSS properties:
You can also use the shorthand font-variation-settings property:
Variable font support can be tested with a CSS @supports query:
This makes it possible to load standard single-style font files for older browsers and add further styles when variable fonts are supported. Unfortunately, most browsers will download all fonts, which negates any performance benefit from a single variable font file.
Conclusion
Web fonts have revolutionized site typography during the past decade. Designers have fewer constraints and can implement typefaces that work on all mainstream devices and browsers.
However, font download weight, site performance, and managing the flash of unstyled or invisible text remain issues. A standard OS font should always be your first consideration.
Variable fonts are the future. These offer multiple variations, the potential for new typeface-based effects, cut page weight, and simplify development. They are an exciting development and browser support for variable fonts has become more widespread over the years.
Is your frontend hogging your users’ CPU?
LogRocket is like a DVR for web and mobile apps, recording everything that happens in your web app or site. Instead of guessing why problems happen, you can aggregate and report on key frontend performance metrics, replay user sessions along with application state, log network requests, and automatically surface all errors.
Modernize how you debug web and mobile apps — Start monitoring for free.