Just nu i M3-nätverket
Gå till innehåll
Eforum är stängt för nya inlägg och svar sedan 20 juni 2022. Klicka för att läsa vad som hände och om alternativ.

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

Iuar

Startad av Iuar,
i Webbutveckling

Rekommendera Poster

Iuar

Iuar

Postad
Postad

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>




 

Länk till kommentar
Dela på andra webbplatser
ChromaWoods

ChromaWoods

Postad
Postad

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. 

Länk till kommentar
Dela på andra webbplatser
Iuar

Iuar

Postad
  • Trådskapare
Postad

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;
}

Länk till kommentar
Dela på andra webbplatser
ChromaWoods

ChromaWoods

Postad
Postad

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.

Länk till kommentar
Dela på andra webbplatser
Iuar

Iuar

Postad
  • Trådskapare
Postad

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>

 

Länk till kommentar
Dela på andra webbplatser
ChromaWoods

ChromaWoods

Postad
Postad

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

Länk till kommentar
Dela på andra webbplatser
Iuar

Iuar

Postad
  • Trådskapare
Postad

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 :). 

Länk till kommentar
Dela på andra webbplatser
Iuar

Iuar

Postad
  • Trådskapare
Postad

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

Länk till kommentar
Dela på andra webbplatser
Iuar

Iuar

Postad
  • Trådskapare
Postad

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. 

Länk till kommentar
Dela på andra webbplatser

Arkiverat

Det här ämnet är nu arkiverat och är stängt för ytterligare svar.

Gå till ämneslista


×
×
  • Skapa nytt...