Just nu i M3-nätverket
Gå till innehåll
Iuar

logotyp fungerar inte på mobil enhet. Font laddas ej @fontface

Rekommendera Poster

Hej! Ska försöka förklara mitt problem så gott det går. 
Jag utvecklar en blogg utifrån wordpress/understrap. 
Har problem med logotypen. Loggan är enbart av text och jag
tänker därför ha denna i textform på sidan och inte i bildformat.

Nu till problemet: Allt annat anpassas till mobilen men den känner inte av den font jag vill ha
på det viset som datorn visar.  

Jag har testat allt från att ta fram .svg filer m.m. och förstår
inte varför datorn känner av css, men inte mobilen? Jag har helt
enkelt kört fast och sänder mitt hopp till er. :) 

Så här ser css-koden ut och den är placerad i header.php just nu. 
Loggan och boxen är också placerad i denna fil. 


<style>

@font-face {
  font-family: "steelfish"
  src: url('trivselbloggen.se/wp-content/themes/understrap/fonts/steelfish%20rg.ttf')
  src: url('trivselbloggen.se/wp-content/themes/understrap/fonts/steelfish%20rg.ttf') format('truetype'), url('trivselbloggen.se/wp-content/themes/understrap/fonts/steelfish_rg-webfont.svg#steelfishregular') format('svg')
  font-weight: bold;
  font-style: normal;
  }

.divtrivsel {
	background-color: #B5E51D;
	 box-sizing: border-box;
    max-width: 100vw;
    height: 30vh;
    padding: 1vh;
	text-align: center;
	overflow: hidden;

}

divtrivseltext {
	font-family: steelfish;
	font-size: 15vh;
	color: #fff;

}

</style>
 </head>




 

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser

Elementet som logon ligger i är ett custom-element; alltså det som ser ut såhär:

<divtrivseltext>Trivselbloggen</divtrivseltext>

Detta stöds inte så väl (https://caniuse.com/#search=custom elements). Så min misstanke är just detta. Tror dock inte du ska behöva detta extra element. Lägg istället texten direkt under div.divtrivsel och skippa custom-elementet. Och flytta attributen i CSS:en från divtrivseltext till .divtrivsel. 

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser
Postad (redigerade)

Tack för svar ChromaWoods, jag testade att ändra så som du beskrev
och det fungerar lika som innan men problemet kvarstår dock... 

Loggan visas som den ska när jag går in via dator men inte via mobil
där visas inte texten med den font jag vill ha (steelfish).
Textfärgen går att ändra m.m. men fonten laddas inte av någon anledning?

.divtrivsel {
    background-color: #B5E51D;
     box-sizing: border-box;
    max-width: 100vw;
    height: 30vh;
    padding: 1vh;
    text-align: center;
    overflow: hidden;
font-family: steelfish;
    font-size: 15vh;
    color: #fff;
}

Redigerad av Iuar

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser

Hmm, jag får samma resultat som du på min mobil. Ok, men då fixar vi även till @font-face-definitionen, för den ser inte helt ok ut heller. Tror inte du ska ha flera src-attribut, däremot separera sourcarna med kommatecken. Dessutom ska du ha semikolon efter varje attribut. Borde m.a.o. se ut såhär:

 

@font-face {
	font-family: "steelfish";
	src: url('trivselbloggen.se/wp-content/themes/understrap/fonts/steelfish%20rg.ttf'),
  		url('trivselbloggen.se/wp-content/themes/understrap/fonts/steelfish%20rg.ttf') format('truetype'), 
		url('trivselbloggen.se/wp-content/themes/understrap/fonts/steelfish_rg-webfont.svg#steelfishregular') format('svg');
	font-weight: bold;
	font-style: normal;
  }

 

Jag skulle även rekommendera att lägga till type="text/css" på style-taggen.

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser
Postad (redigerade)

Problemet kvarstår, blir galen :( Datorn - inga problem. Mobilen- ja då är det annat. 
Hmm... Ja :) tack för rekommendationen av fontface och style-taggen :thumbsup: Jag
har korrigerat detta nu. Så här ser koden ut nu.. ligger inom <head> taggen. 

(Ursäkta om det blir rörigt men jag hittar inte hur jag lägger in koden på det sättet
som jag gjorde i inlägg nr1 :P. )
 


<style type="text/css">

@font-face {
    font-family: "steelfish";
    src: url('trivselbloggen.se/wp-content/themes/understrap/fonts/steelfish%20rg.ttf'),
          url('trivselbloggen.se/wp-content/themes/understrap/fonts/steelfish%20rg.ttf') format('truetype'), 
        url('trivselbloggen.se/wp-content/themes/understrap/fonts/steelfish_rg-webfont.svg#steelfishregular') format('svg');
    font-weight: bold;
    font-style: normal;
  }

.divtrivsel {
    background-color: #B5E51D;
     box-sizing: border-box;
    max-width: 100vw;
    height: 30vh;
    padding: 1vh;
    text-align: center;
    overflow: hidden;
font-family: steelfish;
    font-size: 15vh;
    color: #fff;
}

 

</style>

 

Redigerad av Iuar

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser

Aha nu förstår jag vad som händer. Steelfish har aldrig funkat i din @font-face-regel. Fonten får 404 om du kollar i nätverkstabben i dev-tools. Anledningen att texten på din dator renderas i Steelfish är att du har Steelfish lokalt på din dator, men icke i din mobil. Fixa URL:en så kommer det nog funka som det ska.

 

image.thumb.png.4454249fef1eb88854a5ea715de8ff81.png

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser

Snygg observation! Kanske är en dum fråga men i min @fontface så 
är ju länkarna inte angiven till lokal-mapp utan till webbsidans adress
så jag förstår inte vad jag  ska fixa med URL:en.... 

Har det att göra med "%20" (mellanslag) ska vara något annat? 
 "steelfish%20rg.ttf". Blev så när jag kopierade... 

Har inte sovit många timmar inatt. Får se om jag tar mig en titt på det senare.
Tack så länge :). 

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser

Det ser ut som att jag ska ta bort trivselbloggen.se i länken nu när
jag kollar här :) blir ju fel då det inte finns någon mapp som heter "trivselbloggen.se".
Ska testa detta, återkommer :).

image.png.a14147d73d02cd90bd62f39b63e5ceb1.pngimage.png.bbc803df8d4e9309adc41ada4330d1b1.png

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser

ChromaWoods! Tack så mycket för hjälpen du gav mig, 
har även fått ut lärdomar av detta. Tusen tack, detta visar
vad bra det är att ta hjälp av andra! grymt! :)

testa gärna du också, fungerar för mig på mobil nu. 

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser

Skapa ett konto eller logga in för att kommentera

Du måste vara medlem för att kunna kommentera

Skapa ett konto

Skapa ett nytt konto på vårt forum. Det är lätt!

Registrera ett nytt konto

Logga in

Redan medlem? Logga in här.

Logga in nu



×