Creating Icons for Your Website
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 valuesU+E000
throughU+F8FF
in the Basic Multilingual Plane (Plane 0 or BMP)uYYYYY
for the 5-digit hexadecimal Unicode valuesU+F0000
throughU+FFFFF
of the Supplementary Private Use Area A plane (Plane 15 or SPUA-A)uZZZZZZ
for the 6-digit hexadecimal Unicode valuesU+100000
throughU+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