Use multiple custom fonts using font-face

Question

I m sure I m missing something really straight forward  Been using a single custom font with normal font face    font-face       font-family  CustomFont      src  url  CustomFont ttf        All works fine when I use it but if I want to add another custom font what do I do  I ve tried separating by comma the next one or adding a whole other font face but can t get the second font working

User · Accepted Answer

You simply add another  font-face rule    font-face       font-family  CustomFont      src  url  CustomFont ttf        font-face       font-family  CustomFont2      src  url  CustomFont2 ttf        If your second font still doesn t work  make sure you re spelling its typeface name and its file name correctly  your browser caches are behaving  your OS isn t messing around with a font of the same name  etc

User · Answer

You can use multiple font faces quite easily  Below is an example of how I used it in the past    lt  -- if  IE   gt  lt  -- gt       lt style type  text css  media  screen  gt           font-face               font-family   Century Schoolbook               src  url  fonts century-schoolbook eot                      font-face               font-family   Chalkduster               src  url  fonts chalkduster eot                  lt  style gt   lt  -- lt   endif -- gt   lt  -- if   IE   gt  lt  -- gt       lt style type  text css  media  screen  gt           font-face               font-family   Century Schoolbook               src  url  fonts century-schoolbook ttf                      font-face               font-family   Chalkduster               src  url  fonts chalkduster ttf                  lt  style gt   lt  -- lt   endif -- gt    It is worth noting that fonts can be funny across different Browsers  Font face on earlier browsers works  but you need to use eot files instead of ttf   That is why I include my fonts in the head of the html file as I can then use conditional IE tags to use eot or ttf files accordingly   If you need to convert ttf to eot for this purpose there is a brilliant website you can do this for free online  which can be found at http   ttf2eot sebastiankippe com    Hope that helps

User · Answer

I use this method in my css file   font-face     font-family  FontName1    src  url  fontname1 eot       IE      src  local  FontName1    url  fontname1 ttf   format  truetype       others       font-face     font-family  FontName2    src  url  fontname1 eot       IE      src  local  FontName2    url  fontname2 ttf   format  truetype       others       font-face     font-family  FontName3    src  url  fontname1 eot       IE      src  local  FontName3    url  fontname3 ttf   format  truetype       others

User · Answer

Check out fontsquirrel  They have a web font generator  which will also spit out a suitable stylesheet for your font  look for   font-face kit    This stylesheet can be included in your own  or you can use it as a template

User · Answer

If you are having a problem with the font working I have also had this in the past and the issue I found was down to the font-family  name  This had to match what font name was actually given   The easiest way I found to find this out was to install the font and see what display name is given   For example  I was using Gill Sans on one project  but the actual font was called Gill Sans MT  Spacing and capitlisation was also important to get right   Hope that helps

[css] Use multiple custom fonts using @font-face?

Examples related to css

Examples related to fonts

Examples related to font-face