Title: Embedding a Custom Font Correctly Last modified: August 20, 2016 --- # Embedding a Custom Font Correctly * [Get Skinny](https://wordpress.org/support/users/get-skinny/) * (@get-skinny) * [14 years, 10 months ago](https://wordpress.org/support/topic/embedding-a-custom-font-correctly/) * Hello everyone, I have selected a custom font for some key headers and titles. I have it downloaded onto my computer and my site looks good with it. I found instructions on the internet about how to embed the custom font on the stylesheet( I’m assuming) so that it will appear on most browsers. Below are the instructions, then further are my questions: ******************************************************************************** @font-face { font-family: cool_font; src: url(‘cool_font.ttf’); } * After that you can use it just like a normal CSS declaration: * p.custom_font{ font-family: cool_font; /* no .ttf */ } ******************************************************************************** I’ve dumped the site twice and really don’t want to have to start over again, so here are my questions… * On the stylesheet of my theme, under the title “overall” I’ve located the “font- family: Arial, Helvetica, sans-serif:” Where exactly do I insert the above code? Do I simply add it to the next line? * I have the font downloaded on my computer, but I don’t know how to create the path that when I use “src: url(‘cool_font.ttf’);” that it knows where to go to get the font. * I have used the font on my menu and posts, but because it’s on my computer it shows up — nice. Now I want others to be able to view it too. * I’m not sure if I’m providing enough information, but your help would be very much appreciated. thank you, GS Viewing 4 replies - 1 through 4 (of 4 total) * [Chip Bennett](https://wordpress.org/support/users/chipbennett/) * (@chipbennett) * [14 years, 10 months ago](https://wordpress.org/support/topic/embedding-a-custom-font-correctly/#post-2210346) * You should place `@font-face` calls at the top of your stylesheet, after any ` @import` calls and before any style definitions. * The URLs are relative to the `stylesheet`, so if you use `src: url('cool_font. ttf')`, then `cool_font.ttf` needs to be in the _same directory_ as `style.css`. * Thread Starter [Get Skinny](https://wordpress.org/support/users/get-skinny/) * (@get-skinny) * [14 years, 10 months ago](https://wordpress.org/support/topic/embedding-a-custom-font-correctly/#post-2210419) * Thanks, Chip. * So, when I look at the style.css code it provides the origination of the theme with /* and */ element. Then it has a “reset” information block of code. It looks like the “overall” is the place where the stylesheet code actually begins. * So are you saying the the @font-face call should come before even the “body{” or would I embed it this way… * body { bacjkground: #880e0e; **@font-face { font-family: angelina; src: url (‘ angelina.ttf’); font-family: Arial, Helvetica, san-serif; font-size: 12px; * Does that look like what I should do? * I have the font on my computer, so where ever I wanted the font to show up I just listed it. Should I place the following instead… * p.custom_font{ font-family: Angelina; /* no .ttf */ * using it in style sheet when I want this font to appear? * Apologies for being behin the curve, I am trying to learn it the correct way. thanks again for your help. * Lisa * Thread Starter [Get Skinny](https://wordpress.org/support/users/get-skinny/) * (@get-skinny) * [14 years, 10 months ago](https://wordpress.org/support/topic/embedding-a-custom-font-correctly/#post-2210423) * Okay, I figured it out and am going to explain it here for anyone else who may have a similar question about loading a custom font. * First, I found a great blog that explains everything you need to know to create the files… [](http://blog.themeforest.net/tutorials/how-to-achieve-cross-browser-font-face-support/) * So here are the steps. 1. download the font to your computer. 2. got to [ 3. upload your font in a .ttf file at the @fontface generator with the link directly above 4. Click on “optimal” and then agree if your font is able to be downloaded onto a website, then click download. This generator creates the files for all cross platform webbrowsers, even for the iphone. 5. copy or drag each of the files into the same directory that you have your css stylesheet saved. 6. one of the files the generator creates is the css stylesheet code, now go to your css style sheet and just before the body{ copy and paste that css stylesheet code. 7. save your code and walah, it works! Even on the iphone. * I hope this helps. * Ciao. * Thread Starter [Get Skinny](https://wordpress.org/support/users/get-skinny/) * (@get-skinny) * [14 years, 10 months ago](https://wordpress.org/support/topic/embedding-a-custom-font-correctly/#post-2210424) * Sorry the two links are… * [http://blog.themeforest.net/tutorials/how-to-achieve-cross-browser-font-face-support/http://www.fontsquirrel.com/fontface/generator](http://blog.themeforest.net/tutorials/how-to-achieve-cross-browser-font-face-support/http://www.fontsquirrel.com/fontface/generator) * I didn’t use the “link” button correctly I guess. Viewing 4 replies - 1 through 4 (of 4 total) The topic ‘Embedding a Custom Font Correctly’ is closed to new replies. * 4 replies * 2 participants * Last reply from: [Get Skinny](https://wordpress.org/support/users/get-skinny/) * Last activity: [14 years, 10 months ago](https://wordpress.org/support/topic/embedding-a-custom-font-correctly/#post-2210424) * Status: not resolved ## Topics ### Topics with no replies ### Non-support topics ### Resolved topics ### Unresolved topics ### All topics