by Wayne Smith
Custom fonts within the browser are easy at this point. They typically are around the same size as an image, and they are downloaded and made available for the page by a simple declaration in the CSS. Truetype or TTF is supported by all current browsers; However, OTF (OpenType font) is generally preferred as TTF is licensed; Although; all systems and browsers have the required licenses. WOFF provides better file size than OTF or TTF, but network data is sent in packets, and the largest usage of time is in the establishing a connection for a single packet ... but if we are talking about a device with embedded hosting where each byte counts space makes a difference, then a smaller file should be used.
@font-face {
font-family: "Logo";
src: url("/fonts/logo.ttf"); /* or url("/fonts/logo.otf") */
}
.logo {
font-family: Logo;
font-size: 80px;
font-weight: normal;
}
Performance
HTTP 1.1 Most older or shared host providers are still using HTTP 1.1. With HTTP 1.1 performance can be increased by using a new connection to a domain with a different domain, IE https://images.example.com/font/..., or using a CDN, (content delivery network), or Google to deliver the font. With the hope that the font is available in Cache; Although this hope is rarely fulfilled. The problem is that establishing the HTTPS connection requires several requests back and forth, which costs time.
HTTP/2 is the most commonly used protocol and effectively uses the HTTPS connection to its full performance; Allowing requests to be made while the browser is still receiving its last request. But HTTP/2 speed can suffer from the head of the line delay, IE if the font is called from an external CSS file the downloading of the font is blocked while the existing requests are being satisfied. The solution is to put the request for the font in the HTML page itself; not an external reference.
HTTP/3 has the promise to be the fastest protocol, although parts are still under development. HTTP/3 does not require round trips, all data can be sent at once and the HOL, (head of the line), issue should not exist, as the browser can reprioritize the request ... IE I need the font now.
Logo protection and font
For copyright purposes one can copyright a font. If somebody wants to mention your company name and you use a font, which they can also use, their presentation of your name looks like your logo. Hense if you use a font that you own the copyright to, their usage will not look like your logo.
The best practice for a logo is to use a font that is in the public domain and modify it.
Derivative works from a non-public domain font may need the permission of the copyright holder of the font. Although it should be noted that the owner of the font does not have rights to the derivative work ... either party would need permission from the other party to use the derivative work.
Fonts with multible colors
Fonts themselves are monochrome, to add colors one must layer elements of color onto the font. This can be done by making the font transparent or turning it into a clip-path