change the font of a specific area (h1) on a child theme

Hello

I think the Font URL you have used is incorrect.

Correct URL is: https://mademoizellefiona.fr/wp-content/themes/shapely-child/fonts/saturdayscript_oblique_alt2-webfont.ttf

Kindly try again with correct URL.

Reference link on how to include fonts: https://css-tricks.com/snippets/css/using-font-face/

Thanks.

@finda122

in addition to suggestion by @kartiks16

I’m unsure what this code is trying to achieve?

.Heading 1 {
 font-family: "saturdayscript_oblique_alt2", Arial, sans-serif;
 }

is .Heading 1 meant to be a container for the H1 and H2 heading tags?

If yes then it should read

.Heading 1 H1, H2{
 font-family: "saturdayscript_oblique_alt2", Arial, sans-serif;
 }

Also, best not to use a space when creating these things.

below may be better

.Heading H1, H2{
 font-family: "saturdayscript_oblique_alt2", Arial, sans-serif;
 }

if you want only specific areas to display your chosen font, then you need to tell your CSS accordingly, so with the above, it will change the H1 and H2 tagged text in the container Heading only.

If I’ve misunderstood, just let me know and we can look again.

• This reply was modified 6 years, 6 months ago by Farook Kholwadia.

hello,

so I should write this ?
@font-face {
font-family: saturdayscript_oblique_alt2;
src: url(https://mademoizellefiona.fr/wp-content/themes/shapely-child/fonts/saturdayscript_oblique_alt2-webfont.ttf);
font-weight: normal;
}

.Heading H1, H2{
font-family: “saturdayscript_oblique_alt2”, Arial, sans-serif;
}

if yes, where do I write this please ? directly in my wordpress editor ?

@finda122

the below should work:

@font-face {
font-family: saturdayscript_oblique_alt2;
src: url(mademoizellefiona.fr/wp-content/themes/shapely-child/fonts/saturdayscript_oblique_alt2-webfont.ttf);}

.Heading, h1, h2
 {font-family: saturdayscript_oblique_alt2;}

Best to use your dashboard;
Appearance >> Customize >> Additional CSS

IMPORTANT: this will only apply to H1 and H2 tags in the container class Heading

If the container already exists, there’s no need to create one, just replace .Heading with the name of that container. You can always use the browser inspector to find it.

If you’re still stuck, reply by stating which text you’re trying to change and on which page.

Good luck

• This reply was modified 6 years, 6 months ago by Farook Kholwadia.

@finda122

sorry the url should include https://

@judgerookie

I wrote in my additionnal css this =

@font-face {
font-family: saturdayscript_oblique_alt2;
src: url(https://mademoizellefiona.fr/wp-content/themes/shapely-child/fonts/saturdayscript_oblique_alt2-webfont.ttf);}

.Heading, h1, h3
{font-family: saturdayscript_oblique_alt2;}

and still not working; I wrote h3 because after i checked it’s h3 and not h2

I would like to change the parts ” rester c’est exister, voyager c’est vivre” and the titles page HOME (MES DERNIERS ARTICLES /ENCORE PLUS SUR LES RESEAUX SOCIAUX etc)

thank you for your help ??

can I send to you the chrome inspector css online screenshot ? it may be easier for you to understand what’s happening (or not happening lol)

I tried an other font (added it with filezilla etc) just with h1 and desactivated a google font plugin I used on wordpress (in case it was the problem)

I wrote this on the additionnal css (I have a child theme)
@font-face {
font-family: ‘playlistscript’;
src: url(‘https://mademoizellefiona.fr/wp-content/themes/shapely-child/fonts/Playlistscript.otf’) format(‘otf’);}

h1 {
font-family: playlist_script-webfont;
}

but still not working… i’m so desperate…

[ Please do not bump. ]