Creating Icons for Your Website

Tutorial

Webfonts Css Html

by Rainer Erich Scheichelbauer

30 April 2020

Create one or more PUA glyphs

PUA stands fro Private Use Area.

Glyph names corresponding to a PUA codepoint have one of the following structures:

uniXXXX for the 4-digit hexadecimal Unicode values U+E000 through U+F8FF in the Basic Multilingual Plane (Plane 0 or BMP)
uYYYYY for the 5-digit hexadecimal Unicode values U+F0000 through U+FFFFF of the Supplementary Private Use Area A plane (Plane 15 or SPUA-A)
uZZZZZZ for the 6-digit hexadecimal Unicode values U+100000 through U+10FFFF of the Supplementary Private Use Area B plane (Planes 16 or SPUA-B)

Create an empty .notdef glyph

not waste any file size

Usually, not having a clearly visible .notdef glyph in a font is a bad thing. Because a user of the font is supposed to be able to see when a character is being passed to the font that the font does not have. But in our controlled use case, we are the user, and we know exactly what is in our font. So it is OK to ignore the .notdef in an icon webfont.

Settings to consider

Remember to keep the file size low. That will be your highest priority. Your second highest priority is to be as true to the shape as possible. That might seem strange, because, after all, why should

Disable Hinting
Remove Overlaps (unless you export a variable font)
Experiment with the Disable Subroutines parameter

Export the Font

Export as webfonts

Build the HTML and CSS

@font-face {
  font: "MyFont";
  src: url("MyFont.woff2");
}

In a more elaborate form, you can specify the format, and multiple format versions of the same font. Typically, you will have one for WOFF and one for WOFF2:

@font-face {
  font: "MyFont";
  src: url("MyFont.woff2") format("woff2"), url("MyFont.woff") format("woff");
}

EOT and TTF or OTF as fallbacks? Ignore it, please. EOT is for very old versions of Internet Explorer.

Insert URI-encoded font

In your @font-face declaration, you do not necessarily need to link to a different

@font-face {
  font-family: myFont;
  src: url(data:font/woff2;base64,d09GMk9UVE8AAAKYAAoAAAAABIwAAAJQAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAADYE8HAoGYAA8ATYCJAMMBAYFg2wHIBvZA8gucJwnWtEuWCaUmrF892N5GmsjDsmqMd37DxArVCwMFkGjrquRPL5CxdVFdyo0kEO4Dx+OrcM80zxumFg1s9JpkAnxa3ge8m/vbn3LunlbYGHcCgIPMJJQQ8iSHOOElptwX3AfQG8Hjz1iPs/l9A6P4DOdyBijMZcGnCcQ4IVrgC2CXs8zt+YcKD2CLShfI0KH3EN8pENEE0CyhRm4ppXhqIIcZqdI2aFEKipUQBMBuiji/mXtzf7tPOG4gBQEOj816TY83ni81Osvho1afSzoNEajRrcGIgQu4NBurReSqN4b9Up3vjvxD7jWL/b07/LWr34Z2nnou5lSK5d+qBH73+mP3va3T/bf37L9vDPfR1vstDpmG1+9GYgclvmMA40hn7kOMMU/QSdl5AGAFj24cuSiYCf4xqTEWO9PPuICgN5Nv+iABAAgABLgQarEe5ClAXQ0KLDdDAdQsuMHh8MEJp5gY3ntlec/SPwigMv2idxEUO4rHy3R4cp3mCyIp7I8qSBtCQDx1QDmXzmbtitP9FP4EEZIkDzo0DCKQKtAelzHaA0JdQwgDvkAwWYXUtoWGi5vaG35QccVEThwA/eciGFekKJDgeWimX7BNm2gvDxq9qk2el1Bw3i9Ny71ulPzP6yQG0ydQqvSG1cr84pAiTVYq9EYtFv8jICuqYqhkQqHpIqaibaCIQVMrt8yyQjJiTL5VyIAVZDNrNnc0NMlOCfresZKn/Y078cU5AxMOgpaKo5OVcUcpyqJ1KS0NLqegXaEigOJ0I3PzAAAAA==);
}
body {
  font: 100pt myFont;
}

But how to get your WOFF2 as

on run {input, parameters}
    set pathToFont to POSIX path of input
    set mimeType to "text/plain"
    if pathToFont ends with "woff" then
        set mimeType to "font/woff"
    else if pathToFont ends with "woff2" then
        set mimeType to "font/woff2"
    else if pathToFont ends with "ttf" then
        set mimeType to "font/ttf"
    else if pathToFont ends with "otf" then
        set mimeType to "font/otf"
    end if
    set shellScript to "cat \"" & pathToFont & "\" | openssl enc -nopad -a -A -v | awk '{printf \"src: url(data:" & mimeType & ";base64,%s);\",$1}' | pbcopy"
    do shell script shellScript
end run

And paste it into