Jump to content

Search the Community

Showing results for tags 'webfont'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • Xtra Themes News and Announcements
    • Xtra Themes Updates
  • Customer Lounge
    • Pre Sale Enquiries
    • Customer Feedback
  • Art and Graphics
    • Wallpapers and stocks
    • Renders and cuts
    • Fractals and effects
    • Art and Graphics related Tutorials
    • Art show off
  • Web Design and Coding
    • HTML and CSS
    • Website showcase
    • Tutorials and templates
  • Off Topic Lounge
    • Gaming Discussions
    • A Test Forum
  • VIP Lounge
  • Management Hall

Calendars

  • Community Calendar

Categories

  • Records

Categories

  • Suppliers

Found 1 result

  1. Using webfonts

    There are many ways you can use fonts on your website,one is to use services such as google fonts where you can simply reference the font from googles repository using their cdn.Another way is to obtain the webfont files yourself and place them onto a server of your own.These files can be stored in a location of your choosing but then you will need to reference these in your css like so.For this example i have used the popular Lato font. /* Webfont: Lato-Black */@font-face { font-family: 'LatoWebBlack'; src: url('http://mysite.com/fonts/Lato-Black.eot'); /* IE9 Compat Modes */ src: url('http://mysite.com/fonts/Lato-Black.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('http://mysite.com/fonts/Lato-Black.woff2') format('woff2'), /* Modern Browsers */ url('http://mysite.com/fonts/Lato-Black.woff') format('woff'), /* Modern Browsers */ url('http://mysite.com/fonts/Lato-Black.ttf') format('truetype'); font-style: normal; font-weight: normal; text-rendering: optimizeLegibility; } /* Webfont: Lato-BlackItalic */@font-face { font-family: 'LatoWebBlack'; src: url('http://mysite.com/fonts/Lato-BlackItalic.eot'); /* IE9 Compat Modes */ src: url('http://mysite.com/fonts/Lato-BlackItalic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('http://mysite.com/fonts/Lato-BlackItalic.woff2') format('woff2'), /* Modern Browsers */ url('http://mysite.com/fonts/Lato-BlackItalic.woff') format('woff'), /* Modern Browsers */ url('http://mysite.com/fonts/Lato-BlackItalic.ttf') format('truetype'); font-style: italic; font-weight: normal; text-rendering: optimizeLegibility; } /* Webfont: Lato-Bold */@font-face { font-family: 'LatoWebBold'; src: url('http://mysite.com/fonts/Lato-Bold.eot'); /* IE9 Compat Modes */ src: url('http://mysite.com/fonts/Lato-Bold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('http://mysite.com/fonts/Lato-Bold.woff2') format('woff2'), /* Modern Browsers */ url('http://mysite.com/fonts/Lato-Bold.woff') format('woff'), /* Modern Browsers */ url('http://mysite.com/fonts/Lato-Bold.ttf') format('truetype'); font-style: normal; font-weight: normal; text-rendering: optimizeLegibility; } /* Webfont: Lato-BoldItalic */@font-face { font-family: 'LatoWebBold'; src: url('http://mysite.com/fonts/Lato-BoldItalic.eot'); /* IE9 Compat Modes */ src: url('http://mysite.com/fonts/Lato-BoldItalic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('http://mysite.com/fonts/Lato-BoldItalic.woff2') format('woff2'), /* Modern Browsers */ url('http://mysite.com/fonts/Lato-BoldItalic.woff') format('woff'), /* Modern Browsers */ url('http://mysite.com/fonts/Lato-BoldItalic.ttf') format('truetype'); font-style: italic; font-weight: normal; text-rendering: optimizeLegibility; } /* Webfont: Lato-Hairline */@font-face { font-family: 'LatoWebHairline'; src: url('http://mysite.com/fonts/Lato-Hairline.eot'); /* IE9 Compat Modes */ src: url('http://mysite.com/fonts/Lato-Hairline.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('http://mysite.com/fonts/Lato-Hairline.woff2') format('woff2'), /* Modern Browsers */ url('http://mysite.com/fonts/Lato-Hairline.woff') format('woff'), /* Modern Browsers */ url('http://mysite.com/fonts/Lato-Hairline.ttf') format('truetype'); font-style: normal; font-weight: normal; text-rendering: optimizeLegibility; } /* Webfont: Lato-HairlineItalic */@font-face { font-family: 'LatoWebHairline'; src: url('http://mysite.com/fonts/Lato-HairlineItalic.eot'); /* IE9 Compat Modes */ src: url('http://mysite.com/fonts/Lato-HairlineItalic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('http://mysite.com/fonts/Lato-HairlineItalic.woff2') format('woff2'), /* Modern Browsers */ url('http://mysite.com/fonts/Lato-HairlineItalic.woff') format('woff'), /* Modern Browsers */ url('http://mysite.com/fonts/Lato-HairlineItalic.ttf') format('truetype'); font-style: italic; font-weight: normal; text-rendering: optimizeLegibility; } /* Webfont: Lato-Heavy */@font-face { font-family: 'LatoWebHeavy'; src: url('http://mysite.com/fonts/Lato-Heavy.eot'); /* IE9 Compat Modes */ src: url('http://mysite.com/fonts/Lato-Heavy.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('http://mysite.com/fonts/Lato-Heavy.woff2') format('woff2'), /* Modern Browsers */ url('http://mysite.com/fonts/Lato-Heavy.woff') format('woff'), /* Modern Browsers */ url('http://mysite.com/fonts/Lato-Heavy.ttf') format('truetype'); font-style: normal; font-weight: normal; text-rendering: optimizeLegibility; } /* Webfont: Lato-HeavyItalic */@font-face { font-family: 'LatoWebHeavy'; src: url('http://mysite.com/fonts/Lato-HeavyItalic.eot'); /* IE9 Compat Modes */ src: url('http://mysite.com/fonts/Lato-HeavyItalic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('http://mysite.com/fonts/Lato-HeavyItalic.woff2') format('woff2'), /* Modern Browsers */ url('http://mysite.com/fonts/Lato-HeavyItalic.woff') format('woff'), /* Modern Browsers */ url('http://mysite.com/fonts/Lato-HeavyItalic.ttf') format('truetype'); font-style: italic; font-weight: normal; text-rendering: optimizeLegibility; } /* Webfont: Lato-Italic */@font-face { font-family: 'LatoWeb'; src: url('http://mysite.com/fonts/Lato-Italic.eot'); /* IE9 Compat Modes */ src: url('http://mysite.com/fonts/Lato-Italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('http://mysite.com/fonts/Lato-Italic.woff2') format('woff2'), /* Modern Browsers */ url('http://mysite.com/fonts/Lato-Italic.woff') format('woff'), /* Modern Browsers */ url('http://mysite.com/fonts/Lato-Italic.ttf') format('truetype'); font-style: italic; font-weight: normal; text-rendering: optimizeLegibility; } /* Webfont: Lato-Light */@font-face { font-family: 'LatoWebLight'; src: url('http://mysite.com/fonts/Lato-Light.eot'); /* IE9 Compat Modes */ src: url('http://mysite.com/fonts/Lato-Light.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('http://mysite.com/fonts/Lato-Light.woff2') format('woff2'), /* Modern Browsers */ url('http://mysite.com/fonts/Lato-Light.woff') format('woff'), /* Modern Browsers */ url('http://mysite.com/fonts/Lato-Light.ttf') format('truetype'); font-style: normal; font-weight: normal; text-rendering: optimizeLegibility; } /* Webfont: Lato-LightItalic */@font-face { font-family: 'LatoWebLight'; src: url('http://mysite.com/fonts/Lato-LightItalic.eot'); /* IE9 Compat Modes */ src: url('http://mysite.com/fonts/Lato-LightItalic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('http://mysite.com/fonts/Lato-LightItalic.woff2') format('woff2'), /* Modern Browsers */ url('http://mysite.com/fonts/Lato-LightItalic.woff') format('woff'), /* Modern Browsers */ url('http://mysite.com/fonts/Lato-LightItalic.ttf') format('truetype'); font-style: italic; font-weight: normal; text-rendering: optimizeLegibility; } /* Webfont: Lato-Medium */@font-face { font-family: 'LatoWebMedium'; src: url('http://mysite.com/fonts/Lato-Medium.eot'); /* IE9 Compat Modes */ src: url('http://mysite.com/fonts/Lato-Medium.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('http://mysite.com/fonts/Lato-Medium.woff2') format('woff2'), /* Modern Browsers */ url('http://mysite.com/fonts/Lato-Medium.woff') format('woff'), /* Modern Browsers */ url('http://mysite.com/fonts/Lato-Medium.ttf') format('truetype'); font-style: normal; font-weight: normal; text-rendering: optimizeLegibility; } /* Webfont: Lato-MediumItalic */@font-face { font-family: 'LatoWebMedium'; src: url('http://mysite.com/fonts/Lato-MediumItalic.eot'); /* IE9 Compat Modes */ src: url('http://mysite.com/fonts/Lato-MediumItalic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('http://mysite.com/fonts/Lato-MediumItalic.woff2') format('woff2'), /* Modern Browsers */ url('http://mysite.com/fonts/Lato-MediumItalic.woff') format('woff'), /* Modern Browsers */ url('http://mysite.com/fonts/Lato-MediumItalic.ttf') format('truetype'); font-style: italic; font-weight: normal; text-rendering: optimizeLegibility; } /* Webfont: Lato-Regular */@font-face { font-family: 'LatoWeb'; src: url('http://mysite.com/fonts/Lato-Regular.eot'); /* IE9 Compat Modes */ src: url('http://mysite.com/fonts/Lato-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('http://mysite.com/fonts/Lato-Regular.woff2') format('woff2'), /* Modern Browsers */ url('http://mysite.com/fonts/Lato-Regular.woff') format('woff'), /* Modern Browsers */ url('http://mysite.com/fonts/Lato-Regular.ttf') format('truetype'); font-style: normal; font-weight: normal; text-rendering: optimizeLegibility; } /* Webfont: Lato-Semibold */@font-face { font-family: 'LatoWebSemibold'; src: url('http://mysite.com/fonts/Lato-Semibold.eot'); /* IE9 Compat Modes */ src: url('http://mysite.com/fonts/Lato-Semibold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('http://mysite.com/fonts/Lato-Semibold.woff2') format('woff2'), /* Modern Browsers */ url('http://mysite.com/fonts/Lato-Semibold.woff') format('woff'), /* Modern Browsers */ url('http://mysite.com/fonts/Lato-Semibold.ttf') format('truetype'); font-style: normal; font-weight: normal; text-rendering: optimizeLegibility; } /* Webfont: Lato-SemiboldItalic */@font-face { font-family: 'LatoWebSemibold'; src: url('http://mysite.com/fonts/Lato-SemiboldItalic.eot'); /* IE9 Compat Modes */ src: url('http://mysite.com/fonts/Lato-SemiboldItalic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('http://mysite.com/fonts/Lato-SemiboldItalic.woff2') format('woff2'), /* Modern Browsers */ url('http://mysite.com/fonts/Lato-SemiboldItalic.woff') format('woff'), /* Modern Browsers */ url('http://mysite.com/fonts/Lato-SemiboldItalic.ttf') format('truetype'); font-style: italic; font-weight: normal; text-rendering: optimizeLegibility; } /* Webfont: Lato-Thin */@font-face { font-family: 'LatoWebThin'; src: url('http://mysite.com/fonts/Lato-Thin.eot'); /* IE9 Compat Modes */ src: url('http://mysite.com/fonts/Lato-Thin.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('http://mysite.com/fonts/Lato-Thin.woff2') format('woff2'), /* Modern Browsers */ url('http://mysite.com/fonts/Lato-Thin.woff') format('woff'), /* Modern Browsers */ url('http://mysite.com/fonts/Lato-Thin.ttf') format('truetype'); font-style: normal; font-weight: normal; text-rendering: optimizeLegibility; } /* Webfont: Lato-ThinItalic */@font-face { font-family: 'LatoWebThin'; src: url('http://mysite.com/fonts/Lato-ThinItalic.eot'); /* IE9 Compat Modes */ src: url('http://mysite.com/fonts/Lato-ThinItalic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('http://mysite.com/fonts/Lato-ThinItalic.woff2') format('woff2'), /* Modern Browsers */ url('http://mysite.com/fonts/Lato-ThinItalic.woff') format('woff'), /* Modern Browsers */ url('http://mysite.com/fonts/Lato-ThinItalic.ttf') format('truetype'); font-style: italic; font-weight: normal; text-rendering: optimizeLegibility; } You then you need to target the elements of your theme with the font and also add this to your css file. For example body { font-family: 'yourfont' ; } I hope this tutorial has helped in some way
×