Creating Custom Font for header of Website with Vantage Theme

Hi Global Shades

Could you please answer a few questions which will allow us to assist you better.

1. What custom font were you using.
2. was it a web font.
3. if so what folder did you upload your font files to.

Thanks

Magus

Hi Global Shades

That should be fine. Depending on the font there should be several files. Could you please list these files for me here as each one needs to be added for different compatibility.

thanks

Magus

Hi Global Shades

Please move the files into a folder called ‘fonts’ (lowercase) and ensure that the folder has permissions of 755.

Then try adding the following to Appearance->Custom CSS

@font-face {
    font-family: 'Euro-Regular-Extended';
    src: url('http://globalshades.ca/fonts/euroregularextended-webfont.eot');
    src: url('http://globalshades.ca/fonts/euroregularextended-webfont.eot?#iefix') format('embedded-opentype'),
         url('http://globalshades.ca/fonts/euroregularextended-webfont.woff') format('woff'),
         url('http://globalshades.ca/fonts/euroregularextended-webfont.ttf') format('truetype'),
         url('http://globalshades.ca/fonts/euroregularextended-webfont.svg#Euro-Regular-Extended') format('svg');
    font-weight: normal;
    font-style: normal;
}

If you want all your text to be in this font you will also need to add the following

body { font-family: 'Euro-Regular-Extended' !important; }

If after this the font does not still appear please add the following to your .htaccess file

<FilesMatch "\.(ttf|otf|woff)$">
 <IfModule mod_headers.c> 
Header set Access-Control-Allow-Origin "*" 
</IfModule> 
</FilesMatch>

Let us know how you get on

Magus

Hi Global Shades

If you have successfully moved the font files into the new font folder, and if the folder has permissions set to 755 then all should be working unless the host has limited the file-types accessible to the PHP/CSS scripts.

This is not unheard of, if the files are in the right place and the CSS has been added then you will need to add the last section of code I provided to your .htaccess file in public_html.

We had the same issue with a customer on Hostgator last week.

Let us know how you get on

Magus

Hi Global Shades

Everything looks good with the contents and the files are accessible. I checked the provided style sheet and it is identical to the CSS we provided excluding the path to the files. What I was hoping to see from the screenshot were the file permissions for the font files and the permissions for the fonts folder itself. Would it be possible to provide shots of those parts of the screen for the files and folder.

From the behaviour so far it is definitely looking like a file/folder permissions issue.

Magus

Hi Global Shades

Permission 644 is correct for the fonts themselves, what about the fonts folder

Magus

Hi Global Shades

It shouldn’t make any difference but please try changing the original CSS to this

@font-face {
    font-family: 'eurostar_regular_extendedRg';
    src: url('/fonts/eurostarregularextended-webfont.eot');
    src: url('/fonts/eurostarregularextended-webfont.eot?#iefix') format('embedded-opentype'),
         url('/fonts/eurostarregularextended-webfont.woff2') format('woff2'),
         url('/fonts/eurostarregularextended-webfont.woff') format('woff'),
         url('/fonts/eurostarregularextended-webfont.ttf') format('truetype'),
         url('/fonts/eurostarregularextended-webfont.svg#eurostar_regular_extendedRg') format('svg');
    font-weight: normal;
    font-style: normal;
}

This is an exact copy of the font squirrel provided one which I have altered to use the fonts folder via relative links rather than absolute. You will need to alter the name of the font in the CSS you entered to target the title.

Magus