Reply To: Can i use an external font (American Typewriter) in the ocean template?

Home › Forums › Support › Can i use an external font (American Typewriter) in the ocean template? › Reply To: Can i use an external font (American Typewriter) in the ocean template?

Brian
Posted 4 years, 5 months ago

Hi Carlos,
Is your font support web font version ? If so, you can do the same method like so https://google-webfonts-helper.herokuapp.com/fonts/barlow-condensed?subsets=latin

Just download your font then upload to joomla/templates/template_name/fonts/

Next open custom.css file at joomla/templates/templates/template_name/css/custom.css then add

/* barlow-condensed-regular - latin */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/barlow-condensed-v4-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Barlow Condensed Regular'), local('BarlowCondensed-Regular'),
       url('../fonts/barlow-condensed-v4-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/barlow-condensed-v4-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/barlow-condensed-v4-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/barlow-condensed-v4-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/barlow-condensed-v4-latin-regular.svg#BarlowCondensed') format('svg'); /* Legacy iOS */
}

replace barlow-condensed-v4-latin-regular. with your custom font name.
Last, you can use css code like so to use the font

.your-css-class-name {
   font-family: your-font-name;
}