Hello!
I have a design in Adobe XD that I am trying to convert it into HTML and CSS.
The thing is that there are some letters that seems to be custom made from the designer, because I cannot find a similar font.
Like this one in the picure.
I would like to hear any suggestion how someone is dealing with it.
Maybe you crop them like images? Or there is another way that you can include them like normal font-letters?
i’d probably save it as an SVG (minus the background) and use that, so that it can scale with the font and zoom. Just make sure to set an alt tag so that a search bot makes note of the &'s.
Bit of a pain though.
Hi there nikostzounakos,
as @m_hutley suggested svg is the way to go, 
So here you go…
ampersand svg
<svg version="1.0"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 195 195">
<g>
<path d="M685 1734 c-197 -44 -396 -169 -522 -329 -35 -43 -63 -83 -63 -87 0
-8 140 -82 144 -76 1 2 21 36 45 76 112 192 257 310 448 364 111 31 278 31
387 0 259 -74 463 -268 564 -535 50 -134 65 -229 59 -372 -14 -317 -181 -515
-399 -475 -71 13 -182 69 -242 123 l-50 43 31 45 c65 94 233 400 233 423 0 3
-40 6 -90 6 l-89 0 -5 -32 c-27 -175 -39 -233 -63 -293 -48 -120 -44 -118
-103 -60 -132 128 -308 412 -339 547 -23 101 -9 187 41 244 41 47 77 64 134
64 92 0 174 -76 210 -193 l17 -54 58 36 c32 20 58 43 59 51 0 8 -33 46 -73 86
-90 89 -159 119 -253 111 -112 -8 -194 -70 -252 -187 -24 -49 -27 -66 -27
-160 0 -58 4 -119 8 -135 7 -30 5 -33 -63 -79 -90 -61 -141 -120 -187 -214
-34 -68 -37 -81 -37 -161 -1 -72 3 -95 26 -141 48 -101 133 -165 253 -190 129
-27 238 10 359 121 35 33 68 59 73 59 4 0 35 -20 68 -45 81 -62 206 -121 284
-135 319 -57 552 245 509 660 -26 259 -203 569 -418 732 -78 60 -220 130 -310
153 -93 24 -333 29 -425 9z m-66 -922 c50 -100 143 -226 244 -330 l81 -82 -29
-30 c-62 -65 -237 -98 -347 -66 -70 20 -146 86 -182 158 -46 93 -34 206 32
302 29 42 129 126 149 126 7 0 30 -35 52 -78z"
fill="#000" stroke="none" transform="translate(0,195) scale(0.1,-0.1)"/>
</g>
</svg>coothead
Thank you both for your answers!!
Indeed svg has a great quality for these letters.
Good luck!
No problem, you’re very welcome.
coothead
Just a quick question, how did you removed the background and make it into svg code so accurately?
Hi there nikostzounakos,
As your image was of excellent quality, I took the simple route…
coothead
alt="&"
Thanks a lot!!
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.