Why my SVG font is not working?

Question

I have created SVG font and then converted it to ttf font. Ttf font works correctly, but svg font does not - tested in Chrome & Firefox. Here are files I have created:

myFont.svg:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
<svg xmlns="http://www.w3.org/2000/svg">
<metadata>My font</metadata>
<defs>
<font id="myFont" horiz-adv-x="1024">
<font-face units-per-em="1024" ascent="960" descent="-64" />
<missing-glyph horiz-adv-x="1024" />
<glyph unicode="&#33" d="M513-64C513-64,124,320,124,576C124,789,298,960,513,960C727,960,901,789,901,576C901,320,513-64,513-64ZM513,784C396,784,301,689,301,572C301,455,396,360,513,360C630,360,725,455,725,572C725,689,630,784,513,784Z"></glyph>
<glyph unicode="&#34;" d="M854,235C854,235,854-64,854-64C854-64,598-64,598-64C598-64,598,235,598,235C598,235,555,235,555,235C555,235,555,448,555,448C555,543,632,619,726,619C820,619,896,543,896,448C896,448,896,235,896,235C896,235,854,235,854,235ZM726,662C632,662,555,729,555,811C555,894,632,960,726,960C820,960,896,894,896,811C896,729,820,662,726,662ZM427-64C427-64,171-64,171-64C171-64,171,235,171,235C171,235,128,235,128,235C128,235,128,448,128,448C128,543,205,619,299,619C393,619,470,543,470,448C470,448,470,235,470,235C470,235,427,235,427,235C427,235,427-64,427-64ZM299,662C205,662,128,729,128,811C128,894,205,960,299,960C393,960,470,894,470,811C470,729,393,662,299,662Z"></glyph>
<glyph unicode="&#35;" d="M118,960C118,960,906,960,906,960C906,960,906-64,906-64C906-64,880-56,512,133C164-42,118-64,118-64C118-64,118,960,118,960Z"></glyph>
<glyph unicode="&#36;" d="M987,202C987,202,304,202,304,202C283,202,266,219,266,240C266,240,266,316,266,316C266,337,283,354,304,354C304,354,987,354,987,354C1008,354,1024,337,1024,316C1024,316,1024,240,1024,240C1024,219,1008,202,987,202ZM987,505C987,505,304,505,304,505C283,505,266,522,266,543C266,543,266,619,266,619C266,640,283,657,304,657C304,657,987,657,987,657C1008,657,1024,640,1024,619C1024,619,1024,543,1024,543C1024,522,1008,505,987,505ZM987,809C987,809,304,809,304,809C283,809,266,826,266,847C266,847,266,923,266,923C266,944,283,960,304,960C304,960,987,960,987,960C1008,960,1024,944,1024,923C1024,923,1024,847,1024,847C1024,826,1008,809,987,809ZM76,202C34,202,0,236,0,278C0,320,34,354,76,354C118,354,152,320,152,278C152,236,118,202,76,202ZM76,505C34,505,0,539,0,581C0,623,34,657,76,657C118,657,152,623,152,581C152,539,118,505,76,505ZM76,809C34,809,0,843,0,885C0,927,34,960,76,960C118,960,152,927,152,885C152,843,118,809,76,809Z"></glyph>
<glyph unicode="&#37;" d="M911,522C911,522,982,561,982,561C1004,573,1012,601,1000,623C1000,623,923,765,923,765C910,788,882,796,860,784C860,784,789,745,789,745C767,732,733,736,712,750C702,757,692,762,682,768C659,780,640,808,640,833C640,833,640,914,640,914C640,940,619,960,594,960C594,960,433,960,433,960C407,960,387,940,387,914C387,914,387,833,387,833C387,807,367,780,345,768C337,763,329,759,321,754C299,740,266,737,244,750C244,750,189,781,189,781C167,794,139,786,126,764C126,764,46,624,46,624C33,602,41,574,63,561C63,561,117,530,117,530C140,517,154,487,153,461C153,455,153,449,153,443C153,418,138,388,116,375C116,375,45,336,45,336C22,324,14,296,26,274C26,274,104,132,104,132C116,109,144,101,166,113C166,113,238,152,238,152C260,165,294,161,315,147C324,140,334,135,345,129C367,117,387,90,387,64C387,64,387-17,387-17C387-43,407-64,433-64C433-64,594-64,594-64C619-64,640-43,640-17C640-17,640,64,640,64C640,90,659,118,682,129C690,134,698,138,706,143C727,157,761,160,783,147C783,147,837,116,837,116C859,103,888,111,900,133C900,133,981,273,981,273C993,295,986,323,963,336C963,336,909,367,909,367C887,380,873,410,874,436C874,442,874,448,874,454C873,479,888,510,911,522ZM513,287C424,287,352,359,352,448C352,538,424,610,513,610C602,610,674,538,674,448C674,359,602,287,513,287Z"></glyph>
<glyph unicode="&#38;" d="M699,123C699,123,699,332,699,332C699,319,709,309,722,309C735,309,745,319,745,332C745,345,735,355,722,355C709,355,699,345,699,332C699,332,699,841,699,841C699,841,1024,960,1024,960C1024,960,1024,242,1024,242C1024,242,699,123,699,123ZM908,286C921,286,931,296,931,309C931,322,921,332,908,332C895,332,885,322,885,309C885,296,895,286,908,286ZM908,472C921,472,931,482,931,495C931,508,921,518,908,518C895,518,885,508,885,495C885,482,895,472,908,472ZM815,262C828,262,838,273,838,286C838,298,828,309,815,309C802,309,792,298,792,286C792,273,802,262,815,262ZM895,722C895,722,875,734,875,734C875,734,844,661,844,661C844,661,774,691,774,691C774,691,763,671,763,671C763,671,835,640,835,640C835,640,805,571,805,571C805,571,825,559,825,559C825,559,856,631,856,631C856,631,926,601,926,601C926,601,937,622,937,622C937,622,865,652,865,652C865,652,895,722,895,722ZM955,425C942,425,931,415,931,402C931,389,942,379,955,379C968,379,978,389,978,402C978,415,968,425,955,425ZM373,355C386,355,396,366,396,379C396,392,386,402,373,402C373,402,373,960,373,960C373,960,652,841,652,841C652,841,652,425,652,425C639,425,629,415,629,402C629,389,639,379,652,379C652,379,652,123,652,123C652,123,373,242,373,242C373,242,373,355,373,355ZM559,425C572,425,582,436,582,448C582,461,572,472,559,472C546,472,536,461,536,448C536,436,546,425,559,425ZM466,402C479,402,489,412,489,425C489,438,479,448,466,448C453,448,443,438,443,425C443,412,453,402,466,402ZM0,841C0,841,326,960,326,960C326,960,326,242,326,242C326,242,0,123,0,123C0,123,0,841,0,841ZM163,495C163,482,174,472,187,472C200,472,210,482,210,495C210,508,200,518,187,518C174,518,163,508,163,495ZM280,309C293,309,303,319,303,332C303,345,293,355,280,355C267,355,256,345,256,332C256,319,267,309,280,309ZM233,588C233,601,223,611,210,611C197,611,187,601,187,588C187,575,197,565,210,565C223,565,233,575,233,588ZM187,286C200,286,210,296,210,309C210,322,200,332,187,332C174,332,163,322,163,309C163,296,174,286,187,286ZM140,379C153,379,163,389,163,402C163,415,153,425,140,425C127,425,117,415,117,402C117,389,127,379,140,379ZM117,611C130,611,140,622,140,635C140,648,130,658,117,658C104,658,94,648,94,635C94,622,104,611,117,611ZM47,565C60,565,70,575,70,588C70,601,60,611,47,611C34,611,24,601,24,588C24,575,34,565,47,565Z"></glyph>
<glyph unicode="&#39;" d="M699,123C699,123,699,332,699,332C699,319,709,309,722,309C735,309,745,319,745,332C745,345,735,355,722,355C709,355,699,345,699,332C699,332,699,841,699,841C699,841,1024,960,1024,960C1024,960,1024,242,1024,242C1024,242,699,123,699,123ZM908,286C921,286,931,296,931,309C931,322,921,332,908,332C895,332,885,322,885,309C885,296,895,286,908,286ZM908,472C921,472,931,482,931,495C931,508,921,518,908,518C895,518,885,508,885,495C885,482,895,472,908,472ZM815,262C828,262,838,273,838,286C838,298,828,309,815,309C802,309,792,298,792,286C792,273,802,262,815,262ZM895,722C895,722,875,734,875,734C875,734,844,661,844,661C844,661,774,691,774,691C774,691,763,671,763,671C763,671,835,640,835,640C835,640,805,571,805,571C805,571,825,559,825,559C825,559,856,631,856,631C856,631,926,601,926,601C926,601,937,622,937,622C937,622,865,652,865,652C865,652,895,722,895,722ZM955,425C942,425,931,415,931,402C931,389,942,379,955,379C968,379,978,389,978,402C978,415,968,425,955,425ZM373,355C386,355,396,366,396,379C396,392,386,402,373,402C373,402,373,960,373,960C373,960,652,841,652,841C652,841,652,425,652,425C639,425,629,415,629,402C629,389,639,379,652,379C652,379,652,123,652,123C652,123,373,242,373,242C373,242,373,355,373,355ZM559,425C572,425,582,436,582,448C582,461,572,472,559,472C546,472,536,461,536,448C536,436,546,425,559,425ZM466,402C479,402,489,412,489,425C489,438,479,448,466,448C453,448,443,438,443,425C443,412,453,402,466,402ZM0,841C0,841,326,960,326,960C326,960,326,242,326,242C326,242,0,123,0,123C0,123,0,841,0,841ZM163,495C163,482,174,472,187,472C200,472,210,482,210,495C210,508,200,518,187,518C174,518,163,508,163,495ZM280,309C293,309,303,319,303,332C303,345,293,355,280,355C267,355,256,345,256,332C256,319,267,309,280,309ZM233,588C233,601,223,611,210,611C197,611,187,601,187,588C187,575,197,565,210,565C223,565,233,575,233,588ZM187,286C200,286,210,296,210,309C210,322,200,332,187,332C174,332,163,322,163,309C163,296,174,286,187,286ZM140,379C153,379,163,389,163,402C163,415,153,425,140,425C127,425,117,415,117,402C117,389,127,379,140,379ZM117,611C130,611,140,622,140,635C140,648,130,658,117,658C104,658,94,648,94,635C94,622,104,611,117,611ZM47,565C60,565,70,575,70,588C70,601,60,611,47,611C34,611,24,601,24,588C24,575,34,565,47,565Z"></glyph>
<glyph unicode="&#40;" d="M922,372C922,372,103,372,103,372C46,372,0,418,0,474C0,531,46,576,103,576C103,576,922,576,922,576C979,576,1024,531,1024,474C1024,418,979,372,922,372ZM922,756C922,756,103,756,103,756C46,756,0,802,0,858C0,915,46,960,103,960C103,960,922,960,922,960C979,960,1024,915,1024,858C1024,802,979,756,922,756ZM103,192C103,192,922,192,922,192C979,192,1024,147,1024,90C1024,34,979-12,922-12C922-12,103-12,103-12C46-12,0,34,0,90C0,147,46,192,103,192Z"></glyph>
<glyph unicode="&#41;" d="M1013-64C964-112,885-112,836-64C836-64,578,194,578,194C528,171,472,158,414,158C192,158,12,338,12,559C12,781,192,960,414,960C635,960,815,781,815,559C815,488,796,422,763,364C763,364,1013,114,1013,114C1062,65,1062-15,1013-64ZM414,760C303,760,213,670,213,559C213,449,303,359,414,359C524,359,614,449,614,559C614,670,524,760,414,760Z"></glyph>
<glyph unicode="&#42;" d="M938,164C938,164,999-31,999-31C999-31,786,16,786,16C707-34,613-64,512-64C230-64,0,166,0,448C0,731,230,960,512,960C795,960,1024,731,1024,448C1024,343,993,246,938,164Z"></glyph>
<glyph unicode="&#43;" d="M794,958C778,960,762,960,748,960C632,960,576,915,512,845C449,915,393,960,277,960C263,960,247,960,231,958C130,949,15,865,0,703C0,703,0,650,0,650C14,495,141,304,512,65C884,304,1011,495,1024,650C1024,650,1024,703,1024,703C1010,865,894,949,794,958Z"></glyph>
<glyph unicode="&#44;" d="M512,960C795,960,1024,731,1024,448C1024,166,795-64,512-64C230-64,0,166,0,448C0,731,230,960,512,960Z"></glyph>
<glyph unicode="&#45;" d="M1024,346C1024,327,1009,312,990,312C990,312,990,124,990,124C990,124,990,107,990,107C990,88,975,73,956,73C956,73,837,73,837,73C818,73,803,88,803,107C803,107,803,124,803,124C803,124,803,312,803,312C784,312,769,327,769,346C769,346,768,346,768,346C768,346,768,346,768,346C768,346,768,363,768,363C768,363,768,508,768,508C768,566,826,585,896,585C967,585,1024,566,1024,508C1024,508,1024,363,1024,363C1024,363,1024,346,1024,346C1024,346,1024,346,1024,346C1024,346,1024,346,1024,346ZM896,619C835,619,786,669,786,730C786,791,835,841,896,841C958,841,1007,791,1007,730C1007,669,958,619,896,619ZM700,244C700,225,685,210,666,210C666,210,649,210,649,210C649,210,649,37,649,37C649,37,649,0,649,0C649,0,649-12,649-12C649-31,634-46,615-46C615-46,410-46,410-46C391-46,376-31,376-12C376-12,376,0,376,0C376,0,376,37,376,37C376,37,376,210,376,210C376,210,359,210,359,210C340,210,325,225,325,244C325,244,325,261,325,261C325,261,325,295,325,295C325,295,325,548,325,548C325,628,409,653,512,653C616,653,700,628,700,548C700,548,700,261,700,261C700,261,700,261,700,261C700,261,700,244,700,244ZM512,687C437,687,376,749,376,824C376,899,437,960,512,960C588,960,649,899,649,824C649,749,588,687,512,687ZM222,312C222,312,222,124,222,124C222,124,222,107,222,107C222,88,207,73,188,73C188,73,69,73,69,73C50,73,35,88,35,107C35,107,35,124,35,124C35,124,35,312,35,312C16,312,1,327,1,346C1,346,0,346,0,346C0,346,0,346,0,346C0,346,0,363,0,363C0,363,0,508,0,508C0,566,58,585,128,585C199,585,256,566,256,508C256,508,256,363,256,363C256,363,256,346,256,346C256,346,256,346,256,346C256,346,256,346,256,346C256,327,241,312,222,312ZM128,619C67,619,18,669,18,730C18,791,67,841,128,841C190,841,239,791,239,730C239,669,190,619,128,619Z"></glyph>
<glyph unicode="&#46;" d="M1024,760C1024,724,996,696,960,696C954,696,948,696,942,698C942,698,886,541,886,541C886,541,139,541,139,541C139,541,83,698,83,698C77,696,71,696,64,696C29,696,0,724,0,760C0,796,29,824,64,824C100,824,128,796,128,760C128,749,126,738,120,729C120,729,216,658,302,685C395,714,479,841,479,841C461,853,448,873,448,896C448,932,477,960,512,960C548,960,576,932,576,896C576,873,564,853,546,841C546,841,611,712,696,685C790,655,905,729,905,729C899,738,896,749,896,760C896,796,925,824,960,824C996,824,1024,796,1024,760ZM158,488C158,488,250,252,250,252C255,234,272,212,289,212C289,212,736,212,736,212C753,212,770,234,775,252C775,252,867,488,867,488C867,488,158,488,158,488Z"></glyph>
<glyph unicode="&#47;" d="M956,251C956,251,69,251,69,251C31,251,0,281,0,319C0,319,0,892,0,892C0,930,31,960,69,960C69,960,956,960,956,960C994,960,1024,930,1024,892C1024,892,1024,319,1024,319C1024,281,994,251,956,251ZM315,865C315,865,110,865,110,865C110,865,110,756,110,756C110,756,315,756,315,756C315,756,315,865,315,865ZM683,879C555,879,451,775,451,646C451,518,555,414,683,414C811,414,915,518,915,646C915,775,811,879,683,879ZM683,496C600,496,533,564,533,646C533,729,600,797,683,797C766,797,833,729,833,646C833,564,766,496,683,496Z"></glyph>
<glyph unicode="&#48;" d="M547,267C547,267,546,269,546,269C546,269,546,267,546,267C546,267,397,267,397,267C397,267,397,396,397,396C397,396,397,396,397,396C397,396,397,397,397,397C397,397,397,399,397,399C397,399,399,399,399,399C399,399,874,960,874,960C874,960,1024,831,1024,831C1024,831,547,267,547,267ZM149,746C149,746,149,118,149,118C149,118,760,118,760,118C760,118,760,414,760,414C760,414,909,591,909,591C909,591,909,85,909,85C909,22,857-30,793-30C793-30,116-30,116-30C52-30,0,22,0,85C0,85,0,779,0,779C0,843,52,895,116,895C116,895,730,895,730,895C730,895,604,746,604,746C604,746,149,746,149,746Z"></glyph>
<glyph unicode="&#49;" d="M512-64C230-64,0,166,0,448C0,731,230,960,512,960C795,960,1024,731,1024,448C1024,166,795-64,512-64ZM512,946C238,946,15,723,15,448C15,174,238-49,512-49C787-49,1010,174,1010,448C1010,723,787,946,512,946Z"></glyph>
<glyph unicode="&#50;" d="M512-64C230-64,0,166,0,448C0,731,230,960,512,960C795,960,1024,731,1024,448C1024,166,795-64,512-64ZM512,926C249,926,35,712,35,448C35,185,249-29,512-29C776-29,990,185,990,448C990,712,776,926,512,926ZM547,364C547,364,547,363,547,363C547,363,478,363,478,363C478,363,478,431,478,431C478,431,485,431,485,431C485,431,699,688,699,688C699,688,769,627,769,627C769,627,548,363,548,363C548,363,547,364,547,364ZM376,585C376,585,376,295,376,295C376,295,649,295,649,295C649,295,649,430,649,430C649,430,717,512,717,512C717,512,717,295,717,295C717,257,687,227,649,227C649,227,376,227,376,227C338,227,308,257,308,295C308,295,308,585,308,585C308,623,338,653,376,653C376,653,624,653,624,653C624,653,566,585,566,585C566,585,376,585,376,585Z"></glyph>
<glyph unicode="&#51;" d="M512-64C230-64,0,166,0,448C0,731,230,960,512,960C795,960,1024,731,1024,448C1024,166,795-64,512-64ZM768,704C768,713,761,720,752,720C752,720,240,720,240,720C232,720,224,713,224,704C224,704,224,368,224,368C224,360,232,352,240,352C240,352,752,352,752,352C761,352,768,360,768,368C768,368,768,704,768,704ZM832,320C832,329,825,336,816,336C816,336,176,336,176,336C168,336,160,329,160,320C160,320,160,256,160,256C160,248,168,240,176,240C176,240,816,240,816,240C825,240,832,248,832,256C832,256,832,320,832,320ZM784,256C784,256,720,256,720,256C712,256,704,264,704,272C704,272,704,304,704,304C704,313,712,320,720,320C720,320,784,320,784,320C793,320,800,313,800,304C800,304,800,272,800,272C800,264,793,256,784,256ZM680,256C676,256,672,260,672,264C672,264,672,312,672,312C672,317,676,320,680,320C685,320,688,317,688,312C688,312,688,264,688,264C688,260,685,256,680,256ZM600,256C600,256,520,256,520,256C516,256,512,260,512,264C512,264,512,312,512,312C512,317,516,320,520,320C520,320,600,320,600,320C605,320,608,317,608,312C608,312,608,264,608,264C608,260,605,256,600,256ZM720,384C720,384,272,384,272,384C264,384,256,392,256,400C256,400,256,672,256,672C256,681,264,688,272,688C272,688,720,688,720,688C729,688,736,681,736,672C736,672,736,400,736,400C736,392,729,384,720,384Z"></glyph>
</font>
</defs>
</svg>

myFont.css:

@font-face {
    font-family: "myFont";
    src: url("myFont.svg#myfont") format("svg");
    font-weight: normal;
    font-style: normal;
}

[class*="icon-"]{
    font-family: "myFont";
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


.icon-pin:before{
    content: '\0021';
}

.icon-two-users:before{
    content: '\0022';
}

.icon-ribbon:before{
    content: '\0023';
}

.icon-list:before{
    content: '\0024';
}

.icon-cog:before{
    content: '\0025';
}

.icon-map-blue:before{
    content: '\0026';
}

.icon-map-green:before{
    content: '\0027';
}

.icon-hamburger-menu:before{
    content: '\0028';
}

.icon-search:before{
    content: '\0029';
}

.icon-notifications:before{
    content: '\002a';
}

.icon-like-small:before{
    content: '\002b';
}

.icon-cup:before{
    content: '\002c';
}

.icon-three-users:before{
    content: '\002d';
}

.icon-crown:before{
    content: '\002e';
}

.icon-camera:before{
    content: '\002f';
}

.icon-leave-tip:before{
    content: '\0030';
}

.icon-border:before{
    content: '\0031';
}

.icon-leave-tip-big:before{
    content: '\0032';
}

.icon-tech-startup:before{
    content: '\0033';
}

myFont.html:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>r</title>
      <link rel='stylesheet' href='myFont.css'>
  </head>
  <body>
    <i class="icon-pin"></i>
    <i class="icon-two-users"></i>
  </body>
</html>

---

I see ! and " characters instead of icons. When I change url("myFont.svg#myfont") format("svg"); to url("myFont.ttf") format("truetype"); it works as expected (myFont.ttf is myFont.svg converted to ttf using node.js module https://www.npmjs.org/package/svg2ttf. So it is strange that ttf generated from svg works and svg itself does not...

Answer 1

Firefox and IE have never supported SVG fonts and Chrome dropped the feature in recent versions.

SVG fonts are not powerful enough to support the complex scripts of some common languages. e.g. Hindi

Answer 2

Check your browser dev tools. Are you getting any errors loading the SVG file? Is it appearing as a loaded file in the Net tab?

Are you testing on localhost, or off a remote web server? If the latter, check the Net tab of your dev tools and make sure the SVG file is being served with the correct MIME type ("image/svg+xml").

Answer 3

To get your font shown on most browser/device combinations you need a more complex @font-face declaration, like it is shown here Wikipedia: Web Typography - Alternatives, because the browser support of the different font formats is a bit complex, see SVG, WOFF, TTF, WOFF2 and EOT

But to make things more simple, you can use a service like IcoMoon which is more powerful but also complex or Fontello which should be the first one you try, to upload your svg font and create the different font files for you. If the options are overwhelming take a look at the IcoMoon docs or Fontello docs.

Two other options are to generate the font from single svg files via grunt, see Building icon fonts with Grunt. Or to use another approach with PNG fallback, called GruntIcon.