Best free online resources for designers to source images and fonts

You don’t need an expensive subscription with a stock library to use images in your projects. There are plenty of resources online where you can download images for free and use them without contribution in commercial purposes. Some of them offer a very high quality content and photos ranging from nature and landscape to abstract backgrounds. You can browse some of the libraries below to find beautiful free stock photos to use in your work:

Pixabay

Unsplash

Pexels

Freepik

Similarly to image libraries, Freepik offers some of the biggest libraries for vector graphics and images online. It comes with free and paid items if you are a subscriber and includes vast library of vector icons, illustrations, infographics, backgrounds etc. Not only that, but you can also browse stock images and textures, patterns and Photoshop files, such as mockups.

Font Squirrel

My favorite place to discover and download free fonts is Font Squirrel. It offers selected fonts with new ones being added regularly. All with beautiful interface and intuitive browsing and filtering of the fonts in your search. It is one of the largest font libraries providing you with free, high quality fonts that are completely legal to use in your projects.

Google Fonts

As a web designer and / or developer, you will need to get certain information on fonts in order to use them in your web design projects. By this I primarily mean how to call out a certain font and its properties in CSS in order to define text styling. To get this information, you can use Google Fonts. Google Fonts library gives you a list of fonts that are safe to use for web design projects and provides you with this information on how to use them in CSS. You can simply copy and paste bits of code that you can find here and directly place in your CSS for each selected font of your choice.

Share this post:

Leave a Comment

Related posts:

General instructions:

  1. Open the exercise in your browser and read the task and the content on the left side of the screen. 
  2. You will be editing the content on the right side of the screen.
  3. In order to do that, right click on the exercise page that you opened and go to ‘Inspect’.
  4. Go to ‘Sources’ in the top bar and if you cannot see an empty CSS sheet where you can type the code, press Ctrl + P and start typing ‘styl’ in the search bar. Then press enter to open the CSS sheet.
  5. Follow the notes on the left and start typing your CSS code to see the changes online!
  6. Important! Do not refresh the page while you are editing the code, as these changes are in preview mode only and you can see them immediately, as soon as you write a line of functioning code.
  7. Use the custom classes in the notes on the left side of the screen, as well as ‘Elements’ on the top bar of the ‘Inspect’ to target and style the classes and elements. For example, you can enable the small icon on the top left of the ‘Inspect’ window (‘Select an element in the page to inspect it’) to find the default class name of the element you want to edit, while you are in the ‘Elements’ tab.

Tips:

  1. If the code is not showing any changes, try adding the !important tag at the end of the line before closing it (before the “;” symbol) and see if it works then.
  2. Don’t forget there are usually more ways to achieve the same result. Be creative!
  3. If you get stuck, write your email address in the form on the left side of the screen and you will get the solution (CSS code) in your email.

Sources:

  1. You can find a lot of tutorials on my youtube channel. 
  2. Watch the tutorial on how to solve these exercises here.

Please check your email and stay tuned for updates on the course.

We will notify you shortly when it’s available for presale.