[Resolved] Whitespace & font-typeface.

[locate-australian]

Hi Fernando,

I downloaded font from Google Fonts & unzipped – extracted the contents but it only has 2 files compared to the Google Fonts Helper folder, which has 5(?) files.

I then received messages from WordPress & Google Console to inform me of a fatal coding error & the website would not display. I have since performed a restore backup & the site is working again.

I tried to perform the same except with Google Fonts but I don’t think the CSS matches, as the CSS provided includes a ‘latin’ style & Google Fonts does not, can you provide CSS to match Google Fonts ‘regular’ Questrial font please?

Here is the CSS provided by the Google Fonts Helper:

/* questrial-regular – latin */
@font-face {
font-family: ‘Questrial’;
font-style: normal;
font-weight: 400;
src: url(‘../fonts/questrial-v18-latin-regular.eot’); /* IE9 Compat Modes */
src: local(”),
url(‘../fonts/questrial-v18-latin-regular.eot?#iefix’) format(’embedded-opentype’), /* IE6-IE8 */
url(‘../fonts/questrial-v18-latin-regular.woff2’) format(‘woff2’), /* Super Modern Browsers */
url(‘../fonts/questrial-v18-latin-regular.woff’) format(‘woff’), /* Modern Browsers */
url(‘../fonts/questrial-v18-latin-regular.ttf’) format(‘truetype’), /* Safari, Android, iOS */
url(‘../fonts/questrial-v18-latin-regular.svg#Questrial’) format(‘svg’); /* Legacy iOS */
}

I will also try installing the Google Fonts Helper files again.

Kind regards,

L.A.

[Fernando]

Are you referring to the @font-face rules?

Here is an article which may assist you: https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face

Also see: https://css-tricks.com/snippets/css/using-font-face-in-css/

There are also several tools online that do the @font-face generation (and webfont conversion) for you – like this one:: https://www.fontsquirrel.com/tools/webfont-generator

[locate-australian]

Hi Fernando,

Great news, I was able to add the font & it works for my iPhone too.

I used the instructions except adding the CSS to our child theme ‘style.css’ file, which was noted as an option for an article regarding adding PHP code & then I updated the WordPress Customise settings with the font.

Thank you for your help 🙂

Kind regards

[Fernando]

That’s great news! Glad it’s resolved now! You’re welcome!

[Author]

Posts