ska man hålla sig borta från @fontface?

Ena laddar från servern och andra från en extern källa. Font-face möjliggör att du kan använda en font som det vanligtvis inte finns support för. Vanligtvis när du sätter en font-family på ett element har du fonts att falla tillbaka på om din font inte laddar eller visas korrekt. Detta gäller även när du använder en font från t.ex. googlefonts.

p {
    font-family: DinFont, Georgia, Serif;
}

Det är en petitess som inte spelar någon i min mening. Gör det du känner dig bekvämast med, att ladda från en extern källa är smidigare och bloatar inte din css-fil.

Som @Zajin säger. Det du tjänar på (egentligen) genom att använda externa fonter är browser kompatibilitet. Dvs, din css blir inte bloatad. @font-face kräver flera deklarationer för kompatibilitet till alla browsers.

I vissa fall om man pratar om responstider och så vidare, kan det vara värt att köra med fonts från din egen server. För hobbyprojekt spelar det ingen större roll.

Skulle nog varken säga bu eller bä. Det som är mest viktigt är att användaren inte upplever att sidan blir långsam och ger en tråkig upplevelse. Om man tittar på Google så är de ju kära i CDN och liknande tjänster så om man går på den tråden så är ju det givet. Men tycker inte att det är värt att ha en extern hosting endast för en sådan sak om du använder en custom font.
Det handlar om upplevelse och att inte låta användaren vänta. Dvs. så länge användaren inte kan använda sidan kommer de att misstycka. Kolla denna klipp från NordicJS2015 https://www.youtube.com/watch?v=EVEiIlJSx_Y
Han snackar mycket kring det.

Titta mer på vad som händer om inte klienten laddar ner font-filerna (se Ad-blocker m.m) dvs inte laddar ner resurser som inte "behövs". Ex. Font-awesome (ikonpaket) kan skapa visuella problem på en site om klienten inte laddar ner dem och kanske gå mot en SVG/BASE64 riktning. Dvs. ser över fallback m.m
Sen är taggarna "async" och "defer" väldigt bra i många avseenden (http://www.w3schools.com/tags/att_script_defer.asp, http://www.w3schools.com/tags/att_script_async.asp) som fungerar bra för CSS och JS. Det ger ett asynkront beteende och laddas sist i processen. Dvs. när ex. fonten laddas ner så hoppar sidan om från din "fallback" font till din custom.

Vet inte om detta gav dig svar eller skapade fler frågor.

Lycka till.

/ L