https://typeheist.co/_nuxt/CfsKfGP7.js

1import{_ as s}from"./Dst0_v3m.js";import{g as r}from"./FsIr5leV.js";import{_ as u,c as h,a as e,d as o,b as n,w as i,o as p}from"./Cvj6YUp_.js";import{d}from"./pAIW8bm9.js";import{u as g,a as f}from"./DY-qDXGg.js";const m=""+new URL("glyph-hover.B35CJd0t.png",import.meta.url).href,y=""+new URL("file-menu.eakG_-Uz.png",import.meta.url).href,c=""+new URL("glyphs-panel.BHTTmfRU.png",import.meta.url).href,w=""+new URL("glyph-hover-photoshop.BFIOsOxP.png",import.meta.url).href,b=""+new URL("file-menu-photoshop.LeLFzYP0.png",import.meta.url).href,v=""+new URL("ligature-highlight.K1p7LQQr.png",import.meta.url).href,L=""+new URL("ligatures.DycE87v-.png",import.meta.url).href,T=""+new URL("ligatures-photoshop.vrlRU5LT.png",import.meta.url).href,k=""+new URL("ligatures-microsoft-word.DsgI3DXU.png",import.meta.url).href,P=""+new URL("ligatures-off.js20FVjh.png",import.meta.url).href,U=""+new URL("ligatures-on.CIMoqtFk.png",import.meta.url).href,I=""+new URL("what-are-glyphs.B-xWP8fB.png",import.meta.url).href,S=d({setup(){const a="https://typeheist.co"+r();g({title:"Using fonts, glyphs and ligatures | TYPEHEIST Font Foundry",link:[{rel:"canonical",href:a}]}),f({description:"How to install your fonts and use glyphs and ligatures on your desktop and in Illustrator, Photoshop and other common Programs.",ogUrl:a,ogType:"website",ogTitle:"Using fonts, glyphs and ligatures",ogDescription:"How to install your fonts and use glyphs and ligatures on your desktop and in Illustrator, Photoshop and other common Programs.",ogImage:"https://typeheist.co/typeheist-font-foundry.png"})},data(){return{isOpen:!1}},methods:{}},"$MznE71mBEX"),C={class:"how-to"},F={class:"info-table flex"},O={class:"more-info"},R={ref:"code"};function _(a,t,E,z,Y,x){const l=s;return p(),h("div",C,[t[15]||(t[15]=e("h1",null,"How to use your fonts",-1)),t[16]||(t[16]=e("p",null,"Below are some short guides to help get your fonts installed on your desktop and on your website, as well as instructions on using and enabling glyphs and ligatures in common programs.",-1)),t[17]||(t[17]=e("p",null,[o("If what you're looking for isn't here or you need some more info, please feel free to "),e("a",{href:"mailto:[email protected]?subject=Hello 👋🏽 from the TYPEHEIST website",title:"Contact TYPEHEIST",target:"_blank",class:"no-highlight underline"},"email me"),o(" and I'll be happy to help.")],-1)),e("div",F,[n(l,{title:"Installing Desktop Fonts (.otf)","show-more":"View"},{default:i(()=>[...t[0]||(t[0]=[e("div",{class:"more-info"},[e("h4",{class:"med"},"Mac OSX"),e("ol",null,[e("li",null,"Unzip your font package."),e("li",null,"Open 'Font Book' in Applications."),e("li",null,"Drag your .otf file(s) into the panel that contains the list of fonts (this will install it)."),e("li",null,"Check the 'User' fonts for your new font."),e("li",null,"You may need to refresh or restart your programs to see the new font.")]),e("h4",{class:"med"},"Windows"),e("ol",null,[e("li",null,"Unzip your font package."),e("li",null,"Click Start."),e("li",null,"Type Control Panel."),e("li",null,"Click Appearance and Personalization > Fonts."),e("li",null,"Drag the Fonts you want to the Desktop or main window."),e("li",null,"Once you open the Fonts that you dragged, you will see the option Install."),e("li",null,"Click Install.")])],-1)])]),_:1}),n(l,{title:"Installing Web fonts (.woff, .woff2)","show-more":"View"},{default:i(()=>[e("div",O,[e("ol",null,[t[3]||(t[3]=e("li",null,"Unzip your font package.",-1)),t[4]||(t[4]=e("li",null,[o("You'll see some "),e("strong",null,".woff"),o(" files under 'Web'. Copy / paste these files into your font assets folder (or create one if you don't have one already).")],-1)),t[5]||(t[5]=e("li",null,[o("Declare your web font in your CSS (I put this at the very top): "),e("code",null,[o(" @font-face {"),e("br"),o(" font-family: 'LORE';"),e("br"),o(" src: url('/_assets/_fonts/LORE-Regular.woff2') format('woff2'),"),e("br"),o(" url('/_assets/_fonts/LORE-Regular.woff') format('woff');"),e("br"),o(" font-weight: normal;"),e("br"),o(" font-style: normal;"),e("br"),o(" font-display: swap;"),e("br"),o(" }"),e("br")]),e("ol",null,[e("li",null,"Make sure your paths above are correct."),e("li",null,"This code is defining a font-family to use in your site (in this case it is 'LORE')."),e("li",null,"You will need to add an additional @font-face for every font weight / file you have.")])],-1)),e("li",null,[t[2]||(t[2]=o("Now reference your font in the CSS using the 'font-family' name above, e.g. if you want to use the font on a div called '.my-div', then you would use: ",-1)),e("code",R,[...t[1]||(t[1]=[o(" .my-div { ",-1),e("br",null,null,-1),o(" font-family: 'LORE', -apple-system, BlinkMacSystemFont, sans-serif; ",-1),e("br",null,null,-1),o(" }",-1),e("br",null,null,-1)])],512)]),t[6]||(t[6]=e("li",null,"Save, upload or do whatever you need to do to save and make it live.",-1)),t[7]||

1(t[7]=e("li",null,"Refresh and you should hopefully see your font!",-1))])])]),_:1}),n(l,{title:"Show glyphs in Illustrator","show-more":"View"},{default:i(()=>[...t[8]||(t[8]=[e("div",{class:"more-info"},[e("iframe",{width:"800",height:"440",src:"https://www.youtube.com/embed/6rFSq4gc33k",title:"YouTube video player",frameborder:"0",allow:"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",class:"yt-video",allowfullscreen:"",loading:"lazy"}),e("br"),e("ol",null,[e("li",null,[o("On text that has the font applied, select a character with a glyph. You can either: "),e("ol",null,[e("li",null,[o("Highlight and hover over it until the Glyph menu appears"),e("img",{src:m,alt:"glyph-hover",width:"430",height:"342",loading:"lazy"})]),e("li",null,[o("Or open the full Glyphs panel from Type > Glyphs."),e("img",{src:y,alt:"file-menu",width:"598",height:"286",loading:"lazy"})])])]),e("li",null,[o("You can see both Glyphs and Ligatures in the Glyphs panel."),e("img",{src:c,alt:"glyphs-panel",width:"962",height:"656",class:"lrg",loading:"lazy"})])])],-1)])]),_:1}),n(l,{title:"Show glyphs in Photoshop","show-more":"View"},{default:i(()=>[...t[9]||(t[9]=[e("div",{class:"more-info"},[e("iframe",{width:"800",height:"440",src:"https://www.youtube.com/embed/6rFSq4gc33k",title:"YouTube video player",frameborder:"0",allow:"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",class:"yt-video",allowfullscreen:""}),e("br"),e("ol",null,[e("li",null,[o("On text that has the font applied, select a character with a glyph. You can either: "),e("ol",null,[e("li",null,[o("Highlight and hover over it until the Glyph menu appears"),e("img",{src:w,alt:"Glyphs",width:"430",height:"342",loading:"lazy"})]),e("li",null,[o("Or open the full Glyphs panel from Type > Panels > Glyphs Panel."),e("img",{src:b,alt:"Glyphs Panel",width:"598",height:"286",class:"lrg",loading:"lazy"})])])])])],-1)])]),_:1}),n(l,{title:"Show ligatures in Adobe Illustrator","show-more":"View"},{default:i(()=>[...t[10]||(t[10]=[e("div",{class:"more-info"},[e("p",null,[o("Please note, ligatures can either be Standard or Discretionary. "),e("strong",null,"Standard Ligatures"),o(" are applied by default, "),e("strong",null,"Discretionary Ligatures"),o(" are available through the process below. You can also 'turn off' a Standard Ligature the same way.")]),e("ol",null,[e("li",null,"You can see all Glyphs and Ligatures in the Glyphs panel as per instructions in 'Show glyphs in Illustrator'."),e("li",null,"Open the OpenType panel through Window > OpenType."),e("li",null,[o("On text that has the font applied, highlight the ligature, e.g. 'th'."),e("img",{src:v,alt:"ligature-highlight",width:"458",height:"298",loading:"lazy"})]),e("li",null,[o("In the OpenType panel with your character(s) highlighted, you can switch between the Standard Ligature and Discretionary Ligatures with the 'fi' and 'st' icons (if available)"),e("img",{src:L,alt:"ligatures",width:"552",height:"290",loading:"lazy"})])])],-1)])]),_:1}),n(l,{title:"Show ligatures in Adobe Photoshop","show-more":"View"},{default:i(()=>[...t[11]||(t[11]=[e("div",{class:"more-info"},[e("ol",null,[e("li",null,"You can see all Glyphs and Ligatures in the Glyphs panel as per instructions in 'Show glyphs in Photoshop'."),e("li",null,"In the Character panel you will see some icons at the bottom of the panel."),e("li",null,[o("While your character(s) is highlighted, you can switch between the Standard Ligature and Discretionary Ligatures with the 'fi' and 'st' icons (if available)."),e("img",{src:T,alt:"Photoshop Font Ligatures",width:"552",height:"290",class:"lrg",loading:"lazy"})])])],-1)])]),_:1}),n(l,{title:"Ligatures and Advanced Typography: Microsoft Word (

1Mac)","show-more":"View"},{default:i(()=>[...t[12]||(t[12]=[e("div",{class:"more-info"},[e("ol",null,[e("li",null,"To see the Advanced Typography options in Microsoft Word, open the Font dialog (press Cmd + D and it will pop up)."),e("li",null,"Under the 'Ligatures' dropdown, you can see the options to enable, disable or use contextual alternates within the font. There are also settings for number handling and stylistic sets."),e("li",null,"Once you make your changes, you can set these to default across the whole document by pressing the 'Default...' button in the bottom left."),e("li",null,[o("If you only want to make changes to a certain area of text, before pressing Cmd + D, highlight the text you want to update and make your changes in the Font dialog. Press OK to apply. "),e("br"),e("br"),e("img",{src:k,alt:"Microsoft Word Font Ligatures",width:"552",height:"290",class:"full",loading:"lazy"})])])],-1)])]),_:1}),n(l,{title:"Glyphs vs ligatures","show-more":"View"},{default:i(()=>[...t[13]||(t[13]=[e("div",{class:"more-info"},[e("div",{class:"flex card-flex"},[e("div",{class:"card"},[e("div",{class:"images"},[e("img",{src:P,alt:"Photoshop Font Ligatures",width:"552",height:"290",class:"inline smol",loading:"lazy"}),e("img",{src:U,alt:"Photoshop Font Ligatures",width:"552",height:"290",class:"inline smol",loading:"lazy"})]),e("div",{class:"description"},[e("h6",null,"LIGATURE"),e("p",null,"Occurs where two or more letters or 'elements' are combined as a single glyph, e.g. ee or st. Ligatures allow for more varied type, particularly in scripts or handwriting (double letters or in cursive). ")])]),e("div",{class:"card"},[e("div",{class:"images"},[e("img",{src:I,alt:"Photoshop Font Ligatures",width:"552",height:"290",class:"full",loading:"lazy"})]),e("div",{class:"description"},[e("h6",null,"GLYPH"),e("p",null,"An alternate or visual variant for a character. You may select different glyphs to create distinction where the same characters might reappear.")])])])],-1)])]),_:1}),n(l,{title:"Using custom fonts in Canva","show-more":"View"},{default:i(()=>[...t[14]||(t[14]=[e("div",{class:"more-info"},[e("p",null,"If you have a Canva Pro, Canva Teams, Canva for Education or Canva for Nonprofits account you can upload your own fonts to Canva."),e("p",null,[o("Supported font files are OTF, TTF and WOFF. You can view more information and find installation instructions on Canva's website: "),e("a",{href:"https://www.canva.com/help/upload-fonts/",target:"_blank",rel:"noreferrer",class:"underline"},"Upload and use Brand Kit fonts")]),e("p",null,"Please note, Canva does not currently support kerning (the fine-tuned spacing between problematic character combinations, such as A and W), so you may see some funny spacing here and there while we wait for Canva to introduce support.")],-1)])]),_:1})]),t[18]||(t[18]=e("br",null,null,-1)),t[19]||(t[19]=e("br",null,null,-1)),t[20]||(t[20]=e("p",null,[o("A bit stuck? Feel free to "),e("a",{href:"mailto:[email protected]?subject=Hello 👋🏽 from the TYPEHEIST website",title:"Contact TYPEHEIST",target:"_blank",class:"no-highlight"},"email me"),o(" and I'll see how I can help.")],-1))])}const A=u(S,[["render",_]]);export{A as default};