One particular challenge I’ve encountered several times is redesigning a website while working with the existing assets. This involves keeping the same color palette, logos, pictures, and fonts. As part of the process, I often need to create new assets based on these design guidelines.
However, one common issue I face is when the client doesn’t have access to the font files used in their current design. This makes it difficult to create graphics that match their existing fonts, especially when:
- The client doesn’t have the font file.
- The client doesn’t even know the name of the font they are using.
- But the font is being used on their website.
For instance, I recently had a project with Wolfies Whisky, where I was asked to migrate their e-commerce website from WooCommerce to Shopify. This involved recreating the entire store from scratch on the Shopify platform while ensuring that the design was faithfully transferred as well.
Here are some of the steps to facilitate that migration.
Download font from website view Developer tools
First, right-click on the website you wish to download the font from, and click Inspect (you might need to enable Developer mode in your Preferences, depending on your browser – Google it).
To obtain .woff fonts, follow these steps:
- Open the Chrome Developer Tools panel by pressing Ctrl+Shift+i.
- Go to the “Network” tab and reload the page you want to analyze.
- The panel will display all the elements the page downloads. Look for the .woff file you need.
- Right-click on the .woff file and choose “Copy response.”
- The copied response will be a URL. Paste this URL into the navigation bar.
- Press Enter, and a file will be downloaded.
- Simply add the .woff extension to the downloaded file, and you’re done!
Convert the font to a system friendly one
Visit this website and simply upload the .woff font you downloaded earlier. Convert it, download it, double-click it, and boom: it’s installed.
You can now use it in Photoshop, or wherever you want, to create your assets.