How to make browser download How to add Fonts to a React Project. Traditionally, adding a to a website meant downloading the necessary font files into your project and creating the necessary @font-face code to adapt to different web browsers requirements. Table of Contents. Using @font-face Using Hosted Fonts Using Web Font Loader. The above approach works just fine and is probably one of the best solutions if your app or website will need to run within an intranet with no Internet access. But what if its an online website being accessed by thousands or millions of visitors everyday. You would probably look for a solution that can provide better performance and less load to your servers. Using Hosted Fonts. The recommended solution is to load your font from a Hosted Fonts Provider like Google Fonts. The logic behind this recommendation is that browsers usually download web resources in a sequential order before it can fully construct a page for rendering. However, if some of the page resources are on a different server, it can download them in parallel, hence a page can be loaded much faster. Let's quickly get started with a basic react project which we shall add a font from Google Fonts. We are going to use the create-react-app tool to quickly kick-off the project. You can easily install it by executing: After you have installed the tool, we can now go ahead and create our project: When you the run the project, you will be greeted with a page like this: Let's add some content in the src/App.js file within the existing "App" div. The web page should now look like this with the default fonts. Let's now pick some fonts from Google Fonts. Select any font that hasn't been installed in your machine, in my case I chose Titillium Web. I also added 2 more font weights that I like. To quickly add the fonts to our react project, simple open public/index.html and paste the embed code provided within the tags. Save the file and edit the src/index.css and add this: After saving the above file, the web page should now look like this: Using Web Font Loader. The above approach is the simplest method of adding fonts to your web app. However, if you were to run your site on Google Page Speed to check for performance issues, that line we added in public/index.html will get flagged for the following reason: Render Blocking CSS. The best solution I found to fix this was to use Web Font Loader, a product that is co-developed by Google and Typekit. You can use this tool to load self-hosted fonts or fonts provided through APIs. To use it, simply install it as an npm package in your project: Go to your public/index.html and comment the link we added. Open src/index.js and add the following code: Save the file and restart the react app. The site should appear exactly the same. However, I must warn you that when users first launch the web app, they will experience a few seconds of FOUT(Flash of Unstyled Text). Luckily, most modern browsers have caching mechanisms and this phenomenon won't occur again on subsequent reloads unless the user clears or disables the browser's cache. If you would like to access the code used in this tutorial you can access it here. CSS Web Fonts. Web fonts allow Web designers to use fonts that are not installed on the user's computer. When you have found/bought the font you wish to use, just include the font file on your web server, and it will be automatically downloaded to the user when needed. Your "own" fonts are defined within the CSS @font-face rule. Different Font Formats. TrueType Fonts (TTF) TrueType is a font standard developed in the late 1980s, by Apple and Microsoft. TrueType is the most common font format for both the Mac OS and Microsoft Windows operating systems. OpenType Fonts (OTF) OpenType is a format for scalable computer fonts. It was built on TrueType, and is a registered trademark of Microsoft. OpenType fonts are used commonly today on the major computer platforms. The Web Open Font Format (WOFF) WOFF is a font format for use in web pages. It was developed in 2009, and is now a W3C Recommendation. WOFF is essentially OpenType or TrueType with compression and additional metadata. The goal is to support font distribution from a server to a client over a network with bandwidth constraints. The Web Open Font Format (WOFF 2.0) TrueType/OpenType font that provides better compression than WOFF 1.0. SVG Fonts/Shapes. SVG fonts allow SVG to be used as when displaying text. The SVG 1.1 specification define a font module that allows the creation of fonts within an SVG document. You can also apply CSS to SVG documents, and the @font-face rule can be applied to text in SVG documents. Embedded OpenType Fonts (EOT) EOT fonts are a compact form of OpenType fonts designed by Microsoft for use as embedded fonts on web pages. Browser Support for Font Formats. The numbers in the table specifies the first browser version that fully supports the font format. Font format TTF/OTF 9.0* 4.0 3.5 3.1 10.0 WOFF 9.0 5.0 3.6 5.1 11.1 WOFF2 14.0 36.0 39.0 10.0 26.0 SVG Not supported Not supported Not supported 3.2 Not supported EOT 6.0 Not supported Not supported Not supported Not supported. *IE: The font format only works when set to be "installable". Using The Font You Want. In the @font-face rule; first define a name for the font (e.g. myFirstFont) and then to the font file. Tip: Always use lowercase letters for the font URL. Uppercase letters can give unexpected results in IE. To use the font for an HTML element, refer to the name of the font (myFirstFont) through the font-family property: Example. @font-face font-family: myFirstFont; src: url(sansation_light.woff); > div font-family: myFirstFont; > Using Bold Text. You must add another @font-face rule containing descriptors for bold text: Example. The file "sansation_bold.woff" is another font file, that contains the bold characters for the Sansation font. Browsers will use this whenever a piece of text with the font-family "myFirstFont" should render as bold. This way you can have many @font-face rules for the same font. Test Yourself with Exercises! CSS Font Descriptors. The following table lists all the font descriptors that can be defined inside the @font-face rule: How to Install and Use Web Fonts. Jo here with little bonus for you this week! You’ve already had a couple of tutorials for some inspiration on how to use the resources in the current 30 Best Selling Creative Fonts (With Web Fonts and Extended Licensing) deal, which we hope you’re enjoying. One of the great features of this bundle is the inclusion of desktop fonts and webfonts allowing you to utilise them not just to make your print/graphic designs stand out, but your web designs too. After several community members asked about exactly how to use the web fonts available in this bundle, we decided to put together a helpful guide, for all you guys who are new to working with web fonts. There’s no need to be intimidated or put off from using web fonts, and as this guide will show you, they’re quite easy to use once you understand the basics. Ok, lets get started! There is a full text version of this tutorial below, but I’ve also put together a short video walking you through each step of the process. You’ll be using your new web fonts in no time :). Step 1: Select your webfonts. Here we have our basic webpage: As you can see, it could do with a little webfont love to liven it up. The first step is to decide which fonts you want to use (there’s a list of resources on how to match fonts in ‘Step 9’ in my previous tutorial). In this example we’re going to use ‘Atlas Slab’ and ‘Polly’ as our fonts: Once you’ve decided on the font, navigate to the webfonts folder within it, and you should see something like this: You’ll notice there are a variety of different formats that webfonts come in: WOFF Stands for: Web Open Font Format. WOFF fonts were created specifically for web use, and often load faster than other formats because they use a compressed version of the structure used by OpenType (OTF) and TrueType (TTF) fonts. This format is generally preferred because it can also include metadata and license info within the font file itself. SVG / SVGZ Stands for: (Font) An SVG is a vector re-creation of the font, which makes it a smaller file size, and is also great for mobile use. This format is the only one allowed by version 4.1 and below of for iPhone. Currently SVG fonts are not supported by , IE or IE Mobile. SVGZ is a zipped version of SVG. EOT Stands for: Embedded Open Type. This format was created by Microsoft and is the only format that IE8 and below will recognize when using @font-face (we’ll cover this in Step 3) within a stylesheet. OTF / TTF Stands for: OpenType Font and TrueType Font. Although being phased out in preference for WOFF, OpenType has the capability to include swashes, ligatures and alternate characters, which is a bonus for many designers. Although you may be able to get away with just using the .woff file, if you want to be as requirements of different web browsers, as each have limitations as to what file types they can support. Once you’ve decided on and found the webfonts you want to use, we’re ready to move on to the next step… Step 2: Uploading your webfonts. The next thing we need to do is to get the webfont files on to your website’s server either via FTP or File Manager if you use cPanel (I’ll be using cPanel in this tutorial). Let’s take a look what’s already there: Ignoring the cgi-bin folder, we’ve got our html file and css file . We need to upload our webfont files within the same directory as our css (this helps reduce the chance of problems and errors occurring): Once you have your files in uploaded in the right place, we need to edit our css stylesheet to assign our webfonts to the text… Step 3: Modifying your css file with @font-face. With your files in the right place, the first thing you need to do is update your css file to let browsers know where they can find the webfonts. We do this by using the @font-face declaration. Let’s take a look at our css stylesheet as it stands: body background-color: white; padding: 2%;> h1 color: #1F1F1F;> p color: #1F1F1F; line-height: 120%;> So far, no specific fonts have been specified for the header (h1) and text (p), so all text is displayed at the browser’s default font and size, which is usually less than inspiring! :p. Let’s start taking some control of how we want our fonts to look. At the very top of your stylesheet, type or copy and paste: @font-face font-family: 'My Webfont'; src: url('mywebfont.eot'); /* IE9 Compat Modes */ src: url('mywebfont.eot?#iefix') format('embedded- '), /* IE6-IE8 */ url('mywebfont.woff') format('woff'), /* Modern Browsers */ url('mywebfont.ttf') format(''), /* Safari, Android, iOS */ url('mywebfont.svg#svgFontName') format('svg'); /* Legacy iOS */> If you’re not used to css, this may look a little scary – but don’t worry! Once you’ve pasted this text in to your stylesheet, the modifications you need to make are very simple: 1. Where is says font-family: ‘My Webfont’; change ‘My Webfont’ to the name of the font you’re using. In this case ‘Atlas Slab’ (you could call it anything you want, we’re using the font name here because it makes most sense. You could use an abbreviation if you wanted.) So: font-family: 'My Webfont'; Becomes: font-family: 'Atlas Slab'; 2. Where it says url(‘mywebfont.eot’); , you need to change ‘mywebfont’ to the name of the font exactly as it’s typed in the original webfont file we uploaded earlier: It’s extremely important that you make sure the file names match exactly to the original files – double-check capital letters, and . Update the name for all the files, so that: Note: What we’ve just updated is the location of the webfont files. If you uploaded the files to a directory that’s different to where your css file is located, you’ll need to specify the directory too (eg: url(‘webfonts/atlas_slab-webfont.eot’);) Once you’ve added the @font-face declaration to your css file for your webfonts, we can apply them to our text! Step 4: Modifying our css file to display the webfonts. Our css file should now look like: @font-face font-family: 'Atlas Slab'; src: url('atlas_slab-webfont.eot'); /* IE9 Compat Modes */ src: url('atlas_slab-webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('atlas_slab-webfont.woff') format('woff'), /* Modern Browsers */ url('atlas_slab-webfont.ttf') format('truetype'), /* Safari, Android, iOS */ url('atlas_slab-webfont.svg#svgFontName') format('svg'); /* Legacy iOS */> body background-color: white; padding: 2%;> h1 color: #1F1F1F;> p color: #1F1F1F; line-height: 120%;> We now want to specify which text we want to apply the webfonts to. In this case, we want our header text to use ‘Atlas Slab’. Let’s specify this by updating our h1 style, adding the line: font-family: 'Atlas Slab'; This needs to be the the same name we specified earlier in ‘font-family:’ in the @font-face declaration. Our header style now looks like: h1 color: #1F1F1F; font-family: 'Atlas Slab';> Make sure you save the file, then let’s take a look at our site: “Yeah Webfonts” indeed! We’ll tweak this slightly by specifying a size that displays the font at its best (this will vary font-to-font). Add the line: to your h1 style, so it looks like this: h1 color: #1F1F1F; font-family: 'Atlas Slab'; font-size: 40pt;> The result is much better! :) Step 5: More fonts! Since we now have a very funky looking header, it’d be nice to style our paragraph text too. Adding webfonts will increase the load time of your sites, so do choose carefully to create the most impact :) Following the steps as before, we’ll add the ‘Polly’ webfont to our site: 1. Choose your webfont and locate the files: 2. Upload the webfont files to the same directory as your css file: 3. Add the @font-face declaration to your css and specify the webfont and file names (Note: each new webfont requires its own ‘@font-face’ declaration): 4. Apply the fonts to your css, specifying the font size as necessary: 5. Save the files and admire your webfonts! And we’re done! Hopefully this tutorial showed you how to get started using the webfonts which are included in this huge bundle. If you’ve got any questions, please leave a comment below and I’ll keep an eye out over the next few days and do my best to help :). Remember, you can get this deal for 97% off this week! Grab it below, while you still can: 10 Free Tools To Create Your Own Fonts. Fonts give a powerful form to our content, and they can influence the way it’s perceived and interpreted. Nowadays, is especially important (and popular as a topic) in the context of responsive web design. There are so many wonderful, free fonts available online, but what if you want to modify them or make your own font? Here are 10 great and free tools to create your own fonts. 1. FontArk. FontArk is a browser-based font creator that lets you draw letters to make your own font. The most practical feature is the Outline Generator which automatically creates an outline around your drawing. You can later tweak it to change the thickness and roundness of letters. You can modify multiple characters at once to ensure consistency. For special font types, FontArk offers Logotype and Icon modes. Created fonts are exported as OTF files, and you can see what they look like in a real-time preview. FontArk has plenty of tutorials and video guides for beginners, explaining the basic steps to creating a font. Designers and experienced users will appreciate a whole set of advanced tools that FontArk also contains. Last but not least, there are templates you can modify to create something entirely new. Availability: Sign-up required but you can try the demo without registration. Supports only Chrome and Safari. 2. PaintFont. PaintFont is a simple web-based tool that takes all the work off of your hands and gives you a finished font based on your handwriting. Simply download the template (PDF or PNG file) and fill it out, either by hand or in an image editing software like Gimp, Photoshop, or even Paint. Then upload it back to PaintFont, preferably in grayscale, in one of several supported formats (PDF, PNG, TIFF or JPG). Your uploaded file will be processed and you’ll get a free OTF or TTF font. With PaintFont you don’t have as much control over the creative process as with other tools on this list, but it’s a handy solution if you just want a font really quickly. Availability: All modern browsers. 3. BirdFont. BirdFont is not only free, but also open source, and it’s a well-documented desktop tool for creating fonts. The interface is divided into tabs on top, main area in the middle and a sidebar with tools which are grouped by functions and explained here. To create fonts, you can draw on the grid, import SVG icons to make an icon font, or draw letters by hand in another program (or even on paper), then import that image into BirdFont as a background and draw over it, tracing the letter shapes. BirdFont can import drawings from Inkscape and Adobe Illustrator, and export finished projects as TTF, EOT and SVG fonts. Step-by-step tutorials can be found on the official website. Availability: Linux, Mac OS X, BSD and Windows. 4. FontForge. FontForge is a free, open source, complete software solution for creating fonts. With so many tools and options, it might seem overwhelming to a beginner. Luckily, there’s a tutorial to help you get started, along with a detailed FAQ that can teach you a lot about typography. In FontForge, you draw letters using curves and modify their shape and position. If you’re used to drawing in Photoshop or Gimp, this won’t be too difficult. The Spiro mode lets you perform detailed adjustments on curves. For better control over your drawings, FontForge offers layers, and just like BirdFont, it can import SVG and EPS files from Illustrator and Inkscape. You can also use it to extract fonts from PDF files. Before exporting your new font into one of many supported formats (OpenType, TrueType, AAT, SVG, PostScript, Multiple Master, dfont, BDF…), you can check for errors and inconsistencies with the Find Problems option and the Font Validation Tool. Availability: Windows & Mac OS X, Ubuntu, other Linux distributions. 5. FontStruct. FontStruct is a relatively simple tool in which you build fonts by combining geometrical shapes (called “Bricks”). New fonts can be made from scratch or based on other people’s work, which you can find in the Gallery. The basic interface is pretty straightforward, with only a few tools. However, this changes when you switch to Expert Mode. Here you get access to more options, like brick compositing and outlines. You can zoom in and out of the work area, switch to fullscreen mode and toggle different kinds of grids and guidelines. Your new font is exported either as TTF or in a special .glyphs format that can be edited on Mac OS X. FontStruct can’t import existing fonts or turn your handwriting into a font, but it lets you browse and download dozens of beautiful fonts created by other users. Availability: Sign-up required. Supports all modern browsers, but needs Flash to work properly. 6. Glyphr Studio. This beautiful, powerful and practical application comes in a portable form – there’s no need to install it, it just runs as an HTML file. You can import outlines from Inkscape and Illustrator, or even import entire SVG fonts and modify them. It’s possible to adjust and ligatures, and create Linked Shapes which can be reused to draw similar letters. With Glyphr Studio, you get a live preview of your font as you’re making it with the Test Drive option. Professional designers will be delighted by the Two Screen Mode, which lets you split Glyphr Studio across two monitors. Availability: All modern browsers, but works best in Chrome. 7. MyScriptFont. Another tool based on the same principle as PaintFont. If you want to turn your signature into a font, MyScriptFont makes it effortless – just download the template, fill it out with a dark blue or black pen and scan it as a portrait grayscale image at 300 dpi. Once you upload the image, MyScriptFont will give you a new font to download. You can choose between TTF and OTF formats. Availability: All modern browsers. 8. Fontastic. You’ve probably heard of icon fonts – instead of letters, they contain small images and look especially good on websites. Fontastic is a tool for creating icon fonts, and it offers a short guide to show you how. You can upload existing icons as SVG files and convert them within Fontastic, build multiple fonts and font collections, and modify every character with CSS to add shadows and color. Icons in your font will scale automatically depending on the device, so you can be sure they’ll look great everywhere. Availability: Sign-up required. Works in all modern browsers. 9. Pentacom’s BitFontMaker. Here’s another tool for a special font type. BitFontMaker lets you create pixel fonts, which you might remember from (old) video games. You can browse the gallery to see what others have made, upload TTF or OTF files and paint over them, or jump straight into the editor, where you can draw each letter by selecting it in the table on the right and painting squares, i.e. pixels on the left. It’s easy and fun, and you can share the final product with other users. Availability: Supports IE 9+, Firefox 2+, Safari 5+ and Chrome. 10. TTFEdit. As the last tool on this list, TTFEdit strikes the balance between complex tools like FontForge and simple ones that don’t really do much. With TTFEdit, you can modify existing TTF fonts or create new ones from templates. The interface is divided into tabs. Each tab lets you perform different actions on the selected character(s). You can change the shape of each character by moving and resizing curves in the Editor. This is a desktop tool, so you’ll have to download and install it. Availability: Linux, Windows, Mac OS X. Here is how to create your own fonts with the help of these free tools. If you know any other free tools for creating fonts? Share your recommendations in the comments. How to make browser download fonts? NOTE: In order to apply the desired font to specific control or text inside control you will need to find the class or other identifier which can be used to apply font-family manually. For this open website front end, select the desired text >> then right click and "Inspect". Then find the class of the element or class of the parent element. As alternative you can open browser developer tools with F12 on keyboard and then use navigation option on the "Elements" tab to inspect the desired element.